@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--ink:#1c2737;--text:#586779;--orange:#f35a08;--paper:#fbfaf7;--line:#e6e8eb;--nav:#4a5665}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}.shell{width:min(1280px,89vw);margin:auto}
header{height:98px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.head{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:9px;letter-spacing:5px;font-size:20px;color:#747b82}
.logo-mark{font-size:30px;letter-spacing:-12px;color:var(--orange);font-weight:700}.logo strong{color:var(--orange);font-weight:500}
.logo small{display:block;letter-spacing:.2px;font-size:7px;color:#333;margin-top:-3px}
.menu-btn{border:0;border-radius:28px;background:var(--nav);color:#fff;padding:16px 23px;font-weight:700;letter-spacing:1px;box-shadow:0 7px 14px #0002;cursor:pointer}
.menu-btn i,.menu-btn i:before,.menu-btn i:after{display:inline-block;width:17px;height:2px;background:#fff;content:"";position:relative;margin-left:10px;vertical-align:middle}
.menu-btn i:before{position:absolute;left:-10px;top:-6px}.menu-btn i:after{position:absolute;left:-10px;top:6px}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,88vw);background:#202a37;color:white;z-index:80;padding:110px 50px 40px;transform:translateX(102%);transition:.3s;box-shadow:-20px 0 50px #0003}
.drawer.open{transform:none}.drawer a{display:block;font-family:"Playfair Display",serif;font-size:34px;padding:12px 0;border-bottom:1px solid #ffffff24}.close{position:absolute;right:28px;top:26px;background:none;border:0;color:white;font-size:34px;cursor:pointer}
section{min-height:calc(100vh - 98px);display:flex;align-items:center;padding:62px 0}.label{font-size:12px;letter-spacing:4px;font-weight:700;color:var(--orange);text-transform:uppercase;margin-bottom:24px}.label:before{content:"";display:inline-block;width:38px;height:1px;background:var(--orange);vertical-align:middle;margin-right:12px}
h1,h2{font-family:"Playfair Display",Georgia,serif;margin:0;color:var(--ink);font-weight:600;letter-spacing:-2.3px}h1{font-size:clamp(55px,5.4vw,82px);line-height:1.08}h2{font-size:clamp(42px,4vw,62px);line-height:1.12}
.orange{color:var(--orange)}p{color:var(--text);font-size:16px;line-height:1.65}.hero-grid,.about-grid,.title-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.hero-copy p{max-width:570px;margin-top:34px}.visual{height:635px;border:1px solid #ffad78;border-radius:140px 140px 10px 10px;background:linear-gradient(145deg,#f7f4ee,#e8e5df);position:relative;overflow:hidden;box-shadow:0 20px 50px #5b4b3b0b}
.visual:before{content:"Aa";font-family:Georgia,serif;position:absolute;font-size:58px;left:16%;top:38%;color:#111}.visual:after{content:"W";position:absolute;font-size:190px;font-weight:800;right:20%;top:14%;color:#092a4c;transform:rotate(12deg);text-shadow:13px 14px 14px #0002}
.sheet{position:absolute;background:white;box-shadow:0 14px 24px #0002;border-radius:3px}.s1{width:45%;height:34%;left:7%;bottom:8%;transform:rotate(-10deg)}.s2{width:40%;height:28%;right:2%;bottom:5%;transform:rotate(13deg);background:linear-gradient(#fff 50%,#153554 50%)}.s3{width:35%;height:25%;right:16%;bottom:24%;transform:rotate(-4deg)}.s3:after{content:"";position:absolute;width:70px;height:70px;border:18px solid #d39b34;border-right-color:#25344d;border-bottom-color:#777;border-radius:50%;left:35%;top:24%}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;max-width:550px}.pill{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;font-size:12px;letter-spacing:1.5px;font-weight:700}.pill b{color:var(--orange);font-size:10px;margin-right:10px}
.about-art{height:620px;border:1px solid #ffad78;border-radius:140px 140px 5px 5px;background:linear-gradient(145deg,#e7e4df,#fff);position:relative;overflow:hidden}
.report{position:absolute;width:42%;height:46%;background:#fff;box-shadow:0 15px 25px #0003}.r1{left:9%;top:7%;transform:rotate(-9deg)}.r2{right:7%;top:7%;background:#17324b;transform:rotate(6deg)}.r3{left:10%;bottom:4%;background:linear-gradient(#17324b 50%,#f5f1e8 50%);transform:rotate(5deg)}.r4{right:7%;bottom:2%;transform:rotate(-7deg)}.r4:after{content:"";position:absolute;width:75px;height:75px;border:18px solid #d19a38;border-right-color:#21324a;border-radius:50%;left:28%;top:20%}
.about-copy p{max-width:600px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px}.mini{border-top:1px solid #dfe2e5;padding-top:24px}.mini h3{font-family:Georgia,serif;color:var(--orange);font-size:20px;margin:0 0 8px}.mini p{font-size:14px;margin:0}
.services{background:#fcfbf8}.title-grid{margin-bottom:55px}.title-grid p{max-width:580px}.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.service-card{min-height:390px;border-radius:12px;overflow:hidden;background:#e9e8e5;position:relative}.service-card .photo{height:100%;background:linear-gradient(145deg,#d9e5eb,#6c8290);position:absolute;inset:0}.service-card:nth-child(2) .photo{background:linear-gradient(135deg,#86cbd6,#fff7a4 46%,#f3c1ce)}.service-card:nth-child(3) .photo{background:linear-gradient(145deg,#e8eff2,#80949f)}.service-card .overlay{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#101a25dd);padding:80px 25px 25px;color:white}.service-card h3{font-family:Georgia,serif;font-size:27px;margin:0}.service-card p{color:#eef2f4;margin:8px 0 0;font-size:14px}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start;margin-top:50px}.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.cover{aspect-ratio:.72;border-radius:10px;background:linear-gradient(145deg,#d7e6eb,#39768d);box-shadow:0 7px 18px #0001;position:relative;overflow:hidden}.cover:nth-child(2){background:linear-gradient(145deg,#f4b5a4,#f16d56)}.cover:nth-child(3){background:linear-gradient(145deg,#f8f5ed,#8db5b7)}.cover:nth-child(4){background:linear-gradient(145deg,#f3b8c2,#c25a70)}.cover:nth-child(5){background:linear-gradient(145deg,#9eb4c5,#506579)}.cover:nth-child(6){background:linear-gradient(145deg,#f4d19a,#f0803e)}.cover:after{content:"ANNUAL REPORT";position:absolute;bottom:14px;left:12px;color:white;font-size:10px;letter-spacing:1px;font-weight:700}
.feature-cover{height:560px;border-radius:12px;background:#dededc;display:flex;align-items:center;justify-content:center}.book{height:82%;aspect-ratio:.7;background:#fff7ef;box-shadow:0 16px 28px #0003;position:relative}.book:before{content:"Charting Growth";position:absolute;bottom:12%;left:12%;right:8%;font-family:Georgia,serif;font-size:27px;color:#e87534}.book:after{content:"ANNUAL REPORT 2025–26";position:absolute;top:7%;left:9%;font-size:10px;color:#1d3a58}
.clients{background:#f1efe9}.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px;margin-top:54px}.client h3{font-size:14px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid #dcdfe2;padding-bottom:14px}.client ul{list-style:none;padding:0;margin:14px 0;color:var(--text);font-size:14px;line-height:2.15}
.contact{background:radial-gradient(circle at 8% 25%,#fff0e4,transparent 28%),#fff}.formbox{border:1px solid #e2e5e8;border-radius:40px;padding:42px;background:#ffffffc9;box-shadow:0 20px 45px #00000008}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.formbox label{display:block;font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:10px}.formbox input,.formbox textarea{width:100%;border:1px solid #dfe3e8;border-radius:28px;background:#f8f9fa;padding:15px 20px;font:inherit}.formbox textarea{border-radius:24px;min-height:120px;resize:vertical}.formbox button{width:100%;border:0;border-radius:28px;background:var(--orange);color:white;padding:16px;margin-top:22px;font-weight:700;letter-spacing:.5px;box-shadow:0 12px 25px #f35a0840;cursor:pointer}.contact-links{display:flex;gap:40px;margin-top:32px;font-size:12px;letter-spacing:1px}.contact-links a{color:var(--ink)}footer{border-top:1px solid var(--line);padding:25px 0;color:#79828c;font-size:12px}
@media(max-width:900px){section{min-height:auto;padding:80px 0}.hero-grid,.about-grid,.title-grid,.contact-grid,.work-grid{grid-template-columns:1fr}.visual,.about-art{height:520px}.service-cards,.client-grid{grid-template-columns:1fr 1fr}.title-grid{gap:20px}.about-art{order:2}}
@media(max-width:600px){header{height:78px}.shell{width:min(90vw,1280px)}.logo{font-size:15px}.menu-btn{padding:13px 17px}h1{font-size:48px}h2{font-size:40px}.visual,.about-art{height:420px;border-radius:90px 90px 8px 8px}.pills,.two-cols,.service-cards,.client-grid,.form-row{grid-template-columns:1fr}.feature-cover{height:440px}.contact-links{flex-direction:column;gap:12px}}

/* Official Wide Reach logo */
.logo{display:block;line-height:0}.logo img{display:block;width:258px;height:auto;max-height:79px;object-fit:contain}.logo-mark,.logo small{display:none}@media(max-width:600px){.logo img{width:210px;max-height:66px}}

/* Live SITE123 content alignment, 10 October 2026 */
.visual:before,.visual:after,.about-art:before{display:none!important}.visual img,.about-art img{width:100%;height:100%;object-fit:cover;display:block}.visual{border-radius:170px 170px 10px 10px}.about-art{border-radius:170px 170px 7px 7px}
.pill small{display:block;color:#697586;font-size:11px;font-weight:400;letter-spacing:0;line-height:1.5;margin:9px 0 0 27px}
.speedline{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:25px 0 55px;border-top:1px solid var(--line)}.speedline strong{font-family:Georgia,serif;font-size:20px}.speedline p{flex-basis:100%;margin:0}
.service-cards{align-items:stretch}.service-card{background:white;overflow:hidden;min-height:0;border:1px solid #eee}.service-image{display:block;width:100%;height:290px;object-fit:cover}.service-info{padding:24px}.service-num{color:var(--orange);font-size:12px;font-weight:700}.service-info h3{font-size:22px;letter-spacing:.5px}.service-info p{font-size:14px}.service-info .service-tag{font-weight:600;color:#27354a}.service-info a{display:inline-block;color:var(--orange);font-weight:700;margin-top:10px}
.work-grid{grid-template-columns:1fr 1fr}.portfolio-item h3{font-size:20px;margin:24px 0 6px;letter-spacing:1px}.portfolio-item p{margin:0 0 15px;font-size:14px}.mosaic img{width:100%;height:100%;aspect-ratio:.72;object-fit:cover;border-radius:9px}.feature-cover{overflow:hidden}.feature-cover img{width:100%;height:100%;object-fit:contain}.feature-cover.small{height:420px}.work-action{display:inline-block;background:transparent;border:0;border-bottom:1px solid var(--orange);padding:7px 0;color:var(--orange);font-weight:700;cursor:pointer;font-family:inherit}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:45px 0}.footer-grid strong{color:#263242}.footer-grid p{font-size:13px}.copyright{padding:20px 0;border-top:1px solid #eee}.report-dialog{max-width:560px;border:0;border-radius:20px;padding:40px;box-shadow:0 20px 90px #0005}.report-dialog::backdrop{background:#101a27a8}.report-dialog h2{font-size:30px}.report-dialog #reportClose{position:absolute;right:20px;top:14px;font-size:25px;border:0;background:none;cursor:pointer}
@media(max-width:900px){.service-cards{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.service-cards,.work-grid,.footer-grid{grid-template-columns:1fr}.service-image{height:250px}.speedline strong{font-size:16px}.visual,.about-art{border-radius:90px 90px 8px 8px}}


/* Motion and interactive elements */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:100;transition:width .08s linear}
.drawer-shade{position:fixed;inset:0;background:#111b2a85;z-index:70;opacity:0;transition:opacity .3s}
.drawer-shade.show{opacity:1}.drawer a.active{color:#ff995f}.menu-btn,.filter-btn,.work-action,.service-card,.portfolio-item img{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,opacity .25s ease}
.menu-btn:hover,.work-action:hover{transform:translateY(-2px)}.service-card:hover{transform:translateY(-7px);box-shadow:0 22px 44px #15253518}
.service-card:hover .service-image{transform:scale(1.045)}.service-image{transition:transform .7s ease!important}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 26px}.filter-btn{border:1px solid #d8dde3;background:white;color:var(--ink);padding:11px 17px;border-radius:30px;font:600 12px 'DM Sans',sans-serif;cursor:pointer}.filter-btn:hover,.filter-btn.is-active{background:var(--orange);color:white;border-color:var(--orange)}.portfolio-item[hidden]{display:none!important}
.mosaic img,.feature-cover img{cursor:pointer}.mosaic img:hover,.feature-cover img:hover{transform:scale(1.025);filter:brightness(1.045)}
.lightbox{border:0;background:#182231;color:white;padding:45px 55px 60px;max-width:min(92vw,1000px);max-height:94vh;border-radius:18px;box-shadow:0 25px 80px #0008;overflow:hidden}.lightbox::backdrop{background:#111b28d9;backdrop-filter:blur(6px)}.lightbox img{display:block;max-width:min(75vw,780px);max-height:72vh;object-fit:contain;margin:auto}.lightbox p{text-align:center;color:#fff;margin:15px 0 0}.lightbox button{position:absolute;border:0;background:#ffffff22;color:white;border-radius:50%;font-size:28px;cursor:pointer;width:42px;height:42px}.lightbox-close{right:12px;top:12px}.lightbox-prev{left:8px;top:45%}.lightbox-next{right:8px;top:45%}
.back-top{position:fixed;bottom:24px;right:25px;border:0;border-radius:50%;background:var(--orange);color:white;width:47px;height:47px;z-index:45;font-size:24px;box-shadow:0 8px 25px #f35a0850;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s}.back-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
@media(max-width:600px){.lightbox{padding:45px 35px}.lightbox img{max-width:72vw}.portfolio-filters{gap:7px}.filter-btn{padding:9px 11px}}

/* SITE123-style capability cards: titles only until hovered or keyboard-focused */
.pills{align-items:start}
.pill{position:relative;min-height:54px;padding:17px 16px;overflow:hidden;cursor:default;transition:box-shadow .25s ease,border-color .25s ease,background .25s ease;outline-offset:3px}
.pill small{display:grid;grid-template-rows:0fr;opacity:0;max-height:0;margin:0 0 0 27px;overflow:hidden;line-height:1.5;transition:max-height .3s ease,opacity .2s ease,margin-top .3s ease}
.pill:hover,.pill:focus-visible,.pill:focus-within{border-color:#f7a576;background:#fff;box-shadow:0 10px 24px #1c273712}
.pill:hover small,.pill:focus-visible small,.pill:focus-within small{max-height:90px;opacity:1;margin-top:10px}
@media(hover:none){.pill:active small{max-height:90px;opacity:1;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.pill,.pill small{transition:none}}

.hero-line{white-space:nowrap;display:inline-block}
@media(max-width:600px){.hero-line{white-space:normal}.hero-copy h1 .hero-line:nth-child(3){white-space:nowrap}}

/* Refined, gentle homepage entrance motion */
@keyframes wrHeroRise {from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes wrHeroImage {from{opacity:0;transform:translate3d(0,26px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@media (prefers-reduced-motion:no-preference){
  #home .hero-copy h1,#home .hero-copy>p,#home .pills,#home .visual{opacity:0;will-change:transform,opacity}
  #home.hero-ready .hero-copy h1{animation:wrHeroRise 1.05s cubic-bezier(.22,1,.36,1) .08s both}
  #home.hero-ready .hero-copy>p{animation:wrHeroRise 1.05s cubic-bezier(.22,1,.36,1) .26s both}
  #home.hero-ready .pills{animation:wrHeroRise 1.05s cubic-bezier(.22,1,.36,1) .43s both}
  #home.hero-ready .visual{animation:wrHeroImage 1.35s cubic-bezier(.22,1,.36,1) .24s both}
  .reveal{transform:translate3d(0,14px,0);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
  .drawer{transition:transform .48s cubic-bezier(.22,1,.36,1)}
  .pill small{transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin-top .42s cubic-bezier(.22,1,.36,1)}
}
@media(prefers-reduced-motion:reduce){#home .hero-copy h1,#home .hero-copy>p,#home .pills,#home .visual{opacity:1!important;animation:none!important}}

/* Homepage motion: animate ONLY the four capability cards */
@media (prefers-reduced-motion:no-preference){
  #home .hero-copy h1,
  #home .hero-copy > p,
  #home .visual{opacity:1!important;transform:none!important;animation:none!important;will-change:auto!important}
  #home .pills{opacity:1!important;transform:none!important;animation:none!important;will-change:auto!important}
  #home .pill{opacity:0;transform:translate3d(0,18px,0);will-change:transform,opacity}
  #home.capabilities-ready .pill:nth-child(1){animation:wrCapabilityIn .72s cubic-bezier(.22,1,.36,1) .10s both}
  #home.capabilities-ready .pill:nth-child(2){animation:wrCapabilityIn .72s cubic-bezier(.22,1,.36,1) .20s both}
  #home.capabilities-ready .pill:nth-child(3){animation:wrCapabilityIn .72s cubic-bezier(.22,1,.36,1) .30s both}
  #home.capabilities-ready .pill:nth-child(4){animation:wrCapabilityIn .72s cubic-bezier(.22,1,.36,1) .40s both}
}
@keyframes wrCapabilityIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){#home .pill{opacity:1!important;transform:none!important;animation:none!important}}


/* Home page: entrance/scroll animations removed per client request */
#home .hero-copy h1,
#home .hero-copy > p,
#home .pills,
#home .pill,
#home .visual {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}
#home.reveal, #home .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* About section — wide editorial layout matching approved reference */
#about .about-grid{display:block;max-width:1280px}
#about .about-art{display:none}
#about .about-copy{width:min(100%,760px);margin:0}
#about .about-copy h2{font-size:50px;line-height:1.2;letter-spacing:-1.4px;margin:24px 0 30px;white-space:nowrap}
#about .about-copy>p{max-width:650px;font-size:16px;line-height:2;margin:0}
#about .two-cols{width:645px;max-width:100%;grid-template-columns:1fr 1fr;gap:24px;margin-top:42px}
#about .mini{padding-top:25px}
#about .mini h3{font-size:19px;line-height:1.25;margin-bottom:10px}
#about .mini p{font-size:14px;line-height:1.65}
@media(max-width:800px){
  #about .about-copy{width:100%}
  #about .about-copy h2{font-size:44px;white-space:normal}
  #about .two-cols{width:100%}
}
@media(max-width:600px){
  #about .about-copy h2{font-size:38px;letter-spacing:-.8px}
  #about .two-cols{grid-template-columns:1fr}
}

/* About Us — two-column layout matched to supplied reference */
#about .about-grid{
  display:grid;
  grid-template-columns:minmax(390px,450px) minmax(0,1fr);
  gap:clamp(90px,12.7vw,185px);
  align-items:center;
  max-width:none;
}
#about .about-art{
  display:block;
  width:100%;
  height:620px;
  border-radius:170px 170px 7px 7px;
}
#about .about-copy{width:100%;margin:0}
#about .about-copy h2{
  font-size:50px;
  line-height:1.17;
  letter-spacing:-1.5px;
  margin:26px 0 34px;
  white-space:nowrap;
}
#about .about-copy>p{
  max-width:650px;
  font-size:16px;
  line-height:2;
  margin:0;
}
#about .two-cols{
  width:100%;
  max-width:650px;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:42px;
}
#about .mini{padding-top:25px}
#about .mini h3{font-size:19px;line-height:1.25;margin-bottom:10px}
#about .mini p{font-size:14px;line-height:1.65}
@media(max-width:1180px){
  #about .about-grid{grid-template-columns:minmax(340px,42%) 1fr;gap:60px}
  #about .about-copy h2{font-size:43px;white-space:normal}
}
@media(max-width:900px){
  #about .about-grid{grid-template-columns:1fr;gap:50px}
  #about .about-art{width:min(450px,100%);height:580px;order:0}
  #about .about-copy{order:1}
  #about .about-copy h2{font-size:44px;white-space:normal}
}
@media(max-width:600px){
  #about .about-art{height:480px}
  #about .about-copy h2{font-size:38px;letter-spacing:-.8px}
  #about .two-cols{grid-template-columns:1fr}
}

/* Speedline: centered editorial layout matching approved reference */
.speedline{display:block!important;text-align:center;padding:76px 20px 72px!important;border-top:0!important;}
.speedline-flow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.speedline-row{display:flex;align-items:center;justify-content:center;gap:22px;white-space:nowrap;}
.speedline strong{font-family:Georgia,serif!important;font-size:clamp(34px,3.25vw,52px)!important;line-height:1.05;font-weight:700;color:var(--navy);}
.speedline .speed-arrow{font-family:Arial,sans-serif;font-size:clamp(34px,3vw,48px);font-weight:600;line-height:1;color:var(--orange);}
.speedline .speed-delivery{display:block;color:var(--orange);}
.speedline p{margin:48px auto 0!important;max-width:1100px;font-size:clamp(18px,1.65vw,25px);line-height:1.45;text-align:center;}
@media(max-width:900px){.speedline{padding:55px 18px!important}.speedline-row{white-space:normal;flex-wrap:wrap;gap:12px 16px}.speedline strong{font-size:clamp(28px,5vw,42px)!important}.speedline p{margin-top:34px!important}}
@media(max-width:600px){.speedline-row{flex-direction:column}.speedline .speed-arrow{transform:rotate(90deg)}.speedline-flow{gap:12px}.speedline p{font-size:17px}}

/* Services: SITE123-style Explore reveal */
.service-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1),opacity .28s ease;margin:0}
.service-more>p{overflow:hidden;margin:0!important}
.service-card.is-expanded .service-more{grid-template-rows:1fr;opacity:1;margin-top:12px}
.service-explore{appearance:none;border:0;background:none;padding:0;margin-top:14px;color:var(--orange);font:inherit;font-weight:700;cursor:pointer;text-align:left}
.service-explore:hover,.service-explore:focus-visible{text-decoration:underline;text-underline-offset:4px}
.service-card:not(.is-expanded) .service-info{padding-bottom:26px}
@media(prefers-reduced-motion:reduce){.service-more{transition:none}}

/* Expanded service copy: full black for maximum readability */
.service-card .service-more p,
.service-card.is-expanded .service-more p{
  color:#000000!important;
  opacity:1!important;
}

/* Services: clearer copy hierarchy + bottom-aligned Explore controls */
.service-cards{align-items:stretch}
.service-card{display:flex;flex-direction:column;height:100%}
.service-info{display:flex;flex-direction:column;flex:1}
.service-info .service-tag{color:#172235!important;font-weight:600;line-height:1.65;margin-top:8px}
.service-more{order:5;border-top:1px solid transparent;padding-top:0}
.service-card.is-expanded .service-more{border-top-color:#d9dde2;padding-top:16px;margin-top:18px}
.service-card .service-more p,.service-card.is-expanded .service-more p{color:#000!important;font-weight:400;line-height:1.7;font-size:14px}
.service-explore{order:4;margin-top:auto!important;padding-top:18px!important;color:var(--orange)!important;font-weight:700}
.service-card.is-expanded .service-explore{margin-top:18px!important;padding-top:0!important}

/* PDF cover links and ordinary portfolio cursors. */
.report-cover-link{display:block;min-width:0;color:inherit}.report-cover-link img{width:100%;height:100%;object-fit:contain}.report-cover-link:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.report-list{padding-left:22px}.report-list li{margin:12px 0}.report-list a{color:var(--orange);text-decoration:underline}

.branding-visual{aspect-ratio:1.1;min-height:280px;border-radius:9px;background:#18334c;color:white;padding:32px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.branding-kicker{font-size:11px;letter-spacing:3px;color:#f6a264}.branding-visual>strong{font-size:clamp(24px,3vw,44px);line-height:1.15;max-width:320px}.branding-elements{display:flex;gap:28px;align-items:start}.branding-elements>span{font-size:44px;line-height:1.1}.branding-elements small{display:block;font-size:8px;letter-spacing:1px;margin-top:10px;color:#e5ecf1}.brand-symbol{color:#f8995a}.brand-palette{display:flex;position:relative;padding-bottom:24px}.brand-palette i{display:block;width:22px;height:40px;background:#ff7e32}.brand-palette i:nth-child(2){background:#f4d6b8}.brand-palette i:nth-child(3){background:#75abae}.brand-palette small{position:absolute;bottom:0;left:0}

/* Brand logos are revealed on hover, keyboard focus, or mobile tap. */
.branding-hover-panel{position:relative;border-radius:9px;overflow:hidden;outline-offset:4px}.branding-hover-panel .branding-visual{transition:opacity .22s}.branding-logo-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:10px;padding:18px;background:#f4f6f8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}.branding-logo{min-width:0;min-height:0;background:white;border-radius:6px;padding:10px;display:flex;align-items:center;justify-content:center}.branding-logo img{width:100%;height:100%;object-fit:contain}.branding-hover-panel:focus-visible{outline:3px solid var(--orange)}.branding-hover-panel:focus-visible .branding-logo-grid,.branding-hover-panel.is-open .branding-logo-grid{opacity:1;visibility:visible}.branding-hover-panel:focus-visible .branding-visual,.branding-hover-panel.is-open .branding-visual{opacity:0}.branding-toggle{display:none;margin-top:12px;border:1px solid var(--orange);color:var(--orange);border-radius:20px;background:white;padding:8px 16px;font:inherit;cursor:pointer}@media(hover:hover){[data-category="branding"]:hover .branding-logo-grid{opacity:1;visibility:visible}[data-category="branding"]:hover .branding-visual{opacity:0}}@media(hover:none){.branding-toggle{display:inline-block}}@media(max-width:480px){.branding-logo-grid{padding:10px;gap:6px}.branding-logo{padding:6px}}@media(prefers-reduced-motion:reduce){.branding-logo-grid,.branding-hover-panel .branding-visual{transition:none}}

/* Keep all 21 identities readable in the hover panel. */
.branding-logo-grid{grid-template-rows:none;grid-auto-rows:84px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto}.branding-logo-grid .branding-logo{height:84px}.branding-logo-grid .branding-logo img{height:100%}@media(max-width:480px){.branding-logo-grid{grid-auto-rows:74px}.branding-logo-grid .branding-logo{height:74px}}

/* Matching intro and hover-reveal interface for portfolio categories. */
.portfolio-hover-panel{position:relative;border-radius:9px;overflow:hidden;outline-offset:4px}.portfolio-hover-panel .branding-visual{min-height:360px;aspect-ratio:1.1;transition:opacity .22s}.portfolio-intro-elements{display:flex;gap:35px}.portfolio-intro-elements b{display:block;font-size:44px;line-height:1.1;font-weight:400;color:#f8995a}.portfolio-intro-elements small{display:block;font-size:8px;letter-spacing:1px;margin-top:10px;color:#e5ecf1}.portfolio-hover-gallery{position:absolute;inset:0;padding:18px;background:#f4f6f8;overflow:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}.portfolio-hover-panel.is-revealed .portfolio-hover-gallery{opacity:1;visibility:visible;pointer-events:auto}.portfolio-hover-panel.is-revealed .portfolio-intro{opacity:0}.portfolio-hover-panel:focus-visible{outline:3px solid var(--orange)}.portfolio-hover-gallery .mosaic{align-items:start}.portfolio-hover-gallery .mosaic img{height:auto;aspect-ratio:.72;object-fit:contain}.portfolio-hover-gallery .feature-cover{height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:transparent}.portfolio-hover-gallery .feature-cover img{max-height:100%;width:100%;height:100%;object-fit:contain}.portfolio-hover-toggle{display:none;margin-top:12px;border:1px solid var(--orange);color:var(--orange);border-radius:20px;background:white;padding:8px 16px;font:inherit;cursor:pointer}@media(hover:none){.portfolio-hover-toggle{display:inline-block}}@media(max-width:480px){.portfolio-hover-gallery{padding:10px}.portfolio-hover-panel .branding-visual{min-height:320px}.portfolio-intro-elements{gap:24px}}@media(prefers-reduced-motion:reduce){.portfolio-hover-gallery,.portfolio-intro{transition:none}}

/* Branding portfolio: latest supplied composite replaces the previous individual logo set. */
.branding-logo-grid.branding-collage-grid{display:flex;align-items:center;justify-content:center;overflow:auto;padding:14px;background:#fff;grid-template-columns:none;grid-template-rows:none;grid-auto-rows:auto}
.branding-collage-grid .branding-logo.branding-collage{width:100%;height:100%;min-height:0;padding:0;border-radius:0;background:#fff;display:flex;align-items:center;justify-content:center}
.branding-collage-grid .branding-logo.branding-collage img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:480px){.branding-logo-grid.branding-collage-grid{padding:8px}.branding-collage-grid .branding-logo.branding-collage{height:100%}}

/* Under-construction portfolio states */
.under-construction-card{min-height:360px;aspect-ratio:1.1;border-radius:9px;background:#f4f6f8;border:1px solid #e0e4e8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:#263242}.under-construction-kicker{font-size:11px;letter-spacing:3px;color:#f8995a;margin-bottom:18px}.under-construction-card strong{font-size:clamp(30px,4vw,52px);line-height:1.05}.under-construction-card p{max-width:280px;margin:14px auto 0!important;color:#687381}.portfolio-item[data-category="internal"]>p,.portfolio-item[data-category="miscellaneous"]>p{color:#687381}

/* Internal Communication portfolio — latest supplied campaign work. */
.internal-communication-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.portfolio-hover-gallery .internal-communication-mosaic img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#fff;box-shadow:0 4px 14px #0001}
@media(max-width:480px){.internal-communication-mosaic{grid-template-columns:1fr}}

/* Refined four-cover presentation for report/journal categories — clean, stable thumbnails */
.portfolio-hover-gallery .mosaic.four-up{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 24px;
  max-width:520px;
  margin:0 auto;
  padding:2px;
}
.portfolio-hover-gallery .mosaic.four-up .report-cover-link{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
  transition:none;
}
.portfolio-hover-gallery .mosaic.four-up .report-cover-link:hover,
.portfolio-hover-gallery .mosaic.four-up .report-cover-link:active{
  transform:none;
  box-shadow:none;
}
.portfolio-hover-gallery .mosaic.four-up img{
  display:block;
  width:auto;
  max-width:100%;
  height:225px;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 5px 16px rgba(20,35,50,.10);
  transform:none;
  transition:none;
}
@media(max-width:600px){
  .portfolio-hover-gallery .mosaic.four-up{gap:14px;max-width:100%}
  .portfolio-hover-gallery .mosaic.four-up .report-cover-link{padding:0}
  .portfolio-hover-gallery .mosaic.four-up img{height:auto;max-height:190px}
}

/* Homepage capability cards — stable hover; details reveal on click only */
#home .pill,
#home .pill:hover,
#home .pill:focus-visible,
#home .pill:focus-within{
  transform:none !important;
  transition:none !important;
  box-shadow:none !important;
  cursor:pointer;
}
#home .pill small,
#home .pill:hover small,
#home .pill:focus-visible small,
#home .pill:focus-within small,
#home .pill:active small{
  display:block !important;
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  overflow:hidden !important;
  transition:none !important;
}
#home .pill.is-open{
  border-color:#f36a21 !important;
  background:#fff !important;
}
#home .pill.is-open small{
  max-height:90px !important;
  opacity:1 !important;
  margin-top:10px !important;
}

/* Services: stable Explore interaction — detail swaps in place without changing card height. */
.service-cards{align-items:stretch}
.service-card{
  transform:none!important;
  transition:box-shadow .22s ease,background .22s ease!important;
}
.service-card:hover{
  transform:none!important;
  box-shadow:0 12px 30px #15253512;
}
.service-card:hover .service-image{
  transform:none!important;
}
.service-image{
  transform:none!important;
  transition:none!important;
}
.service-info{
  display:grid!important;
  grid-template-rows:auto auto 1fr auto;
  grid-template-columns:1fr;
  align-content:start;
  flex:1;
}
.service-info .service-num{grid-row:1}
.service-info h3{grid-row:2}
.service-info .service-tag,
.service-info .service-more{
  grid-row:3;
  grid-column:1;
  align-self:start;
}
.service-info .service-tag{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease;
}
.service-more{
  display:block!important;
  grid-template-rows:none!important;
  opacity:0!important;
  visibility:hidden;
  margin:8px 0 0!important;
  padding:0!important;
  border-top:0!important;
  pointer-events:none;
  transition:opacity .18s ease!important;
}
.service-more>p{
  overflow:visible!important;
  margin:0!important;
}
.service-card.is-expanded .service-tag{
  opacity:0;
  visibility:hidden;
}
.service-card.is-expanded .service-more{
  opacity:1!important;
  visibility:visible;
  margin:8px 0 0!important;
  padding:0!important;
  border-top:0!important;
  pointer-events:auto;
}
.service-explore,
.service-card.is-expanded .service-explore{
  grid-row:4;
  order:initial!important;
  align-self:end;
  margin-top:16px!important;
  padding-top:0!important;
}


/* Diaries & Calendars — balanced seven-cover gallery */
.portfolio-hover-gallery .diaries-calendar-mosaic{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:14px 16px;
  align-items:center;
  max-width:600px;
  margin:0 auto;
  padding:2px;
}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link{
  grid-column:span 2;
  display:flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:0;box-shadow:none;
  transform:none;transition:none;
}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(5){grid-column:2 / span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(6){grid-column:4 / span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(7){grid-column:6 / span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic img{
  display:block;width:auto;max-width:100%;height:150px;aspect-ratio:auto;object-fit:contain;
  border-radius:5px;box-shadow:0 4px 13px rgba(20,35,50,.10);
  transform:none;transition:none;
}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:hover,
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:active{transform:none;box-shadow:none}
@media(max-width:600px){
  .portfolio-hover-gallery .diaries-calendar-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link,
  .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(5),
  .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(6),
  .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(7){grid-column:auto}
  .portfolio-hover-gallery .diaries-calendar-mosaic img{height:auto;max-height:180px}
}

/* Coffee Table Books — balanced three-cover gallery */
.portfolio-hover-gallery .coffee-table-mosaic{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:92%;
  margin:0 auto;
  align-items:center;
  min-height:100%;
}
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link{
  display:flex;align-items:center;justify-content:center;min-width:0;
}
.portfolio-hover-gallery .coffee-table-mosaic img{
  width:100%;height:auto;max-height:285px;aspect-ratio:auto;object-fit:contain;
  border-radius:7px;box-shadow:0 6px 18px #00000016;
  transition:none!important;transform:none!important;
}
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link:hover img,
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link:active img{transform:none!important;filter:none!important;}
@media(max-width:600px){
  .portfolio-hover-gallery .coffee-table-mosaic{grid-template-columns:1fr;max-width:75%;gap:12px;}
  .portfolio-hover-gallery .coffee-table-mosaic img{max-height:220px;}
}

/* Equal service-card heights; the existing overlapping text grid reserves
   space for both Explore states, keeping the row height stable. */
.service-cards{align-items:stretch}
.service-cards > .service-card{height:100%;align-self:stretch}

/* Portfolio cover layouts: balanced rows within a compact gallery. */
[data-category="diaries-calendars"] .portfolio-intro,
[data-category="coffee-table-books"] .portfolio-intro{aspect-ratio:1.35;min-height:360px}
#gallery-diaries-calendars,#gallery-coffee-table-books{padding:20px}
.portfolio-hover-gallery .diaries-calendar-mosaic,
.portfolio-hover-gallery .coffee-table-mosaic{
 height:100%;min-height:0;max-width:none;width:100%;margin:0;padding:0;
 grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;
}
.portfolio-hover-gallery .diaries-calendar-mosaic{grid-template-columns:repeat(8,minmax(0,1fr))}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link{grid-column:span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(5){grid-column:2 / span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(6){grid-column:4 / span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(7){grid-column:6 / span 2}
.portfolio-hover-gallery .coffee-table-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link{grid-column:span 2}
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link:last-child{grid-column:2 / span 2}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link,
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link{height:100%;min-height:0;min-width:0;align-items:center;justify-content:center}
.portfolio-hover-gallery .diaries-calendar-mosaic img,
.portfolio-hover-gallery .coffee-table-mosaic img{
 width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;
 border-radius:0;box-shadow:none;
}
@media(max-width:600px){
 [data-category="diaries-calendars"] .portfolio-intro{aspect-ratio:auto;min-height:680px}
 #gallery-diaries-calendars,#gallery-coffee-table-books{padding:16px}
 .portfolio-hover-gallery .diaries-calendar-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:14px}
 .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link,
 .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(5),
 .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(6){grid-column:auto}
 .portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(7){grid-column:1 / -1;width:calc((100% - 14px) / 2);justify-self:center}
}

/* Uniform portfolio boxes and aligned contact actions. */
.work-grid{align-items:stretch}
.work-grid > .portfolio-item{display:flex;flex-direction:column;height:100%;min-width:0}
.work-grid > .portfolio-item[hidden]{display:none!important}
.work-grid .portfolio-hover-panel,
.work-grid .branding-hover-panel{height:clamp(400px,42vw,560px);flex:none}
.work-grid .portfolio-hover-panel .portfolio-intro,
.work-grid .branding-hover-panel > .branding-visual{
 height:100%;min-height:0!important;aspect-ratio:auto!important;box-sizing:border-box;
}
.work-grid .portfolio-item > h3{min-height:48px}
.work-grid .portfolio-item > p{min-height:44px}
.work-grid .portfolio-item > .work-action{margin-top:auto;align-self:flex-start}

/* Menu: only the item under the pointer uses the logo orange. */
.drawer a,.drawer a.active{color:#fff;transition:color .15s ease}
.drawer a:hover,.drawer a.active:hover{color:var(--orange)}

/* Compact title, description and discussion-link spacing across all eight sections. */
.work-grid .portfolio-item > h3{min-height:0;margin:20px 0 6px;line-height:1.25}
.work-grid .portfolio-item > p{min-height:0;margin:0;line-height:1.5}
.work-grid .portfolio-item > .work-action{margin-top:16px;align-self:flex-start}

#contactStatus{font-size:14px;line-height:1.5;margin:16px 0 0;color:var(--ink)}
.formbox button:disabled{opacity:.65;cursor:wait}

/* Clean section panels and slower hover transitions. */
.work-grid .branding-visual{justify-content:flex-start}
.work-grid .branding-visual > strong{margin-block:auto}
.work-grid .portfolio-hover-panel .portfolio-intro,
.work-grid .branding-hover-panel .branding-visual{transition:opacity .7s ease-in-out}
.work-grid .portfolio-hover-gallery,
.work-grid .branding-logo-grid{transition:opacity .7s ease-in-out,visibility 0s linear .7s}
.work-grid .portfolio-hover-panel.is-revealed .portfolio-hover-gallery,
.work-grid .branding-hover-panel.is-open .branding-logo-grid,
.work-grid .branding-hover-panel:focus-visible .branding-logo-grid{transition-delay:0s}
@media(hover:hover){.work-grid [data-category="branding"]:hover .branding-logo-grid{transition-delay:0s}}
@media(prefers-reduced-motion:reduce){
 .work-grid .portfolio-hover-panel .portfolio-intro,
 .work-grid .branding-hover-panel .branding-visual,
 .work-grid .portfolio-hover-gallery,
 .work-grid .branding-logo-grid{transition:none}
}

/* Updated cover counts: four coffee table books and six diaries/calendars. */
.portfolio-hover-gallery .coffee-table-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link,
.portfolio-hover-gallery .coffee-table-mosaic .report-cover-link:last-child{grid-column:auto}
.portfolio-hover-gallery .diaries-calendar-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link,
.portfolio-hover-gallery .diaries-calendar-mosaic .report-cover-link:nth-child(n){grid-column:auto;width:auto;justify-self:stretch}
@media(max-width:600px){.portfolio-hover-gallery .diaries-calendar-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}}

/* Centre each portfolio thumbnail collection within its section box. */
.work-grid .portfolio-hover-gallery{display:flex;align-items:center;justify-content:center}
.work-grid .portfolio-hover-gallery .mosaic{
 width:100%;max-width:100%;height:auto;min-height:0;max-height:100%;
 margin:auto;grid-template-rows:none;grid-auto-rows:auto;
 align-content:center;align-items:center;justify-items:center;overflow:auto;
}
.work-grid .portfolio-hover-gallery .mosaic .report-cover-link{
 display:flex;align-items:center;justify-content:center;height:auto;min-height:0;width:100%;
}
.work-grid .portfolio-hover-gallery .mosaic img{
 width:auto;height:auto;max-width:100%;max-height:190px;aspect-ratio:auto;object-fit:contain;
 display:block;margin:auto;
}
#gallery-miscellaneous .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-grid .branding-logo-grid{align-content:center;justify-items:center}
.work-grid .branding-collage-grid{display:flex;align-items:center;justify-content:center}
.work-grid .branding-collage-grid .branding-collage{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
@media(max-width:600px){
 .work-grid .portfolio-hover-gallery .mosaic img{max-height:140px}
}

/* Restore the descriptive words without their icons. */
.work-grid .branding-visual .portfolio-keywords{
 display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;
 color:#e5ecf1;font-size:9px;line-height:1.4;letter-spacing:1px;
 flex:none;margin-top:24px;
}
.work-grid .portfolio-keywords span{display:block}

/* Larger proportional thumbnails that use the available gallery area. */
.work-grid .portfolio-hover-gallery{padding:16px}
.work-grid .portfolio-hover-gallery .mosaic{
 height:100%;max-height:100%;width:100%;max-width:100%;padding:0;margin:0;
 grid-template-columns:repeat(2,minmax(0,1fr));
 grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-rows:auto;
 gap:16px;align-content:stretch;align-items:stretch;justify-items:stretch;overflow:hidden;
}
.work-grid #gallery-diaries-calendars .mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-grid .portfolio-hover-gallery .mosaic .report-cover-link,
.work-grid .portfolio-hover-gallery .mosaic .report-cover-link:nth-child(n){
 height:100%;width:100%;max-width:none;min-width:0;min-height:0;grid-column:auto;
 padding:0;display:flex;align-items:center;justify-content:center;
}
.work-grid .portfolio-hover-gallery .mosaic img{
 width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;
 aspect-ratio:auto;object-fit:contain;display:block;margin:0;
}
.work-grid .branding-collage-grid{padding:16px}
.work-grid .branding-collage-grid .branding-collage{padding:0}
.work-grid .branding-collage-grid img{width:100%;height:100%;object-fit:contain}
@media(max-width:600px){
 .work-grid .portfolio-hover-gallery{padding:12px}
 .work-grid .portfolio-hover-gallery .mosaic{gap:12px}
 .work-grid #gallery-diaries-calendars .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
}

/* Orange keywords, enlarged 20%, and one shared gallery background. */
.work-grid .branding-visual .portfolio-keywords{color:var(--orange);font-size:10.8px}
.work-grid .portfolio-hover-gallery,
.work-grid .branding-logo-grid.branding-collage-grid{background:#dfe4e9}
.work-grid .portfolio-hover-gallery .mosaic,
.work-grid .portfolio-hover-gallery .feature-cover,
.work-grid .portfolio-hover-gallery .report-cover-link,
.work-grid .branding-collage-grid .branding-logo.branding-collage{
 background:transparent!important;box-shadow:none!important;border:0;
}
.work-grid .portfolio-hover-gallery .mosaic img,
.work-grid .branding-collage-grid img{background:transparent!important;box-shadow:none!important}
\n\n/* ===== Client refinements — 15 Oct 2026 ===== */\n\n/* 1. Compact icon-only navigation button after removing the MENU label. */\n.menu-btn{\n  width:64px;\n  height:48px;\n  padding:0!important;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n}\n.menu-btn i,\n.menu-btn i:before,\n.menu-btn i:after{\n  width:20px;\n  height:2px;\n  margin-left:0;\n}\n.menu-btn i:before,\n.menu-btn i:after{left:0;}\n.menu-btn i:before{top:-7px;}\n.menu-btn i:after{top:7px;}\n\n/* 2. Capability cards: logo-orange fill on hover/focus, reversed white type. */\n#home .pill:hover,\n#home .pill:focus-visible,\n#home .pill:focus-within,\n#home .pill.is-open{\n  background:var(--orange)!important;\n  border-color:var(--orange)!important;\n  color:#fff!important;\n}\n#home .pill:hover b,\n#home .pill:focus-visible b,\n#home .pill:focus-within b,\n#home .pill.is-open b,\n#home .pill:hover small,\n#home .pill:focus-visible small,\n#home .pill:focus-within small,\n#home .pill.is-open small{\n  color:#fff!important;\n}\n\n/* 3. Service cards: equal compact closed height; natural height growth when expanded. */\n.service-cards{align-items:start!important;}\n.service-cards > .service-card{\n  height:auto!important;\n  min-height:305px;\n  align-self:start!important;\n}\n.service-info{\n  display:flex!important;\n  flex-direction:column;\n  flex:1;\n}\n.service-info .service-num,\n.service-info h3,\n.service-info .service-tag,\n.service-info .service-more,\n.service-explore{\n  grid-row:auto!important;\n  grid-column:auto!important;\n}\n.service-info .service-tag{\n  opacity:1!important;\n  visibility:visible!important;\n  margin-bottom:0!important;\n}\n.service-more{\n  display:grid!important;\n  grid-template-rows:0fr!important;\n  opacity:0!important;\n  visibility:visible!important;\n  margin:0!important;\n  padding:0!important;\n  border:0!important;\n  pointer-events:none;\n  transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1), opacity .24s ease, margin-top .38s ease!important;\n}\n.service-more>p{overflow:hidden!important;}\n.service-card.is-expanded .service-tag{\n  opacity:1!important;\n  visibility:visible!important;\n}\n.service-card.is-expanded .service-more{\n  grid-template-rows:1fr!important;\n  opacity:1!important;\n  margin-top:14px!important;\n  pointer-events:auto;\n}\n.service-explore,\n.service-card.is-expanded .service-explore{\n  order:initial!important;\n  align-self:flex-start!important;\n  margin-top:22px!important;\n  padding-top:0!important;\n}\n.service-card:not(.is-expanded) .service-explore{\n  margin-top:22px!important;\n}\n.service-card.is-expanded{min-height:0;}\n\n@media(max-width:600px){\n  .menu-btn{width:58px;height:44px;}\n  .service-cards > .service-card{min-height:0;}\n}\n
/* ===== Hamburger icon precision centering — 15 Oct 2026 ===== */
.menu-btn{
  position:relative!important;
  display:inline-block!important;
  width:64px;
  height:48px;
  padding:0!important;
}
.menu-btn i{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:20px!important;
  height:2px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  display:block!important;
}
.menu-btn i:before,
.menu-btn i:after{
  position:absolute!important;
  left:0!important;
  width:20px!important;
  height:2px!important;
  margin:0!important;
}
.menu-btn i:before{top:-7px!important;}
.menu-btn i:after{top:7px!important;}

@media(max-width:600px){
  .menu-btn{width:58px;height:44px;}
}

/* ===== Hamburger visibility + centering fix — 15 Oct 2026 ===== */
.menu-btn{
  position:relative!important;
  width:64px!important;
  height:48px!important;
  padding:0!important;
}
.menu-btn i,
.menu-btn i::before,
.menu-btn i::after,
.menu-btn:hover i,
.menu-btn:hover i::before,
.menu-btn:hover i::after,
.menu-btn:focus i,
.menu-btn:focus i::before,
.menu-btn:focus i::after{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  background:#fff!important;
}
.menu-btn i{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:20px!important;
  height:2px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
}
.menu-btn i::before,
.menu-btn i::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  width:20px!important;
  height:2px!important;
  margin:0!important;
}
.menu-btn i::before{top:-7px!important;}
.menu-btn i::after{top:7px!important;}
@media(max-width:600px){
  .menu-btn{width:58px!important;height:44px!important;}
}

/* ===== Capability boxes: orange hover + click-to-reveal detail (15 Oct 2026) ===== */
#home .pill{
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease !important;
}
#home .pill small{
  display:block !important;
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  overflow:hidden !important;
  color:#697586 !important;
  transition:max-height .28s ease,opacity .22s ease,margin-top .28s ease,color .22s ease !important;
}
#home .pill:hover,
#home .pill:focus-visible,
#home .pill:focus-within{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#fff !important;
  box-shadow:none !important;
}
#home .pill:hover b,
#home .pill:focus-visible b,
#home .pill:focus-within b,
#home .pill:hover small,
#home .pill:focus-visible small,
#home .pill:focus-within small{
  color:#fff !important;
}
#home .pill:hover small,
#home .pill:focus-visible small,
#home .pill:focus-within small{
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
}
#home .pill.is-open{
  background:#fff !important;
  border-color:var(--orange) !important;
  color:inherit !important;
}
#home .pill.is-open b{
  color:var(--orange) !important;
}
#home .pill.is-open small{
  max-height:90px !important;
  opacity:1 !important;
  margin-top:10px !important;
  color:#697586 !important;
}
#home .pill.is-open:hover,
#home .pill.is-open:focus-visible,
#home .pill.is-open:focus-within{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#fff !important;
}
#home .pill.is-open:hover b,
#home .pill.is-open:focus-visible b,
#home .pill.is-open:focus-within b,
#home .pill.is-open:hover small,
#home .pill.is-open:focus-visible small,
#home .pill.is-open:focus-within small{
  color:#fff !important;
}
#home .pill.is-open:hover small,
#home .pill.is-open:focus-visible small,
#home .pill.is-open:focus-within small{
  max-height:90px !important;
  opacity:1 !important;
  margin-top:10px !important;
}

/* ===== Capability boxes: hover-only orange reveal (15 Oct 2026) ===== */
#home .pill{
  cursor:default !important;
  background:#fff !important;
  border-color:var(--line) !important;
  color:inherit !important;
  transition:background .22s ease,border-color .22s ease,color .22s ease !important;
}
#home .pill small{
  display:block !important;
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
  overflow:hidden !important;
  color:#697586 !important;
  transition:max-height .28s ease,opacity .22s ease,margin-top .28s ease,color .22s ease !important;
}
#home .pill:hover,
#home .pill:focus-visible,
#home .pill:focus-within{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#fff !important;
}
#home .pill:hover b,
#home .pill:focus-visible b,
#home .pill:focus-within b,
#home .pill:hover small,
#home .pill:focus-visible small,
#home .pill:focus-within small{
  color:#fff !important;
}
#home .pill:hover small,
#home .pill:focus-visible small,
#home .pill:focus-within small{
  max-height:90px !important;
  opacity:1 !important;
  margin-top:10px !important;
}
#home .pill.is-open{
  background:#fff !important;
  border-color:var(--line) !important;
  color:inherit !important;
}
#home .pill.is-open small{
  max-height:0 !important;
  opacity:0 !important;
  margin-top:0 !important;
}
#home .pill.is-open:hover,
#home .pill.is-open:focus-visible,
#home .pill.is-open:focus-within{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#fff !important;
}
#home .pill.is-open:hover b,
#home .pill.is-open:focus-visible b,
#home .pill.is-open:focus-within b,
#home .pill.is-open:hover small,
#home .pill.is-open:focus-visible small,
#home .pill.is-open:focus-within small{
  color:#fff !important;
}
#home .pill.is-open:hover small,
#home .pill.is-open:focus-visible small,
#home .pill.is-open:focus-within small{
  max-height:90px !important;
  opacity:1 !important;
  margin-top:10px !important;
}

/* Services — hover treatment: Wide Reach orange fill with white typography */
.service-card .service-info{
  transition:background-color .22s ease,color .22s ease;
}
.service-card .service-info h3,
.service-card .service-info .service-num,
.service-card .service-info .service-tag,
.service-card .service-info .service-more p,
.service-card .service-info .service-explore{
  transition:color .22s ease,border-color .22s ease;
}
@media (hover:hover){
  .service-card:hover .service-info{
    background:var(--orange);
    color:#fff;
  }
  .service-card:hover .service-info h3,
  .service-card:hover .service-info .service-num,
  .service-card:hover .service-info .service-tag,
  .service-card:hover .service-info .service-more p,
  .service-card:hover .service-info .service-explore{
    color:#fff!important;
  }
  .service-card:hover .service-explore{
    border-color:#fff!important;
  }
}

/* 17 Oct 2026 — Speedline/process section: refined professional treatment */
.speedline{
  position:relative;
  display:block!important;
  text-align:center;
  width:100%!important;
  max-width:none!important;
  padding:72px max(5vw,24px) 68px!important;
  border-top:1px solid #ece7e2!important;
  border-bottom:1px solid #ece7e2!important;
  background:
    radial-gradient(circle at 50% -35%, rgba(243,90,8,.09), transparent 42%),
    linear-gradient(180deg,#fffdfb 0%,#faf9f7 100%);
}
.speedline::before{
  content:"OUR PROCESS";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  margin:0 auto 24px;
  padding:7px 14px;
  border:1px solid rgba(243,90,8,.28);
  border-radius:999px;
  color:var(--orange);
  background:#fff;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:2.2px;
}
.speedline-flow{
  max-width:1220px;
  margin:0 auto;
  gap:18px;
}
.speedline-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr);
  align-items:stretch;
  justify-content:center;
  gap:12px;
  white-space:normal;
}
.speedline-row strong{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:94px;
  padding:32px 18px 24px;
  border:1px solid #e7e3df;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(25,35,48,.045);
  font-size:clamp(27px,2.65vw,42px)!important;
  letter-spacing:-.7px;
}
.speedline-row strong::before{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  font-family:'DM Sans',Arial,sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--orange);
}
.speedline-row strong:nth-of-type(1)::before{content:"STEP 01"}
.speedline-row strong:nth-of-type(2)::before{content:"STEP 02"}
.speedline-row strong:nth-of-type(3)::before{content:"STEP 03"}
.speedline .speed-arrow{
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:34px;
  font-weight:400;
  color:var(--orange);
  opacity:.9;
}
.speedline .speed-delivery{
  position:relative;
  display:inline-block;
  margin-top:2px;
  padding:11px 24px 13px;
  border-radius:999px;
  background:var(--orange);
  color:#fff!important;
  box-shadow:0 10px 24px rgba(243,90,8,.20);
  font-size:clamp(28px,2.9vw,44px)!important;
  line-height:1.05;
}
.speedline .speed-delivery::before{
  content:"RESULT";
  display:block;
  margin-bottom:5px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:2px;
  color:rgba(255,255,255,.82);
}
.speedline p{
  max-width:930px;
  margin:30px auto 0!important;
  color:#596575;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.55;
  letter-spacing:.05px;
}
@media(max-width:900px){
  .speedline{padding:58px 24px 54px!important}
  .speedline-row{grid-template-columns:1fr;gap:10px;max-width:680px;margin:0 auto}
  .speedline .speed-arrow{height:28px;transform:rotate(90deg);font-size:30px}
  .speedline-row strong{min-height:82px;font-size:clamp(26px,5vw,38px)!important}
  .speedline .speed-delivery{font-size:clamp(27px,5vw,39px)!important}
}
@media(max-width:600px){
  .speedline{padding:48px 18px 44px!important}
  .speedline::before{margin-bottom:18px}
  .speedline-row strong{padding:30px 14px 20px;border-radius:14px}
  .speedline .speed-delivery{width:min(100%,380px);padding:11px 18px 13px}
  .speedline p{margin-top:24px!important;font-size:16px}
}

/* 17 Oct 2026 — translucent portfolio title panels so underlying thumbnails remain subtly visible. */
.work-grid .portfolio-hover-panel .portfolio-intro,
.work-grid .branding-hover-panel .branding-visual{
  position:relative;
  z-index:2;
  background:rgba(24,51,76,.86);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

/* Keep the actual work visible beneath the translucent title layer in all 8 sections. */
.work-grid .portfolio-hover-panel .portfolio-hover-gallery,
.work-grid .branding-hover-panel .branding-logo-grid{
  z-index:1;
  opacity:1;
  visibility:visible;
  pointer-events:none;
}

/* Hover/focus still removes the title layer completely and makes the work interactive. */
.work-grid .portfolio-hover-panel.is-revealed .portfolio-hover-gallery,
.work-grid .branding-hover-panel.is-open .branding-logo-grid,
.work-grid .branding-hover-panel:focus-visible .branding-logo-grid{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media(hover:hover){
  .work-grid [data-category="branding"]:hover .branding-logo-grid{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

/* 17 Oct 2026 — Process section: dark grey background + forward-moving arrows */
.speedline{
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:
    radial-gradient(circle at 50% -35%, rgba(243,90,8,.14), transparent 42%),
    linear-gradient(180deg,#34373c 0%,#292c31 100%)!important;
}
.speedline::before{
  color:var(--orange)!important;
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(243,90,8,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.speedline-row strong{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
.speedline .speed-arrow{
  animation:speedArrowForward 1.35s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform,opacity;
  text-shadow:0 0 14px rgba(243,90,8,.28);
}
.speedline p{
  color:#d8dce1!important;
}
@keyframes speedArrowForward{
  0%{transform:translateX(-7px);opacity:.42}
  48%{opacity:1}
  100%{transform:translateX(9px);opacity:.42}
}
@media(max-width:900px){
  .speedline .speed-arrow{
    animation:speedArrowForwardMobile 1.35s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes speedArrowForwardMobile{
    0%{transform:rotate(90deg) translateX(-7px);opacity:.42}
    48%{opacity:1}
    100%{transform:rotate(90deg) translateX(9px);opacity:.42}
  }
}
@media(prefers-reduced-motion:reduce){
  .speedline .speed-arrow{animation:none!important}
}

/* 17 Oct 2026 — process section revision: Wide Reach logo grey + open typography */
.speedline{
  background:#808285!important; /* grey sampled from the Wide Reach logo */
  border-top:0!important;
  border-bottom:0!important;
}
.speedline::before{
  background:transparent!important;
  border-color:rgba(255,255,255,.55)!important;
  color:#fff!important;
}
.speedline-row strong{
  min-height:94px;
  padding:30px 12px 20px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
}
.speedline-row strong::before{
  color:var(--orange)!important;
}
.speedline .speed-arrow{
  color:var(--orange);
}
.speedline p{
  color:#fff!important;
}

/* 17 Oct 2026 — process section: black step labels and arrows */
.speedline-row strong::before{
  color:#000!important;
}
.speedline .speed-arrow{
  color:#000;
  text-shadow:none!important;
}

/* 17 Oct 2026 — process arrows: forward motion with black ↔ white colour cycle */
.speedline .speed-arrow{
  color:#000;
  animation:speedArrowForwardColor 1.4s cubic-bezier(.4,0,.2,1) infinite!important;
  will-change:transform,color,opacity;
}
@keyframes speedArrowForwardColor{
  0%{transform:translateX(-7px);color:#000;opacity:.68}
  35%{color:#fff;opacity:1}
  65%{color:#fff;opacity:1}
  100%{transform:translateX(9px);color:#000;opacity:.68}
}
@media(max-width:900px){
  .speedline .speed-arrow{
    animation:speedArrowForwardColorMobile 1.4s cubic-bezier(.4,0,.2,1) infinite!important;
  }
  @keyframes speedArrowForwardColorMobile{
    0%{transform:rotate(90deg) translateX(-7px);color:#000;opacity:.68}
    35%{color:#fff;opacity:1}
    65%{color:#fff;opacity:1}
    100%{transform:rotate(90deg) translateX(9px);color:#000;opacity:.68}
  }
}
@media(prefers-reduced-motion:reduce){
  .speedline .speed-arrow{
    animation:none!important;
    color:#000!important;
  }
}

/* 17 Oct 2026 — FIX: guaranteed black ↔ white arrow colour animation */
.speedline .speed-arrow{
  position:relative;
  display:inline-block;
  width:1.15em;
  height:1.1em;
  color:transparent!important;
  font-size:clamp(34px,3vw,48px);
  line-height:1;
  animation:none!important;
  overflow:visible;
}
.speedline .speed-arrow::before,
.speedline .speed-arrow::after{
  content:"→";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  text-align:center;
  font:inherit;
  line-height:1;
  pointer-events:none;
  will-change:transform,opacity;
}
.speedline .speed-arrow::before{
  color:#000;
  animation:wrArrowBlack 1.6s ease-in-out infinite;
}
.speedline .speed-arrow::after{
  color:#fff;
  animation:wrArrowWhite 1.6s ease-in-out infinite;
}
@keyframes wrArrowBlack{
  0%{transform:translateX(-7px);opacity:1}
  38%{opacity:0}
  62%{opacity:0}
  100%{transform:translateX(9px);opacity:1}
}
@keyframes wrArrowWhite{
  0%{transform:translateX(-7px);opacity:0}
  38%{opacity:1}
  62%{opacity:1}
  100%{transform:translateX(9px);opacity:0}
}
@media(max-width:900px){
  .speedline .speed-arrow{transform:rotate(90deg)!important;}
  .speedline .speed-arrow::before,
  .speedline .speed-arrow::after{transform-origin:center;}
}
/* Keep the requested colour transition even when reduced-motion is enabled;
   only suppress the travel distance. */
@media(prefers-reduced-motion:reduce){
  .speedline .speed-arrow::before{animation:wrArrowBlackFade 1.6s ease-in-out infinite!important;}
  .speedline .speed-arrow::after{animation:wrArrowWhiteFade 1.6s ease-in-out infinite!important;}
  @keyframes wrArrowBlackFade{0%,100%{opacity:1}40%,60%{opacity:0}}
  @keyframes wrArrowWhiteFade{0%,100%{opacity:0}40%,60%{opacity:1}}
}

/* 17 Oct 2026 — FIX 2: visible forward travel + black/white colour cycle */
.speedline .speed-arrow{
  position:relative;
  display:inline-block;
  width:1.35em;
  height:1.15em;
  color:transparent!important;
  overflow:visible;
  animation:wrArrowTravel 1.35s cubic-bezier(.4,0,.2,1) infinite!important;
  will-change:transform;
}
.speedline .speed-arrow::before,
.speedline .speed-arrow::after{
  content:"→";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font:inherit;
  line-height:1;
  transform:none!important;
  pointer-events:none;
  will-change:opacity;
}
.speedline .speed-arrow::before{
  color:#000!important;
  animation:wrArrowBlackOnly 1.35s ease-in-out infinite!important;
}
.speedline .speed-arrow::after{
  color:#fff!important;
  animation:wrArrowWhiteOnly 1.35s ease-in-out infinite!important;
}
@keyframes wrArrowTravel{
  0%{transform:translateX(-10px)}
  50%{transform:translateX(7px)}
  100%{transform:translateX(14px)}
}
@keyframes wrArrowBlackOnly{
  0%,18%{opacity:1}
  45%,68%{opacity:0}
  100%{opacity:1}
}
@keyframes wrArrowWhiteOnly{
  0%,18%{opacity:0}
  45%,68%{opacity:1}
  100%{opacity:0}
}
@media(max-width:900px){
  .speedline .speed-arrow{
    animation:wrArrowTravelMobile 1.35s cubic-bezier(.4,0,.2,1) infinite!important;
  }
  @keyframes wrArrowTravelMobile{
    0%{transform:rotate(90deg) translateX(-10px)}
    50%{transform:rotate(90deg) translateX(7px)}
    100%{transform:rotate(90deg) translateX(14px)}
  }
}
@media(prefers-reduced-motion:reduce){
  .speedline .speed-arrow{animation:wrArrowTravel 1.35s cubic-bezier(.4,0,.2,1) infinite!important;}
  .speedline .speed-arrow::before{animation:wrArrowBlackOnly 1.35s ease-in-out infinite!important;}
  .speedline .speed-arrow::after{animation:wrArrowWhiteOnly 1.35s ease-in-out infinite!important;}
}

/* 17 Oct 2026 — Portfolio hover: title colour layer fades/wipes away from left to right. */
.work-grid .portfolio-hover-panel .portfolio-intro,
.work-grid .branding-hover-panel > .branding-visual{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  opacity:1 !important;
  will-change:clip-path,opacity;
  transition:
    clip-path 1.05s cubic-bezier(.22,.61,.36,1),
    -webkit-clip-path 1.05s cubic-bezier(.22,.61,.36,1),
    opacity .72s ease !important;
}

/* Reveal the thumbnails progressively: the left edge of the colour layer travels to the right. */
.work-grid .portfolio-hover-panel.is-revealed .portfolio-intro,
.work-grid .branding-hover-panel.is-open > .branding-visual,
.work-grid .branding-hover-panel:focus-visible > .branding-visual{
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
  opacity:.06 !important;
}

@media(hover:hover){
  .work-grid [data-category="branding"]:hover .branding-hover-panel > .branding-visual{
    clip-path: inset(0 0 0 100%);
    -webkit-clip-path: inset(0 0 0 100%);
    opacity:.06 !important;
  }
}

/* Preserve accessibility while keeping a visible directional transition. */
@media(prefers-reduced-motion:reduce){
  .work-grid .portfolio-hover-panel .portfolio-intro,
  .work-grid .branding-hover-panel > .branding-visual{
    transition:clip-path .35s linear, -webkit-clip-path .35s linear, opacity .35s linear !important;
  }
}

.footer-brand-logo{display:block;width:189px;max-width:100%;height:auto;margin:0 0 28px;transform:none}
.footer-brand-block p{font-weight:700;color:#263242}

/* 17 Oct 2026 — match portfolio keyword colour to each section kicker. */
.work-grid .branding-visual .portfolio-keywords{
  color:#f6a264!important;
}

/* 17 Oct 2026 — Process arrows: remove forward travel; retain black ↔ white colour cycle */
.speedline .speed-arrow{
  animation:none!important;
  transform:none!important;
  will-change:auto;
}
@media(max-width:900px){
  .speedline .speed-arrow{
    animation:none!important;
    transform:rotate(90deg)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .speedline .speed-arrow{
    animation:none!important;
  }
}

/* 17 Oct 2026 — LinkedIn icon in side navigation */
.drawer-linkedin{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-top:30px;
  border:1.5px solid rgba(255,255,255,.92);
  border-radius:7px;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:24px;
  font-weight:700;
  line-height:1;
  letter-spacing:-1px;
  user-select:none;
}

.drawer-linkedin{text-decoration:none}
.drawer-linkedin:hover,.drawer-linkedin:focus-visible{background:#fff;color:#202b3a;outline:none}

.footer-service-links{display:flex;flex-direction:column;gap:8px}
.footer-service-item{display:flex;align-items:flex-start;gap:8px;font-weight:700;color:#263242;font-size:13px;line-height:1.35}
.footer-point{color:var(--orange);font-size:15px;line-height:1;transform:translateY(-1px)}


/* ===== Footer orange reversal — 17 Oct 2026 ===== */
footer{background:var(--orange)!important;border-top:0!important;color:#fff!important;}
footer .footer-grid strong,
footer .footer-grid p,
footer .footer-grid a,
footer .footer-service-item,
footer .copyright,
footer .copyright a{color:#fff!important;}
footer .copyright{border-top:1px solid rgba(255,255,255,.28)!important;}
footer .footer-point{color:#fff!important;}
footer .footer-brand-logo{filter:brightness(0) invert(1);}


/* ===== Our Services background — 50% darker ===== */
#services.services{background:#7e7d7c!important;}


/* ===== Our Services heading refinements — 17 Oct 2026 ===== */
#services .label{color:#fff!important;}
#services .label:before{background:#fff!important;}
#services .title-grid>p{color:#fff!important;}
#services .services-hero-line{display:block;white-space:nowrap;}
@media(max-width:700px){
  #services .services-hero-line{white-space:normal;}
}


/* 17 Oct 2026 — Center process arrows in responsive/mobile layout */
@media(max-width:900px){
  .speedline-row .speed-arrow{
    justify-self:center!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* ===== Mobile portfolio: show thumbnails immediately, no colour overlay ===== */
@media (max-width:900px){
  /* Remove the coloured title/opacity layer on touch and narrow screens. */
  .work-grid .portfolio-hover-panel .portfolio-intro,
  .work-grid .branding-hover-panel > .branding-visual{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transition:none!important;
    pointer-events:none!important;
  }

  /* Show the actual thumbnails/logos immediately on page load. */
  .work-grid .portfolio-hover-panel .portfolio-hover-gallery,
  .work-grid .branding-hover-panel .branding-logo-grid{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:none!important;
  }

  .work-grid .branding-hover-panel .branding-logo-grid{
    display:grid!important;
  }

  /* No touch-only reveal button is needed when work is already visible. */
  .work-grid .portfolio-hover-toggle,
  .work-grid .branding-toggle{
    display:none!important;
  }

  /* Keep every portfolio panel stable across phones in portrait/landscape. */
  .work-grid .portfolio-hover-panel,
  .work-grid .branding-hover-panel{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
}

@media (max-width:480px){
  .work-grid .portfolio-hover-gallery,
  .work-grid .branding-logo-grid{
    padding:10px!important;
  }
}


/* ===== 19 Oct 2026 — definitive mobile portfolio: NO colour overlay, direct thumbnails ===== */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  /* Completely remove the coloured introduction layer on phones/touch devices. */
  #work .work-grid .portfolio-hover-panel > .portfolio-intro,
  #work .work-grid .branding-hover-panel > .branding-visual{
    display:none!important;
    position:absolute!important;
    inset:auto!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    background-color:transparent!important;
    opacity:0!important;
    visibility:hidden!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important;
    transition:none!important;
    z-index:-1!important;
  }

  /* Put the actual thumbnails in normal document flow and show them immediately. */
  #work .work-grid .portfolio-hover-panel > .portfolio-hover-gallery,
  #work .work-grid .branding-hover-panel > .branding-logo-grid{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:transparent!important;
    background-color:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transition:none!important;
    z-index:1!important;
    overflow:visible!important;
  }

  #work .work-grid .branding-hover-panel > .branding-logo-grid{
    display:grid!important;
  }

  #work .work-grid .portfolio-hover-panel,
  #work .work-grid .branding-hover-panel{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }

  /* Ensure no reveal controls or hover states reintroduce the colour layer. */
  #work .portfolio-hover-toggle,
  #work .branding-toggle{display:none!important;}

  #work .work-grid .portfolio-hover-panel.is-revealed > .portfolio-intro,
  #work .work-grid .branding-hover-panel.is-open > .branding-visual,
  #work .work-grid .branding-hover-panel:focus-visible > .branding-visual{
    display:none!important;
    opacity:0!important;
  }

  /* Keep cover images fully opaque on all mobile browsers. */
  #work .portfolio-hover-gallery img,
  #work .branding-logo-grid img{
    opacity:1!important;
    filter:none!important;
    mix-blend-mode:normal!important;
  }
}

@media (max-width:600px){
  #work .work-grid .portfolio-hover-gallery,
  #work .work-grid .branding-logo-grid{
    padding:8px!important;
  }
}


/* ===== 19 Oct 2026 — mobile work panels: thumbnails only, absolutely no colour/tint layer ===== */
body.mobile-direct-work #work .portfolio-intro,
body.mobile-direct-work #work .branding-hover-panel > .branding-visual{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  background:none!important;
  background-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:-999!important;
}
body.mobile-direct-work #work .portfolio-hover-panel,
body.mobile-direct-work #work .branding-hover-panel,
body.mobile-direct-work #work .portfolio-item{
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}
body.mobile-direct-work #work .portfolio-hover-gallery,
body.mobile-direct-work #work .branding-logo-grid{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:10!important;
  background:none!important;
  background-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  overflow:visible!important;
}
body.mobile-direct-work #work .branding-logo-grid{display:grid!important;}
body.mobile-direct-work #work .portfolio-hover-gallery .mosaic,
body.mobile-direct-work #work .branding-logo-grid,
body.mobile-direct-work #work .report-cover-link,
body.mobile-direct-work #work .branding-logo{
  background:none!important;
  background-color:transparent!important;
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}
body.mobile-direct-work #work .portfolio-hover-gallery img,
body.mobile-direct-work #work .branding-logo-grid img{
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
}
body.mobile-direct-work #work .portfolio-hover-toggle,
body.mobile-direct-work #work .branding-toggle{display:none!important;}


/* ===== 19 Oct 2026 v5 — hard mobile thumbnail mode ===== */
body.mobile-direct-work #work .portfolio-hover-panel::before,
body.mobile-direct-work #work .portfolio-hover-panel::after,
body.mobile-direct-work #work .branding-hover-panel::before,
body.mobile-direct-work #work .branding-hover-panel::after,
body.mobile-direct-work #work .portfolio-item::before,
body.mobile-direct-work #work .portfolio-item::after{content:none!important;display:none!important;background:none!important;}
body.mobile-direct-work #work .portfolio-hover-panel,
body.mobile-direct-work #work .branding-hover-panel{background:transparent!important;background-image:none!important;filter:none!important;mix-blend-mode:normal!important;}
body.mobile-direct-work #work .portfolio-hover-gallery,
body.mobile-direct-work #work .branding-logo-grid{background:transparent!important;background-image:none!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;}
body.mobile-direct-work #work .portfolio-hover-gallery img,
body.mobile-direct-work #work .branding-logo-grid img{opacity:1!important;filter:none!important;-webkit-filter:none!important;mix-blend-mode:normal!important;}

/* 19 Oct 2026 — second hero collage: keep artwork's own orange outline, remove only container outline */
#about .about-art{
  border:0!important;
}


/* 19 Oct 2026 FINAL — force revised second hero collage on all mobile devices */
#about .about-art picture{display:block;width:100%;height:100%;}
#about .about-art picture img{display:block;width:100%;height:100%;object-fit:cover;}
@media (max-width:900px), (hover:none), (pointer:coarse){
  #about .about-art{
    width:min(100%,450px)!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  #about .about-art picture{width:100%!important;height:100%!important;}
  #about .about-art picture img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* 19 Oct 2026 — Fine-tune first process arrow horizontal position */
@media(min-width:901px){
  .speedline-row .speed-arrow:first-of-type{
    position:relative;
    left:-14px;
  }
}


/* 19 Oct 2026 — restore mobile thumbnail background boxes without restoring tint */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  #work .work-grid .portfolio-hover-panel,
  #work .work-grid .branding-hover-panel{
    background:#dfe4e9!important;
    background-image:none!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  #work .work-grid .portfolio-hover-panel > .portfolio-hover-gallery,
  #work .work-grid .branding-hover-panel > .branding-logo-grid{
    background:#dfe4e9!important;
    background-color:#dfe4e9!important;
    background-image:none!important;
    border-radius:10px!important;
    padding:16px!important;
  }
  #work .portfolio-hover-gallery img,
  #work .branding-logo-grid img{
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    mix-blend-mode:normal!important;
  }
}
@media (max-width:600px){
  #work .work-grid .portfolio-hover-panel > .portfolio-hover-gallery,
  #work .work-grid .branding-hover-panel > .branding-logo-grid{padding:12px!important;}
}

body.mobile-direct-work #work .portfolio-hover-panel,
body.mobile-direct-work #work .branding-hover-panel,
body.mobile-direct-work #work .portfolio-hover-gallery,
body.mobile-direct-work #work .branding-logo-grid{
  background:#dfe4e9!important;
  background-color:#dfe4e9!important;
  background-image:none!important;
}


/* 19 Oct 2026 — HARD FIX: restore mobile thumbnail background boxes */
@media (max-width:1200px), (hover:none), (pointer:coarse){
  html.mobile-no-overlay #work .portfolio-hover-panel,
  html.mobile-no-overlay #work .branding-hover-panel,
  body.mobile-direct-work #work .portfolio-hover-panel,
  body.mobile-direct-work #work .branding-hover-panel{
    background:#dfe4e9!important;
    background-color:#dfe4e9!important;
    background-image:none!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  html.mobile-no-overlay #work .portfolio-hover-gallery,
  html.mobile-no-overlay #work .branding-logo-grid,
  body.mobile-direct-work #work .portfolio-hover-gallery,
  body.mobile-direct-work #work .branding-logo-grid{
    background:#dfe4e9!important;
    background-color:#dfe4e9!important;
    background-image:none!important;
    border-radius:10px!important;
    padding:16px!important;
  }
}
@media(max-width:600px){
  html.mobile-no-overlay #work .portfolio-hover-gallery,
  html.mobile-no-overlay #work .branding-logo-grid,
  body.mobile-direct-work #work .portfolio-hover-gallery,
  body.mobile-direct-work #work .branding-logo-grid{padding:12px!important;}
}

/* 21 Oct 2026: About Us mini-card hover treatment */
#about .mini p{
  transition:color .2s ease,font-weight .2s ease;
}
#about .mini:hover p{
  color:var(--orange);
  font-weight:700;
}


/* Apply Branding-style desktop hover reveal to the other 7 portfolio sections.
   Hovering anywhere within each portfolio item reveals its work gallery,
   matching the Branding section behaviour. Mobile/touch behaviour is unchanged. */
@media (hover:hover) and (pointer:fine) {
  #work .portfolio-item:not([data-category="branding"]):hover .portfolio-hover-gallery {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #work .portfolio-item:not([data-category="branding"]):hover .portfolio-intro {
    opacity:0 !important;
  }

  #work .portfolio-item:not([data-category="branding"]) .portfolio-hover-gallery,
  #work .portfolio-item:not([data-category="branding"]) .portfolio-intro {
    transition:opacity .22s ease, visibility .22s ease !important;
  }
}

/* 22 Oct 2026: lock the three Services cards to the 19 Oct reference layout. */
#services .service-cards{align-items:stretch!important}
#services .service-cards>.service-card{height:100%!important;align-self:stretch!important;min-height:0}
#services .service-info{display:grid!important;grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;padding:24px;flex:1}
#services .service-num{grid-area:1/1}
#services .service-info h3{grid-area:2/1}
#services .service-info .service-tag,#services .service-info .service-more{grid-area:3/1;align-self:start}
#services .service-info .service-tag{opacity:1!important;visibility:visible!important;margin:8px 0 0!important}
#services .service-info .service-more{display:block!important;opacity:0!important;visibility:hidden!important;margin:8px 0 0!important;padding:0!important;border:0!important;pointer-events:none}
#services .service-info .service-more>p{overflow:visible!important;margin:0!important}
#services .service-card.is-expanded .service-tag{opacity:0!important;visibility:hidden!important}
#services .service-card.is-expanded .service-more{opacity:1!important;visibility:visible!important;pointer-events:auto}
#services .service-explore,#services .service-card.is-expanded .service-explore{grid-area:4/1;order:initial!important;align-self:end!important;margin-top:16px!important;padding-top:0!important}

/* Healthcare clients: supplied logos replace text names. */
#clients .healthcare-logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:15px 0 0}
#clients .healthcare-logo-grid li{display:flex;align-items:center;justify-content:center;background:#fff;padding:0;min-width:0;height:75px;border:0;margin:0}
#clients .healthcare-logo-grid li::before{content:none}
#clients .healthcare-logo-grid img{display:block;width:calc(75% - 15px);height:60px;object-fit:contain}

/* Enlarge only the IPE artwork; retain the existing logo tile dimensions. */
#clients .education-logo-grid img[data-logo-file="assets/education-logos/ipe.png"]{transform:scale(1.2)}

/* PDF thumbnails remain clickable while their gallery is revealed. */
#work .portfolio-hover-gallery .report-cover-link{pointer-events:auto!important;cursor:pointer;position:relative;z-index:2}
#work .portfolio-hover-gallery .report-cover-link img{cursor:pointer}
#work .portfolio-item.pdf-gallery-open .portfolio-hover-gallery{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
#work .portfolio-item.pdf-gallery-open .portfolio-intro{opacity:0!important;pointer-events:none!important}
#work .internal-communication-mosaic .report-cover-link{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:100%}
#work .internal-communication-mosaic .report-cover-link img{width:100%;height:100%;object-fit:contain}

/* Ensure the transparent title overlay never intercepts PDF thumbnail clicks. */
#work .portfolio-hover-panel > .portfolio-intro,
#work .portfolio-hover-panel > .portfolio-intro *{pointer-events:none!important}
#work .portfolio-hover-panel:hover > .portfolio-hover-gallery,
#work .portfolio-hover-panel:focus-within > .portfolio-hover-gallery,
#work .portfolio-item.pdf-gallery-open .portfolio-hover-gallery{
 z-index:5!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
#work .portfolio-hover-panel:hover > .portfolio-intro,
#work .portfolio-hover-panel:focus-within > .portfolio-intro{opacity:0!important}
#work .portfolio-hover-gallery a.report-cover-link{z-index:6!important;pointer-events:auto!important}
#work .portfolio-hover-gallery a.report-cover-link img{pointer-events:auto!important}