*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-ink);background:var(--color-surface)}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:var(--lh-heading);color:var(--color-primary);font-weight:var(--fw-bold)}
h3{line-height:var(--lh-h3);font-weight:var(--fw-semibold)}
img{max-width:100%;display:block}
a{color:var(--color-royal);text-decoration:none}
a:hover{text-decoration:underline}
/* Visible keyboard focus everywhere (design-system §4.3: 2px Accent ring, never removed) */
a:focus-visible,.btn:focus-visible,.fbtn:focus-visible,.faq-q:focus-visible,.nav-toggle:focus-visible,.lang-pill a:focus-visible,.wa-float:focus-visible,.call-float:focus-visible:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-6)}
.section{padding-block:var(--section-pad-y)}
.section--alt{background:var(--color-surface-alt)}
.section--dark{background:var(--gradient-brand);color:var(--color-surface)}
.section--dark h2,.section--dark h3{color:var(--color-surface)}
.section--dark .lead{color:var(--color-surface);opacity:.92}
/* Gold discipline: gold is a large/bold accent on DARK surfaces and for stats/dividers.
   Small gold text on light backgrounds fails AA, so the eyebrow is royal on light
   sections and stays gold only on dark ones. */
.eyebrow{font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--color-royal);margin-bottom:var(--space-3)}
.section--dark .eyebrow,.hero .eyebrow{color:var(--color-gold)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:var(--fw-medium);max-width:62ch}
.sec-head{margin-bottom:var(--space-12);max-width:70ch}
.sec-head h2{font-size:var(--fs-h2);margin-bottom:var(--space-4)}
.sec-head .lead{color:var(--color-charcoal)}
.section--dark .sec-head .lead{color:var(--color-surface)}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-primary);box-shadow:var(--shadow-card)}
.header-in{display:flex;align-items:center;gap:var(--space-6);padding-block:var(--space-3)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-surface)}
.brand:hover{text-decoration:none}
.brand-logo{background:var(--color-surface);border-radius:var(--radius-button);padding:var(--space-1);line-height:0}
.brand-logo img{height:52px;width:auto}
.brand-name{font-family:var(--font-heading);font-weight:var(--fw-extrabold);font-size:var(--fs-brand);line-height:1.2;color:var(--color-surface)}
.brand-sub{font-size:var(--fs-micro);letter-spacing:.18em;color:var(--color-gold);font-family:var(--font-heading)}
.main-nav{margin-inline-start:auto}
.main-nav ul{display:flex;gap:var(--space-6);list-style:none}
.main-nav a{color:var(--color-surface);font-family:var(--font-heading);font-weight:var(--fw-medium);transition:color .2s ease}
.main-nav a:hover{color:var(--color-gold);text-decoration:none}
.main-nav a.active{color:var(--color-gold)}
.header-actions{display:flex;align-items:center;gap:var(--space-3)}
/* Header phone — ghost/gold pill consistent with .lang-pill; digits in Manrope via --font-numeric */
.lang-pill{display:inline-flex;border:1px solid var(--color-gold);border-radius:var(--radius-pill);overflow:hidden;font-family:var(--font-heading);font-size:var(--fs-caption)}
.lang-pill a{padding:var(--space-1) var(--space-3);color:var(--color-surface);transition:background .2s ease,color .2s ease}
.lang-pill a:hover{text-decoration:none}
.lang-pill a.on{background:var(--color-gold);color:var(--color-ink);font-weight:var(--fw-bold)}
.nav-toggle{display:none;background:none;border:1px solid var(--color-gold);border-radius:var(--radius-button);color:var(--color-surface);font-size:var(--fs-h4);padding:var(--space-1) var(--space-3);cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-heading);font-weight:var(--fw-semibold);border-radius:var(--radius-button);padding:var(--space-3) var(--space-6);border:2px solid transparent;cursor:pointer;font-size:var(--fs-body);transition:filter .2s ease,transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn:hover{text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)}
.btn--gold{background:var(--color-gold);color:var(--color-ink)}
.btn--accent{background:var(--color-accent);color:var(--color-surface)}
.btn--primary{background:var(--color-primary);color:var(--color-surface)}
.btn--outline{border-color:var(--color-surface);color:var(--color-surface);background:transparent}
.btn--outline-dark{border-color:var(--color-primary);color:var(--color-primary);background:transparent}
/* hero — overlay strengthened with token colours only: near-opaque ink at the
   text side, holding deep through the stats strip, easing off at the far edge */
.hero{position:relative;color:var(--color-surface);overflow:hidden;background:var(--color-primary)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0}
html[dir="rtl"] .hero-media::after{background:linear-gradient(to left,color-mix(in srgb,var(--color-ink) 96%,transparent) 38%,color-mix(in srgb,var(--color-primary) 72%,transparent) 68%,color-mix(in srgb,var(--color-primary) 32%,transparent))}
html[dir="ltr"] .hero-media::after{background:linear-gradient(to right,color-mix(in srgb,var(--color-ink) 96%,transparent) 38%,color-mix(in srgb,var(--color-primary) 72%,transparent) 68%,color-mix(in srgb,var(--color-primary) 32%,transparent))}
.hero-in{position:relative;padding-block:var(--space-32) var(--space-24);max-width:760px}
.hero-badge{display:inline-block;background:color-mix(in srgb,var(--color-gold) 18%,transparent);border:1px solid var(--color-gold);color:var(--color-gold);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-4);font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-caption);margin-bottom:var(--space-6)}
.hero h1{color:var(--color-surface);font-size:var(--fs-display);font-weight:var(--fw-extrabold);margin-bottom:var(--space-4)}
.hero .lead{color:var(--color-surface);opacity:.94;margin-bottom:var(--space-8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hero-stats{position:relative;border-top:1px solid color-mix(in srgb,var(--color-surface) 25%,transparent);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);padding-block:var(--space-6)}
.stat-num{font-family:var(--font-numeric);font-size:var(--fs-stat);font-weight:var(--fw-extrabold);color:var(--color-gold);line-height:var(--lh-stat);font-variant-numeric:tabular-nums}
.stat-lbl{color:var(--color-surface);font-size:var(--fs-caption);line-height:var(--lh-caption)}
/* owners strip */
.owners{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding-block:var(--space-6)}
.owners-in{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-10);align-items:center}
.owners-logo{height:54px;width:auto;max-width:210px;object-fit:contain}
.owners span{font-family:var(--font-heading);font-weight:var(--fw-semibold);color:var(--color-charcoal)}
.owners .owners-title{color:var(--color-royal)}
/* Owner chips: each client name on a card with its official logo washed
   behind the name at low opacity (logo reads as a watermark, name stays
   fully legible in ink on top) */
/* split / about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.split--stretch{align-items:stretch}
.values-media{display:flex;flex-direction:column}
.values-media img{flex:1;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.about-media{position:relative}
.about-media img{border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
/* Item 7 (owner): the offset gold pseudo-frame that used to sit behind this
   image (translated 16px outside the photo) was removed — image framing is
   flush only: the photo's own radius + soft shadow, here and site-wide. */
.check-list{list-style:none;margin-block:var(--space-6);display:grid;gap:var(--space-2)}
.check-list li{display:flex;gap:var(--space-2);align-items:flex-start}
.check-list li::before{content:"✓";color:var(--color-accent);font-weight:var(--fw-extrabold)}
/* cards */
.grid{display:grid;gap:var(--space-6)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
/* Card rhythm: badge -> title -> text/meta on a steady beat; meta pins to the
   bottom so cards in a row align (title size comes from --fs-h3, no inline styles) */
.card-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.card-body .badge{align-self:flex-start}
.card h3{font-size:var(--fs-h3)}
/* Numbered chips: royal on light cards (gold at 28px on white is ~2.7:1 — under the
   3:1 large-text floor); gold kept where the chip sits on a dark surface (.step) */
.num-chip{font-family:var(--font-numeric);font-weight:var(--fw-extrabold);font-size:var(--fs-num);color:var(--color-royal);font-variant-numeric:tabular-nums}
.more-link{margin-top:auto;font-family:var(--font-heading);font-weight:var(--fw-bold)}
/* process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.step{border:1px solid color-mix(in srgb,var(--color-surface) 30%,transparent);border-radius:var(--radius-card);padding:var(--space-6)}
.step .num-chip{font-size:var(--fs-num-lg);color:var(--color-gold)}
.step h3{color:var(--color-surface);margin-top:var(--space-2)}
/* values */
.value-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-6);transition:transform .25s ease,box-shadow .25s ease}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.value-card h3{font-size:var(--fs-h4);margin-bottom:var(--space-2);color:var(--color-royal)}
.value-ico{font-size:var(--fs-ico);color:var(--color-accent);font-family:var(--font-heading);font-weight:var(--fw-extrabold)}
/* projects */
.badge{display:inline-block;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-size:var(--fs-caption);line-height:var(--lh-caption);font-family:var(--font-heading);font-weight:var(--fw-bold)}
.badge--done{background:var(--color-success);color:var(--color-surface)}
.badge--going{background:var(--color-gold);color:var(--color-ink)}
.proj-meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-charcoal);display:grid;gap:var(--space-1);margin-top:auto;padding-top:var(--space-2)}
.proj-meta b{color:var(--color-ink);font-family:var(--font-heading)}
/* Filter re-show entrance (class added by main.js, removed on animationend) */
.proj-card.card-enter{animation:card-in .35s ease both}
@keyframes card-in{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8)}
.filters .fbtn{border:1.5px solid var(--color-royal);background:var(--color-surface);color:var(--color-royal);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-4);font-family:var(--font-heading);font-weight:var(--fw-semibold);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.filters .fbtn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filters .fbtn.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-surface)}
.filters .fsep{flex-basis:100%;height:0}
.note-line{margin-top:var(--space-6);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-charcoal)}
/* CTA band */
.cta-band{position:relative;color:var(--color-surface);overflow:hidden}
.cta-band img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--color-ink) 78%,transparent)}
.cta-in{position:relative;z-index:1;padding-block:var(--space-16);display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between}
.cta-in h2{color:var(--color-surface);font-size:var(--fs-h2)}
/* FAQ — no-JS fallback stays class-driven (display:block when open); with JS,
   main.js sets an inline max-height and the transition below animates it */
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-card);margin-bottom:var(--space-3);background:var(--color-surface)}
.faq-q{width:100%;text-align:start;background:none;border:0;padding:var(--space-4) var(--space-6);font-family:var(--font-heading);font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--color-primary);cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-4);transition:color .2s ease}
.faq-q:hover{color:var(--color-royal)}
.faq-a{display:none;padding:0 var(--space-6) var(--space-4);overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{display:block}
/* inner hero */
.page-hero{background:var(--color-surface-alt);padding-block:var(--space-16)}
.page-hero h1{font-size:var(--fs-h2);margin-bottom:var(--space-3)}
/* service rows */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center;padding-block:var(--space-12)}
.svc-row + .svc-row{border-top:1px solid var(--color-border)}
.svc-row img{border-radius:var(--radius-card);box-shadow:var(--shadow-card);aspect-ratio:4/3;object-fit:cover;width:100%}
.svc-row.flip .svc-media{order:2}
.scope-list{list-style:none;display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.scope-list li{display:flex;gap:var(--space-2)}
.scope-list li::before{content:"—";color:var(--color-accent);font-weight:var(--fw-extrabold)}
.illus-cap{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-charcoal);margin-top:var(--space-2)}
/* Caption placed directly under a card image aligns with the card body */
.card>.illus-cap{padding-inline:var(--space-6)}
/* Item 9 — services polish: numbered chips at confident (step) scale with a
   gold rule under the number; service imagery lifts its shadow on row hover */
.card-body .num-chip{font-size:var(--fs-num-lg);line-height:1;align-self:flex-start;border-bottom:3px solid var(--color-gold);padding-bottom:var(--space-1)}
.svc-row .num-chip{font-size:var(--fs-num-lg);line-height:1;display:inline-block;border-bottom:3px solid var(--color-gold);padding-bottom:var(--space-1)}
.svc-row img{transition:box-shadow .25s ease}
.svc-row:hover img{box-shadow:var(--shadow-card-hover)}
/* mission/vision + legal */
.mv-card{border-radius:var(--radius-card);padding:var(--space-8);border:1px solid var(--color-border);background:var(--color-surface)}
.mv-card--gold{border-top:6px solid var(--color-gold)}
.mv-card--dark{background:var(--color-primary);color:var(--color-surface)}
.mv-card--dark h3{color:var(--color-surface)}
.legal-card{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-8)}
.org-list{list-style:none;display:grid;gap:var(--space-3)}
.org-list li{background:var(--color-surface);border:1px solid var(--color-border);border-inline-start:5px solid var(--color-gold);border-radius:var(--radius-button);padding:var(--space-4) var(--space-6);font-family:var(--font-heading);font-weight:var(--fw-semibold)}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-12);align-items:start}
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-family:var(--font-heading);font-weight:var(--fw-semibold);margin-bottom:var(--space-2)}
.field input,.field textarea{width:100%;border:1.5px solid var(--color-border);border-radius:var(--radius-input);padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--fs-body);background:var(--color-surface);color:var(--color-ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--color-accent);border-color:var(--color-accent)}
.info-card{background:var(--color-primary);color:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-8);display:grid;gap:var(--space-4)}
.info-card h3{color:var(--color-surface)}
.info-card a{color:var(--color-gold);font-weight:var(--fw-bold)}
.info-card a.btn{color:var(--color-ink)}
.info-card .btn{display:flex;width:100%;justify-content:center}
.info-row{border-top:1px solid color-mix(in srgb,var(--color-surface) 22%,transparent);padding-top:var(--space-3)}
.info-row .k{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-gold);font-family:var(--font-heading);font-weight:var(--fw-bold)}
.big-phone{font-size:var(--fs-h3);font-family:var(--font-numeric);font-weight:var(--fw-extrabold);font-variant-numeric:tabular-nums}
/* footer */
.site-footer{background:var(--color-ink);color:var(--color-surface);padding-block:var(--space-16) var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:var(--space-8)}
.site-footer h4{color:var(--color-gold);margin-bottom:var(--space-4);font-size:var(--fs-h4)}
.site-footer a{color:var(--color-surface)}
.footer-links{list-style:none;display:grid;gap:var(--space-2)}
.footer-brand{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}
.footer-legal{font-size:var(--fs-caption);line-height:var(--lh-caption);opacity:.85;margin-top:var(--space-3);max-width:38ch}
.footer-bottom{border-top:1px solid color-mix(in srgb,var(--color-surface) 18%,transparent);margin-top:var(--space-8);padding-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font-size:var(--fs-caption);line-height:var(--lh-caption)}
/* Floating actions — circular icon buttons, stacked on the same inline-end
   side, always fully inside the viewport (RTL + LTR, mobile included).
   WhatsApp: official glyph on the WhatsApp brand colour; Call: phone glyph
   on primary, one token gap above the WhatsApp circle. */
.wa-float{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:60;width:56px;height:56px;border-radius:50%;background:var(--color-whatsapp);color:var(--color-surface);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);transition:filter .2s ease,transform .2s ease}
.wa-float svg{width:28px;height:28px;fill:currentColor;display:block}
.wa-float:hover{text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)}
.call-float{position:fixed;bottom:calc(var(--space-6) + 56px + var(--space-3));right:var(--space-6);z-index:60;width:56px;height:56px;border-radius:50%;background:var(--color-primary);color:var(--color-surface);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);transition:filter .2s ease,transform .2s ease}
.call-float svg{width:24px;height:24px;fill:currentColor;display:block}
.call-float:hover{text-decoration:none;filter:brightness(1.15);transform:translateY(-1px)}
/* responsive */
@media (max-width:1023px){
 .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
 .process-grid{grid-template-columns:repeat(2,1fr)}
 .footer-grid{grid-template-columns:repeat(2,1fr)}
 .split,.svc-row,.contact-grid{grid-template-columns:1fr}
 .values-media img{height:auto;aspect-ratio:3/2}
 .svc-row.flip .svc-media{order:0}
 .hero-stats{grid-template-columns:repeat(2,1fr)}
 .hero-in{padding-block:var(--space-24) var(--space-16)}
  .main-nav{display:none;position:absolute;top:100%;inset-inline:0;background:var(--color-primary);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-card)}
 .main-nav.open{display:block}
 .main-nav ul{flex-direction:column;gap:var(--space-3)}
 .site-header{position:sticky}
 .header-in{flex-wrap:wrap}
 .nav-toggle{display:block;margin-inline-start:auto}
 .header-actions{margin-inline-start:0}
}
@media (max-width:600px){
 .grid--3,.grid--4,.grid--2,.process-grid,.footer-grid{grid-template-columns:1fr}
 .svc-row{padding-block:var(--space-8);gap:var(--space-6)}
 .hero-in{padding-block:var(--space-16) var(--space-12)}
 .brand-name{font-size:var(--fs-brand-sm)}
 }
@media (max-width:600px){
  .wa-float{width:50px;height:50px;bottom:var(--space-4);right:var(--space-4)}
  .wa-float svg{width:25px;height:25px}
  .call-float{width:50px;height:50px;bottom:calc(var(--space-4) + 50px + var(--space-2));right:var(--space-4)}
  .call-float svg{width:22px;height:22px}
  .owners-logo{height:40px;max-width:150px}
  .owners-in{justify-content:center;gap:var(--space-4) var(--space-6)}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .card:hover,.value-card:hover,.btn:hover,.wa-float:hover,.call-float:hover{transform:none}
}