/* AMA TONG — interactive layer (Oct 2026). Loads after styles.css, supplementary.css, watermark.css. */
:root{--focus:0 0 0 3px rgba(255,208,96,.9)}
:focus-visible{outline:none;box-shadow:var(--focus)}
[hidden]{display:none!important}
.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero>*{min-width:0}
h1,h2{overflow-wrap:break-word}
html{scroll-padding-top:110px}

/* Scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}

/* Top contact bar */
.topbar{background:#0b3033;color:rgba(255,255,255,.85);font-size:13px}
.topbar-in{max-width:var(--max);margin:auto;padding:8px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar-links{display:flex;gap:22px;flex-wrap:wrap}
.topbar a{text-decoration:none;color:#fff}
.topbar a:hover{color:var(--gold)}

/* Header + nav */
.site-header{transition:box-shadow .25s,height .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(11,48,51,.10)}
nav{gap:22px;align-items:center}
nav a{position:relative;padding:6px 0}
nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--teal);transform:scaleX(0);transition:transform .25s}
nav a.active:not(.nav-cta)::after,nav a:not(.nav-cta):hover::after{transform:scaleX(1)}
nav a.active{color:var(--teal-strong)}
.nav-cta{background:var(--ink);color:#fff!important;padding:10px 16px!important}
.nav-cta:hover{background:var(--teal-strong)}

/* Buttons */
.button{display:inline-block;transition:transform .2s,background .2s,color .2s;cursor:pointer;font-family:inherit;border:0}
.secondary{background:transparent}
.button.gold{background:var(--gold);color:var(--ink)}
.button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.button.ghost:hover{border-color:#fff}

/* Hero call strip */
.hero-call{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:28px;font-size:15px}
.hero-call span{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;color:var(--teal-strong)}
.hero-call a{font:600 22px 'Barlow Condensed';text-decoration:none;border-bottom:2px solid var(--gold)}
.hero-call a:hover{color:var(--teal-strong)}
.hero-art .orbit-a{animation:spin 60s linear infinite}
.hero-art .orbit-b{animation:spin 38s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* Facts strip */
.facts{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:22px 24px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font:600 28px/1.1 'Barlow Condensed';color:var(--ink)}
.facts span{font-size:14px;color:var(--teal-strong)}

/* Generic tabs */
.tablist{display:flex;flex-wrap:wrap;gap:8px}
.tablist [role=tab]{font:600 15px Barlow,Arial,sans-serif;cursor:pointer;border:1px solid var(--line);background:transparent;color:inherit;padding:10px 16px;min-height:44px;transition:background .2s,color .2s,border-color .2s}
.tablist [role=tab]:hover{border-color:var(--teal)}
.tablist [role=tab][aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
[role=tabpanel]{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Statements tabs */
.statements.tabbed{display:block;margin-top:70px;border:0}
.statements.tabbed article{padding:34px 0 10px;border:0;max-width:820px}
.statements.tabbed h3{font-size:clamp(30px,3.4vw,44px);margin:0 0 14px}
.statements.tabbed p{font-size:18px}

/* Offer accordion */
.accordion article{display:block;padding:0}
.accordion h3{margin:0;font:inherit}
.accordion h3 button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:70px 1fr auto 30px;gap:20px;align-items:center;padding:28px 0}
.accordion h3 button:focus-visible{box-shadow:var(--focus)}
.accordion h3 button b{color:var(--gold);font-size:12px;letter-spacing:.14em}
.accordion .t{font:600 33px/1.1 'Barlow Condensed'}
.accordion .pill{font-size:11px;text-transform:uppercase;letter-spacing:.12em;border:1px solid rgba(255,255,255,.35);padding:5px 10px;color:rgba(255,255,255,.8);white-space:nowrap}
.accordion i{position:relative;width:22px;height:22px}
.accordion i::before,.accordion i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--gold);transition:transform .3s}
.accordion i::after{transform:rotate(90deg)}
.accordion button[aria-expanded=true] i::after{transform:rotate(0)}
.accordion h3 button:hover .t{color:var(--gold)}
.acc-body{padding:0 50px 30px 90px;animation:fade .35s ease}
.acc-body p{margin:0;max-width:760px;color:rgba(255,255,255,.78)}
.acc-link{display:inline-block;margin-top:16px;color:var(--gold);font-weight:600;text-decoration:none;font-size:14px}
.acc-link:hover{text-decoration:underline}

/* Surgical line */
.surgical{background:var(--paper)}
.status-banner{display:flex;gap:14px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);padding:16px 20px;margin-bottom:32px}
.status-banner p{margin:0;font-size:15px}
.status-banner .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--gold);margin-top:6px;box-shadow:0 0 0 0 rgba(255,208,96,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,208,96,0)}100%{box-shadow:0 0 0 0 rgba(255,208,96,0)}}
.cat-panel{margin-top:22px;background:var(--cream);border-top:5px solid var(--teal);padding:30px}
.cat-panel ul{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat-panel li{background:var(--paper);border:1px solid var(--line);padding:14px 16px;font-weight:500;display:flex;gap:10px;align-items:center}
.cat-panel li::before{content:"";flex:none;width:8px;height:8px;background:var(--teal);border-radius:50%}
.fine{font-size:14px;color:var(--teal-strong);max-width:860px;margin:24px 0 0}

/* Who we serve: four cards */
.audience-grid.four{grid-template-columns:repeat(4,1fr)}
.audience-grid article{transition:background .25s,transform .25s}
.audience-grid article:hover{background:var(--paper)}

/* Stepper */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps [role=tab]{text-align:left;border-color:rgba(255,255,255,.22);color:#fff;padding:18px;display:flex;gap:12px;align-items:center;margin-left:-1px}
.steps [role=tab] b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font-size:14px}
.steps [role=tab][aria-selected=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.steps [role=tab][aria-selected=true] b{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.steps [role=tab]:hover{border-color:var(--gold)}
.step-panel{border:1px solid rgba(255,255,255,.22);border-top:0;padding:34px}
.step-panel h3{font:600 34px 'Barlow Condensed';margin:0 0 10px;color:var(--gold)}
.step-panel p{margin:0;max-width:760px;color:rgba(255,255,255,.8)}

/* Progress milestones */
.meter{height:10px;background:var(--line);margin-bottom:34px;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-strong),var(--teal));transition:width 1.4s ease}
.meter.go span{width:var(--p)}
.milestones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:m}
.milestones li{counter-increment:m;background:var(--paper);border:1px solid var(--line);padding:22px 20px 24px;position:relative}
.milestones li::before{content:counter(m);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);font-weight:600;margin-bottom:18px;color:var(--teal-strong)}
.milestones li.done::before{content:"✓";background:var(--teal-strong);border-color:var(--teal-strong);color:#fff}
.milestones li.now{border-color:var(--gold);box-shadow:inset 0 4px 0 var(--gold)}
.milestones li.now::before{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.milestones b{display:block;font:600 24px/1.1 'Barlow Condensed';margin-bottom:6px}
.milestones span{font-size:14px;color:var(--teal-strong)}

/* Phases */
.phase-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.phase-tabs [role=tab]{text-align:left;padding:18px;border-top:5px solid var(--teal);background:var(--cream);font:600 28px/1 'Barlow Condensed';display:flex;flex-direction:column;gap:8px;position:relative}
.phase-tabs [role=tab] span{font:600 12px Barlow,Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--teal-strong)}
.phase-tabs [role=tab] em{font:600 11px Barlow,Arial,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.1em;background:var(--gold);color:var(--ink);padding:3px 8px;align-self:flex-start}
.phase-tabs [role=tab][aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--gold)}
.phase-tabs [role=tab][aria-selected=true] span{color:var(--gold)}
.phase-panel{background:var(--cream);margin-top:10px;padding:30px;display:grid;grid-template-columns:200px 1fr auto;gap:30px;align-items:start}
.phase-panel h3{font:600 40px/1 'Barlow Condensed';margin:0}
.phase-panel p{margin:0;max-width:720px}
.phase-panel small{font-weight:600;color:var(--teal-strong);border-left:3px solid var(--gold);padding-left:12px}

/* FAQ */
.faq{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}
.faq-grid h2{font-size:clamp(45px,5vw,72px);margin:0}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:600 24px/1.2 'Barlow Condensed';position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:28px;color:var(--teal);transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--teal-strong)}
.faq-list details p{margin:0 0 22px;max-width:680px}

/* Contact */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:10px auto 0;text-align:left}
.ccard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:22px;display:flex;flex-direction:column;gap:8px;transition:background .2s}
.ccard:hover{background:rgba(255,255,255,.14)}
.ccard span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:600}
.ccard a{font:600 clamp(22px,2.4vw,30px)/1.1 'Barlow Condensed';text-decoration:none;color:#fff;overflow-wrap:anywhere}
.ccard a:hover{color:var(--gold)}
.copy{align-self:flex-start;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;font:500 13px Barlow,Arial,sans-serif;padding:8px 12px;cursor:pointer;min-height:36px}
.copy:hover{border-color:var(--gold);color:var(--gold)}
.copy.ok{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.enquiry{max-width:1000px;margin:40px auto 0;text-align:left;background:#0b3033;padding:32px}
.enquiry h3{font:600 32px 'Barlow Condensed';margin:0 0 4px}
.form-note{font-size:13px;color:rgba(255,255,255,.75);margin:0 0 22px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;letter-spacing:.02em}
.fgrid .full{grid-column:1/-1}
.fgrid input,.fgrid select,.fgrid textarea{font:400 16px Barlow,Arial,sans-serif;padding:12px 14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.96);color:var(--ink);border-radius:0;min-height:46px}
.fgrid textarea{resize:vertical}
.fgrid .invalid{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.factions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.form-status{min-height:1.4em;margin:14px 0 0;font-size:14px;color:var(--gold)}
.contact .enquiry.flash{animation:flash 1s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(255,208,96,.9)}100%{box-shadow:0 0 0 14px rgba(255,208,96,0)}}

/* Footer */
.site-footer{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.fcontact{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.fcontact a{color:#fff;text-decoration:none;font-size:14px}
.fcontact a:hover{color:var(--gold)}
.site-footer p{text-align:right!important;line-height:1.6}

/* Floating buttons */
.to-top,.call-fab{position:fixed;z-index:30;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s}
.to-top.show,.call-fab.show{opacity:1;pointer-events:auto;transform:none}
.to-top{right:20px;bottom:20px;width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:20px}
.to-top:hover{background:var(--teal-strong)}
.call-fab{display:none}

/* Responsive */
@media(max-width:1180px){nav{gap:16px}nav a{font-size:13px}}
@media(max-width:1050px){.phase-tabs{grid-template-columns:repeat(3,1fr)}.milestones{grid-template-columns:repeat(3,1fr)}.cat-panel ul{grid-template-columns:1fr 1fr}.phase-panel{grid-template-columns:1fr;gap:14px}}
@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .topbar-in>span:first-child{display:none}
  nav{gap:0;max-height:calc(100vh - 76px);overflow:auto}
  nav a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--line)}
  nav a::after{display:none}
  .nav-cta{margin-top:12px;text-align:center;border:0}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(2){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .audience-grid.four{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps [role=tab]{margin:-1px 0 0 -1px}
  .faq-grid{grid-template-columns:1fr;gap:30px}
  .contact-cards{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr;text-align:center}
  .site-footer p{text-align:center!important}
  .footer-brand{justify-self:center}
  .accordion h3 button{grid-template-columns:44px 1fr 24px}
  .accordion .pill{display:none}
  .acc-body{padding:0 0 26px 64px}
  .call-fab{display:flex;align-items:center;gap:8px;left:16px;bottom:20px;background:var(--gold);color:var(--ink);padding:12px 18px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.18)}
}
@media(max-width:560px){
  h1{font-size:clamp(40px,12.5vw,56px)}
  .topbar-links{gap:14px}
  .topbar-links a.lang{display:inline}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--line)}
  .audience-grid.four,.steps,.phase-tabs,.milestones,.cat-panel ul,.fgrid{grid-template-columns:1fr}
  .accordion .t{font-size:26px}
  .acc-body{padding-left:0}
  .cat-panel,.step-panel,.enquiry,.phase-panel{padding:22px}
  .tablist [role=tab]{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.topbar,.scroll-progress,.to-top,.call-fab,.enquiry{display:none!important}[role=tabpanel][hidden],.acc-body[hidden]{display:block!important}}

/* Footer page links */
.site-footer{grid-template-columns:auto 1fr auto;grid-template-areas:"brand links meta" "brand contact meta"}
.footer-brand{grid-area:brand}.flinks{grid-area:links}.fcontact{grid-area:contact}.site-footer>p{grid-area:meta}
.flinks{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;position:static;background:none;padding:0;border:0}
.flinks a{color:rgba(255,255,255,.8);text-decoration:none;font-size:13px;font-weight:500;padding:0}
.flinks a::after{display:none}
.flinks a:hover{color:var(--gold)}
@media(max-width:900px){.site-footer{grid-template-areas:"brand" "links" "contact" "meta"}.flinks{display:flex!important;flex-direction:row}}

/* Landing pages */
.crumbs{max-width:var(--max);margin:0 auto;padding:18px 24px 0;font-size:13px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--teal)}
.crumbs a{color:var(--teal-strong)}
.page-hero{max-width:var(--max);margin:auto;padding:60px 24px 70px}
.page-hero h1{font-size:clamp(46px,6.2vw,92px);margin:18px 0 24px}
.page-hero .lead{max-width:760px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card-x{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--teal);padding:26px}
.card-x h3{font:600 28px/1.1 'Barlow Condensed';margin:0 0 12px}
.card-x ul{margin:0;padding-left:18px;font-size:15px}
.card-x p{font-size:15px;margin:0 0 10px}
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checks li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);padding:18px 18px 18px 52px;position:relative}
.checks li::before{content:"✓";position:absolute;left:18px;top:16px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:13px;font-weight:700}
.checks b{display:block;font:600 22px 'Barlow Condensed';color:#fff}
.checks span{font-size:14px;color:rgba(255,255,255,.78)}
.cta-band{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.checks{grid-template-columns:1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.page-hero{padding:40px 16px 50px}.crumbs{padding:14px 16px 0}}
.fgrid label{min-width:0}.fgrid input,.fgrid select,.fgrid textarea{width:100%;min-width:0;box-sizing:border-box}
.button.secondary{border:1px solid var(--ink)}.dark .button.secondary,.contact .button.secondary{border-color:#fff;color:#fff}

/* Oct 2026 portfolio refresh */
.goals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:g}
.goals li{counter-increment:g;background:var(--paper);border:1px solid var(--line);padding:22px}
.goals li::before{content:counter(g);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:600;margin-bottom:14px}
.goals b{display:block;font:600 24px/1.1 'Barlow Condensed';margin-bottom:6px}
.goals span{font-size:15px}
.acc-items{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;max-width:820px}
.acc-items li{color:rgba(255,255,255,.82);padding-left:18px;position:relative}
.acc-items li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.acc-link+.acc-link{margin-left:18px}
.staged-note{margin:30px 0 0;max-width:860px;font-size:14px;color:rgba(255,255,255,.75)}
.staged-note strong{color:var(--gold)}
.audience-grid.five{grid-template-columns:repeat(5,1fr)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-grid article{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--gold);padding:26px}
.why-grid h3{font:600 28px/1.1 'Barlow Condensed';margin:0 0 12px}
.why-grid p{font-size:15px;margin:0}
.sub-h{font:600 32px 'Barlow Condensed';margin:56px 0 18px}
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.partner-grid a{background:var(--cream);padding:24px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:background .2s}
.partner-grid a:hover{background:var(--paper)}
.partner-grid b{font:600 23px/1.1 'Barlow Condensed';color:var(--ink)}
.partner-grid b::after{content:" →";color:var(--teal)}
.partner-grid span{font-size:14px;color:var(--teal-strong)}
.milestones.six{grid-template-columns:repeat(6,1fr)}
.address{margin:22px auto 0;font-size:15px;color:rgba(255,255,255,.9)}
.topbar .lang{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;border:1px solid rgba(255,255,255,.4);padding:0 8px}
.site-footer p a{color:var(--gold);text-decoration:none}
@media(max-width:1180px){.milestones.six{grid-template-columns:repeat(3,1fr)}.audience-grid.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.goals,.why-grid,.partner-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.audience-grid.five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.goals,.why-grid,.partner-grid,.acc-items,.audience-grid.five,.milestones.six{grid-template-columns:1fr}.acc-link+.acc-link{margin-left:0;display:block;margin-top:8px}}
@media(max-width:560px){.topbar-links a:nth-child(3){display:none}}

/* ===== WhatsApp + shared (23 Oct 2026) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:31;display:flex;align-items:center;gap:8px;background:#1f7a4d;color:#fff;text-decoration:none;font-weight:600;padding:12px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.2);min-height:48px}
.wa-fab:hover{background:#17633e}
.to-top{bottom:84px}
.contact-cards.four{grid-template-columns:repeat(4,1fr);max-width:1180px}
.ccard.wa{background:rgba(31,122,77,.35);border-color:rgba(255,255,255,.4)}
.button.wa-btn{border-color:#1f7a4d;color:#1f7a4d}
.button.wa-btn:hover{background:#1f7a4d;color:#fff}
.topbar .wa-link{color:var(--gold)}
@media(max-width:1180px){.contact-cards.four{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.wa-fab span{display:inline}.call-fab{left:16px;right:auto}}
@media(max-width:560px){.contact-cards.four{grid-template-columns:1fr}.topbar .wa-link{display:none}.wa-fab{right:16px;bottom:20px;padding:12px 16px}.to-top{display:none}}

/* ===== Company profile ===== */
.pf-cover{max-width:var(--max);margin:auto;padding:70px 24px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:end}
.pf-cover h1{font-size:clamp(52px,6.4vw,96px);margin:18px 0 26px;text-transform:uppercase}
.pf-facts{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.pf-facts div{background:var(--paper);padding:18px 20px}
.pf-facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--teal-strong)}
.pf-facts dd{margin:4px 0 0;font:600 21px/1.2 'Barlow Condensed'}
.pf-toc{position:sticky;top:92px;z-index:15;background:rgba(242,240,232,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:10px max(24px,calc((100vw - var(--max))/2));scrollbar-width:thin}
.pf-toc a{white-space:nowrap;text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border:1px solid transparent}
.pf-toc a:hover,.pf-toc a.active{border-color:var(--teal);color:var(--teal-strong)}
.pf-sec{padding-top:90px;padding-bottom:90px}
.pf-tint{background:var(--paper)}
.pf-vm{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.pf-vm article{background:var(--ink);color:#fff;padding:30px}
.pf-vm span{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.pf-vm p{font:500 24px/1.3 'Barlow Condensed';margin:12px 0 0}
.pf-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pf-groups article{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--teal);padding:24px}
.pf-groups article b{color:var(--teal-strong);font-size:12px;letter-spacing:.14em}
.pf-groups h3{font:600 26px/1.1 'Barlow Condensed';margin:10px 0 10px}
.pf-groups p{font-size:15px;margin:0}
.pf-groups .pf-out{border-top-color:var(--gold);background:var(--cream)}
.pf-steps,.pf-gates,.pf-phases{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.pf-steps{grid-template-columns:repeat(4,1fr)}
.pf-steps li{counter-increment:s;border:1px solid rgba(255,255,255,.25);padding:24px}
.pf-steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:700;margin-bottom:14px}
.pf-steps b{display:block;font:600 24px 'Barlow Condensed';color:var(--gold);margin-bottom:6px}
.pf-steps span{color:rgba(255,255,255,.82);font-size:15px}
.pf-two{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}
.pf-table{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper);border:1px solid var(--line)}
.pf-table caption{text-align:left;font:600 22px 'Barlow Condensed';padding:0 0 10px}
.pf-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-strong);padding:12px 14px;border-bottom:2px solid var(--ink)}
.pf-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.pf-table .ok,.pf-table .now{display:inline-block;font-size:13px;font-weight:600;padding:3px 10px;white-space:nowrap}
.pf-table .ok{background:rgba(31,115,118,.12);color:var(--teal-strong)}
.pf-table .now{background:var(--gold);color:var(--ink)}
.checks.light li{background:var(--paper);border-color:var(--line)}
.checks.light b{color:var(--ink)}
.checks.light span{color:var(--teal-strong)}
.pf-principles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pf-principles article{border-top:3px solid var(--ink);padding:18px 4px 0}
.pf-principles b{color:var(--teal-strong);font-size:12px;letter-spacing:.14em}
.pf-principles h3{font:600 24px/1.1 'Barlow Condensed';margin:10px 0}
.pf-principles p{font-size:15px;margin:0}
.pf-phases{grid-template-columns:repeat(5,1fr)}
.pf-phases li{counter-increment:s;background:var(--cream);border-top:5px solid var(--teal);padding:22px}
.pf-phases li::before{content:"Phase " counter(s);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--teal-strong);font-weight:600;margin-bottom:8px}
.pf-phases li.now{background:var(--ink);color:#fff;border-color:var(--gold)}
.pf-phases li.now::before{color:var(--gold)}
.pf-phases b{display:block;font:600 28px 'Barlow Condensed';margin-bottom:6px}
.pf-phases span{font-size:15px}
.pf-phases em{display:inline-block;margin-top:8px;font-style:normal;font-weight:600;background:var(--gold);color:var(--ink);padding:2px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:1050px){.pf-cover{grid-template-columns:1fr}.pf-groups{grid-template-columns:1fr 1fr}.pf-steps{grid-template-columns:1fr 1fr}.pf-two{grid-template-columns:1fr}.pf-principles{grid-template-columns:1fr 1fr}.pf-phases{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.pf-toc{top:76px}}
@media(max-width:560px){.pf-cover{padding:40px 16px 30px}.pf-cover h1{font-size:clamp(40px,12.5vw,56px)}.pf-vm,.pf-groups,.pf-steps,.pf-principles,.pf-phases{grid-template-columns:1fr}.pf-sec{padding-top:64px;padding-bottom:64px}.pf-table{font-size:14px}.pf-table td,.pf-table th{padding:10px 8px}}

/* ===== Portfolio ===== */
.pf-hero{padding-bottom:30px}
.mini-steps{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.mini-steps li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.mini-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--gold);font-size:13px}
.pf-tools{position:sticky;top:92px;z-index:15;background:rgba(242,240,232,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-tools-in{max-width:var(--max);margin:auto;padding:12px 24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pf-tools .search{flex:1 1 260px}
.pf-tools input[type=search]{width:100%;font:400 16px Barlow,Arial,sans-serif;padding:11px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);min-height:44px;border-radius:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:600 13px Barlow,Arial,sans-serif;padding:8px 12px;min-height:40px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:hover{border-color:var(--teal)}
.quote-pill{display:flex;align-items:center;gap:8px;background:var(--gold);color:var(--ink);font-weight:600;text-decoration:none;padding:10px 16px;min-height:44px}
.quote-pill b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--ink);color:#fff;font-size:13px;padding:0 6px}
.pf-result{max-width:var(--max);margin:0 auto;padding:0 24px 8px;font-size:13px;color:var(--teal-strong);min-height:0}
.pf-result:empty{display:none}
.pf-catalogue{max-width:var(--max);margin:auto;padding:30px 24px 60px}
.pg{padding:40px 0 10px;scroll-margin-top:180px}
.pg-head{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:start;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:6px}
.pg-head b{color:var(--teal-strong);font-size:13px;letter-spacing:.14em;padding-top:10px}
.pg-head h2{font-size:clamp(32px,3.6vw,48px);margin:0 0 6px}
.pg-head p{margin:0;color:var(--teal-strong)}
.pg-count{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:var(--paper);border:1px solid var(--line);padding:2px 8px;color:var(--ink)}
.pg-sub{margin-top:22px}
.pg-sub h3{font:600 20px 'Barlow Condensed';text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;color:var(--teal-strong)}
.pg-sub h3 small{font:600 12px Barlow,Arial,sans-serif;color:var(--ink);opacity:.6;margin-left:6px}
.pi-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pi{display:grid;grid-template-columns:1fr 280px;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.pi h4{font:600 22px/1.15 'Barlow Condensed';margin:0 0 4px}
.pi .spec{margin:0 0 6px;font-size:15px}
.pi .std{margin:0;font-size:13px;color:var(--teal-strong)}
.pi .std span{font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;margin-right:8px;color:var(--ink)}
.pi-side{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;justify-content:flex-end}
.pack,.tag{font-size:12px;font-weight:600;padding:4px 9px;border:1px solid var(--line);background:var(--paper)}
.tag{background:rgba(255,208,96,.35);border-color:rgba(255,208,96,.9)}
.add{flex-basis:100%;margin-top:4px;font:600 14px Barlow,Arial,sans-serif;padding:10px 14px;min-height:44px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.add:hover{background:var(--ink);color:#fff}
.add[aria-pressed=true]{background:var(--teal-strong);border-color:var(--teal-strong);color:#fff}
.pf-empty{padding:30px 0;font-size:18px}
.pf-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pf-scope article{background:var(--cream);border:1px solid var(--line);border-top:5px solid var(--gold);padding:24px}
.pf-scope h3{font:600 26px 'Barlow Condensed';margin:0 0 10px}
.pf-scope p{font-size:15px;margin:0}
.pf-gates{grid-template-columns:repeat(3,1fr)}
.pf-gates li{counter-increment:s;background:var(--paper);border:1px solid var(--line);padding:22px}
.pf-gates li::before{content:"0" counter(s);display:block;color:var(--teal-strong);font-size:12px;letter-spacing:.14em;font-weight:600;margin-bottom:10px}
.pf-gates b{display:block;font:600 26px 'Barlow Condensed';margin-bottom:4px}
.pf-gates span{font-size:15px}
.quote-sec{text-align:left}
.quote-sec>h2,.quote-sec>p,.quote-sec>.eyebrow{text-align:center}
.quote-sec>p{margin-left:auto;margin-right:auto}
.q-wrap{max-width:1180px;margin:30px auto 40px;display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start}
.q-list-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:24px}
.q-list-box h3{font:600 28px 'Barlow Condensed';margin:0 0 12px}
.q-list-box h3 span{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:15px;background:var(--gold);color:var(--ink);font-size:16px;margin-left:8px;padding:0 8px}
.q-list{list-style:none;margin:0 0 16px;padding:0}
.q-list li{display:grid;grid-template-columns:1fr 84px auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.q-list li.q-empty{display:block;color:rgba(255,255,255,.8);font-size:15px}
.q-name{font-weight:600;font-size:15px}
.q-name small{font-weight:400;color:rgba(255,255,255,.75)}
.q-qty input{width:100%;font:600 16px Barlow,Arial,sans-serif;padding:8px;border:0;min-height:40px;color:var(--ink)}
.q-rm{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;font:500 13px Barlow,Arial,sans-serif;padding:8px 10px;cursor:pointer;min-height:40px}
.q-rm:hover{border-color:var(--gold);color:var(--gold)}
.q-form{margin:0;max-width:none}
.q-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:30;display:flex;gap:18px;align-items:center;background:var(--ink);color:#fff;text-decoration:none;padding:14px 22px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:15px}
.q-bar b{color:var(--gold)}
.q-bar span:last-child{font-weight:600;color:var(--gold)}
@media(max-width:1050px){.q-wrap{grid-template-columns:1fr}.pf-scope,.pf-gates{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.pf-tools{top:76px}.pi{grid-template-columns:1fr;gap:10px}.pi-side{justify-content:flex-start}.q-bar{left:16px;right:16px;transform:none;bottom:84px;justify-content:space-between}}
@media(max-width:560px){.pf-tools-in{padding:10px 16px}.chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}.chip{white-space:nowrap}.quote-pill{width:100%;justify-content:center}.pf-catalogue{padding:20px 16px 40px}.pf-scope,.pf-gates{grid-template-columns:1fr}.pg-head{grid-template-columns:1fr}.pg-head b{padding-top:0}.q-list li{grid-template-columns:1fr 70px}.q-rm{grid-column:1/-1;justify-self:start}}

/* ===== Print / PDF (company profile) ===== */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  body{background:#fff;font-size:11pt}
  .topbar,.site-header,.pf-toc,.no-print,.wa-fab,.to-top,.call-fab,.scroll-progress,.skip-link,.flinks,.copy,.q-bar{display:none!important}
  .hero::after,.section::after,.page::after{display:none}
  .pf-cover{padding:0 0 16pt;grid-template-columns:1.3fr 1fr;gap:24pt}
  .pf-cover h1{font-size:44pt}
  .pf-sec,.section{padding:18pt 0!important;break-inside:auto}
  .section-label{margin-bottom:14pt}
  .intro-grid h2,.section-heading h2{font-size:26pt}
  .intro-grid,.section-heading{gap:20pt;margin-bottom:14pt}
  article,li,tr,.pf-vm article{break-inside:avoid}
  #work,#quality,#direction{break-before:page}
  .dark,.contact{background:#fff!important;color:var(--ink)!important}
  .pf-steps li{border-color:var(--line)}.pf-steps b{color:var(--ink)}.pf-steps span{color:var(--ink)}
  .contact h2{font-size:30pt}.contact .eyebrow{color:var(--teal-strong)}
  .ccard{background:#fff;border-color:var(--line)}.ccard a{color:var(--ink)}.ccard span{color:var(--teal-strong)}
  .address,.notice{color:var(--ink)!important}
  .site-footer{background:#fff;color:var(--ink);border-top:1px solid var(--line);padding:10pt 0}
  .site-footer p,.fcontact a{color:var(--ink)!important}
  .footer-brand img{filter:none}
  a{text-decoration:none}
}
/* refinements */
.pf-tools-in{flex-wrap:nowrap}
.pf-tools .search{flex:0 1 340px}
.chips{flex:1 1 auto}
@media(max-width:1180px){.pf-tools-in{flex-wrap:wrap}.pf-tools .search{flex:1 1 100%}}
@media(max-width:900px){.pf-tools{position:static}}
@media(max-width:560px){.wa-fab{width:56px;height:56px;padding:0;justify-content:center}.wa-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.wa-fab svg{width:26px;height:26px}}
.q-bar.away{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px)}.q-bar{transition:opacity .2s,transform .2s}@media(max-width:900px){.q-bar.away{transform:translateY(10px)}}
/* Compact A4 print layout (overrides responsive rules) */
@media print{
  body{font-size:9.5pt;line-height:1.45}
  .site-footer{display:none!important}
  .pf-cover{grid-template-columns:1.35fr 1fr!important;gap:18pt!important;padding:0 0 10pt!important;align-items:start}
  .pf-cover h1{font-size:34pt!important;margin:8pt 0 12pt!important}
  .pf-cover .lead{font-size:10.5pt}
  .pf-facts dd{font-size:12pt}.pf-facts div{padding:8pt 10pt}
  .pf-sec,.section{padding:12pt 0!important}
  .section-label{margin-bottom:8pt!important;font-size:8pt}
  .intro-grid,.section-heading{grid-template-columns:1fr 1fr!important;gap:16pt!important;margin-bottom:10pt!important}
  .intro-grid h2,.section-heading h2,.contact h2{font-size:20pt!important}
  .intro-grid p,.section-heading p{font-size:9.5pt}
  .pf-vm{grid-template-columns:1fr 1fr!important;gap:8pt;margin-bottom:8pt}
  .pf-vm article{padding:12pt}.pf-vm p{font-size:13pt}
  .goals{grid-template-columns:repeat(4,1fr)!important;gap:8pt}
  .goals li{padding:10pt}.goals li::before{width:20px;height:20px;margin-bottom:6pt;font-size:9pt}.goals b{font-size:13pt}.goals span{font-size:8.5pt}
  .pf-groups{grid-template-columns:repeat(3,1fr)!important;gap:8pt}
  .pf-groups article{padding:10pt}.pf-groups h3{font-size:13pt;margin:4pt 0}.pf-groups p{font-size:8.5pt}
  .audience-grid.five{grid-template-columns:repeat(5,1fr)!important}
  .audience-grid article{min-height:0!important;padding:10pt!important}
  .audience-grid h3{margin:6pt 0 4pt!important;font-size:12pt!important}.audience-grid p{font-size:8.5pt}
  .pf-steps{grid-template-columns:repeat(4,1fr)!important;gap:8pt}
  .pf-steps li{padding:10pt}.pf-steps li::before{width:20px;height:20px;margin-bottom:6pt}.pf-steps b{font-size:13pt}.pf-steps span{font-size:8.5pt}
  .pf-two{grid-template-columns:1.15fr 1fr!important;gap:14pt}
  .pf-table{font-size:8.5pt}.pf-table td,.pf-table th{padding:5pt 6pt}.pf-table caption{font-size:12pt}
  .checks{gap:5pt!important}.checks li{padding:6pt 8pt 6pt 30pt!important}.checks li::before{left:8px!important;top:7px!important;width:16px;height:16px;font-size:9px}
  .checks b{font-size:11pt}.checks span{font-size:8.5pt}
  .pf-principles{grid-template-columns:repeat(5,1fr)!important;gap:8pt}
  .pf-principles h3{font-size:12pt;margin:4pt 0}.pf-principles p{font-size:8.5pt}
  .pf-phases{grid-template-columns:repeat(5,1fr)!important;gap:6pt}
  .pf-phases li{padding:9pt}.pf-phases b{font-size:13pt}.pf-phases span{font-size:8.5pt}
  .leadership blockquote{font-size:15pt!important;margin:0 0 8pt!important}
  .contact-cards.four{grid-template-columns:repeat(4,1fr)!important;gap:6pt}
  .ccard{padding:8pt}.ccard a{font-size:11pt!important}
  .contact .eyebrow,.contact>p{font-size:9pt}
  #work,#direction{break-before:auto}
  #quality{break-before:page}
  .fine{font-size:8.5pt}
}
.print-only{display:none}
@media print{.print-only{display:block}.pf-logo{width:170px;height:auto;margin-bottom:10pt}#supply,#direction{break-before:page}}
@media print{.pf-cover h1{font-size:27pt!important;margin:4pt 0 8pt!important}.pf-cover .lead{font-size:9.5pt;margin-bottom:0}.pf-facts dd{font-size:10.5pt}.pf-facts div{padding:6pt 9pt}.pf-logo{width:140px;margin-bottom:6pt}#who,#direction-statements{padding:8pt 0!important}#who .intro-grid{margin-bottom:0!important}.pf-vm p{font-size:11.5pt}}
/* Keep the WhatsApp button clear of the host's corner badge */
.wa-fab{bottom:76px}.to-top{bottom:140px}
@media(max-width:900px){.q-bar{bottom:140px}}
@media(max-width:560px){.wa-fab{bottom:76px}}
/* Side breathing room for the hero on mid-width screens */
.hero{padding-left:24px;padding-right:24px;max-width:calc(var(--max) + 48px)}