/* ==========================================================================
   TECHZA — techza.ae  ·  New Version
   Mobile-first. Only min-width media queries.

   Design language adapted from the Hydro Mechanical pattern:
   condensed uppercase display type, a visible column grid, near-black plates
   that bleed to one edge, 20px panel radius, duotone photography, outline
   buttons with wide tracking.

   Brand colours are the only hues. Navy and blue are sampled from the logo;
   the duotone, the plates and the neutrals are all derived from them.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand — from new "TZ" gradient logo (navy → dodger-blue) */
  --navy:#1B4C8C;
  --blue:#0C7EE9;
  --blue-text:#0A63C2;           /* AA variant: 5.87:1 on white */
  --blue-lift:#3E94EA;           /* blue lifted to clear 4.5:1 on the ink plate */
  --blue-pale:#A8CEF0;           /* blue lifted again to read on the navy band */

  /* duotone endpoints — navy shadows lifting to blue highlights */
  --duo-high:#2F87DA;
  --duo-low:#122036;

  /* grounds — the plate is navy taken down, not a neutral black */
  --ink:#0A1424;
  --ink-2:#122036;
  --paper:#FFFFFF;
  --paper-2:#F1F5FA;

  /* navy-biased neutrals */
  --slate-200:#E2E7EE;
  --slate-300:#C9D0D9;
  --slate-500:#657181;
  --slate-700:#323B48;
  --on-ink:#B4C2CF;
  --on-ink-dim:#8593A3;

  --wa:#25843F;                  /* channel colour only — never dominant */

  /* type */
  --f-display:"Archivo","Archivo Narrow",Impact,system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* column rails */
  --rails:4;
  --rail-light:rgba(15,40,52,.09);
  --rail-dark:rgba(255,255,255,.07);

  /* space + shape */
  --gut:1.25rem;
  --radius:20px;
  --radius-sm:6px;
  --bleed:1.25rem;               /* how far a plate is inset from one edge */

  --ease:cubic-bezier(.16,1,.3,1);
  --bar-h:0px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html.nav-open{overflow:hidden;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--slate-700);
  background:var(--paper);
  overflow-x:hidden;
  padding-bottom:var(--bar-h);
}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue-text);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;}

:focus-visible{outline:3px solid var(--blue-text);outline-offset:3px;border-radius:2px;}
.plate :focus-visible,.hero :focus-visible{outline-color:var(--blue-lift);}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut);}

/* ---------- 3. Display type ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-stretch:64%;
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.002em;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
.d-xl{font-size:clamp(2.9rem,11.5vw,6.5rem);}
.d-lg{font-size:clamp(2.5rem,10.5vw,5.5rem);}
.d-md{font-size:clamp(1.75rem,6.5vw,3rem);}
.d-sm{font-size:clamp(1.35rem,4.6vw,1.9rem);}

/* utility label — display face at normal width, wide tracking */
.lbl{
  font-family:var(--f-display);
  font-stretch:100%;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-text);
  display:flex;align-items:center;gap:.6rem;
}
.lbl-light{color:var(--blue-lift);}
.lbl .num{
  font-variant-numeric:tabular-nums;opacity:.8;
  padding-right:.6rem;border-right:1px solid currentColor;
}

.lede{font-size:1.05rem;line-height:1.6;color:var(--slate-500);max-width:54ch;}
.lede-light{color:var(--on-ink);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:.75rem 1.1rem;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
     stroke-linecap:round;stroke-linejoin:round;}
.ico-lg{width:26px;height:26px;}

/* ---------- 4. Column rails ---------- */
/* One fixed layer behind everything; dark plates carry their own lighter set. */
.rails{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,
    var(--rail-light) 0 1px, transparent 1px calc(100% / var(--rails)));
}
body > header,body > main,body > footer,body > nav{position:relative;z-index:1;}

.has-rails{position:relative;isolation:isolate;}
.has-rails::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,
    var(--rail-dark) 0 1px, transparent 1px calc(100% / var(--rails)));
}
.has-rails > *{position:relative;z-index:1;}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.6rem;
  border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;text-align:center;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .12s ease;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-full{width:100%;}

.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-solid:hover{background:var(--navy);border-color:var(--navy);}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--slate-300);}
.btn-outline:hover{border-color:var(--ink);background:var(--paper-2);}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}

.btn-light{background:#fff;color:var(--ink);border-color:#fff;}
.btn-light:hover{background:var(--paper-2);border-color:var(--paper-2);}

.btn-brand{background:transparent;color:var(--blue-lift);border-color:var(--blue-lift);}
.btn-brand:hover{background:rgba(62,148,234,.14);}

/* WhatsApp is a channel, not the loudest thing on the page: outline plus a dot. */
.btn-wa{background:transparent;border-color:currentColor;}
.btn-wa .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--wa);flex:none;}
.btn-ghost.btn-wa .dot{background:#4ED07A;}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{background:rgba(255,255,255,.96);border-bottom-color:var(--slate-200);
                      backdrop-filter:saturate(150%) blur(10px);}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:72px;}
.brand{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;min-height:44px;}
.brand:hover{text-decoration:none;}
.brand-mark{height:32px;width:auto;}
.brand-word{height:18px;width:auto;}
/* Over the hero duotone the dark logo has too little contrast,
   so the white variant shows there; the real (colour) logo takes over once the header is solid. */
.brand-mark-color,.brand-word-color{display:none;}
.site-header.is-stuck .brand-mark-white,
.site-header.is-stuck .brand-word-white{display:none;}
.site-header.is-stuck .brand-mark-color,
.site-header.is-stuck .brand-word-color{display:block;}

.menu-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  min-height:48px;padding:.5rem .25rem .5rem .75rem;
  background:none;border:0;cursor:pointer;color:#fff;
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
}
.is-stuck .menu-btn{color:var(--ink);}
.menu-btn .plus{position:relative;width:26px;height:26px;flex:none;}
.menu-btn .plus::before,.menu-btn .plus::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transition:transform .3s var(--ease);
}
.menu-btn .plus::before{width:26px;height:1.5px;transform:translate(-50%,-50%);}
.menu-btn .plus::after{width:1.5px;height:26px;transform:translate(-50%,-50%);}
.menu-btn[aria-expanded="true"] .plus::before{transform:translate(-50%,-50%) rotate(135deg);}
.menu-btn[aria-expanded="true"] .plus::after{transform:translate(-50%,-50%) rotate(135deg);}

/* full-screen overlay nav */
.nav-overlay{
  position:fixed;inset:0;z-index:110;
  background:var(--ink);
  padding:6rem var(--gut) 2.5rem;
  overflow-y:auto;
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
}
.nav-overlay[hidden]{display:none;}
.nav-list{display:flex;flex-direction:column;}
.nav-list a{
  display:block;padding:.35rem 0;
  font-family:var(--f-display);font-stretch:64%;font-weight:800;
  font-size:clamp(2.1rem,10vw,4rem);line-height:1.06;
  text-transform:uppercase;color:#fff;
  transition:color .2s var(--ease);
}
.nav-list a:hover,.nav-list a:focus-visible{color:var(--blue-lift);text-decoration:none;}
.nav-foot{display:flex;flex-direction:column;gap:.9rem;padding-top:1.5rem;
          border-top:1px solid rgba(255,255,255,.16);}
.nav-foot a{color:var(--on-ink);font-size:.95rem;}
.nav-foot a:hover{color:#fff;}

/* ---------- 7. Duotone ---------- */
/* Luminance of the photo mapped between two brand values, so a mixed stock
   set reads as one family. Remove this and the grid looks like assorted stock. */
.duo{position:relative;isolation:isolate;background-color:var(--duo-high);overflow:hidden;}
.duo img{width:100%;height:100%;object-fit:cover;
         mix-blend-mode:multiply;filter:grayscale(1) contrast(1.06);}
/* The browser can paint this filter a frame before the blend-mode compositing
   with .duo::after catches up, flashing the image desaturated on load. Hide
   it until JS confirms the image has fully loaded and settled. */
.js .duo img{opacity:0;transition:opacity .25s linear;}
.js .duo img.is-loaded{opacity:1;}
.duo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:var(--duo-low);mix-blend-mode:lighten;
}

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;isolation:isolate;margin-top:-72px;
  min-height:94svh;display:flex;align-items:flex-end;
  padding:7rem 0 calc(2.75rem + var(--bar-h));background:var(--duo-low);
}
.hero-bg{position:absolute;inset:0;z-index:-2;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--ease);
}
.hero-slide.is-active{position:relative;opacity:1;}
.hero-slide .duo{display:block;width:100%;height:100%;}
/* Weighted to the lower half, where every piece of hero text sits. The top
   stays open so the duotone reads as a photograph rather than a flat panel. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,22,30,.28) 0%, rgba(9,22,30,.16) 26%,
    rgba(9,22,30,.60) 60%, rgba(9,22,30,.76) 100%);
}
.hero-inner{display:grid;gap:1.1rem;}
.hero h1{color:#fff;}
.hero .lbl{font-size:.66rem;letter-spacing:.15em;color:var(--blue-pale);}
.hero .lede{color:#DCE9ED;font-size:.98rem;max-width:42ch;}
.hero-ctas{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem;}

/* Text pairs with the active hero image slide. Both copy blocks share the
   same grid cell so the swap doesn't jump the layout. Unlike the images,
   overlapping two blocks of text mid-fade reads as illegible double
   exposure, so JS staggers the swap (fade out, then fade in) rather than
   overlapping — this transition just needs to be quick enough to finish
   within that gap. */
.hero-copy{
  grid-area:1/1;display:flex;flex-direction:column;gap:1.1rem;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.hero-copy.is-active{opacity:1;pointer-events:auto;}

/* ---------- 9. Trust plate ----------
   The one full-strength navy field on the page, sitting between the duotone
   hero and the white services ground so the brand colour carries structure
   rather than trim. Its foregrounds are lifted to clear AA on that mid navy. */
.trust{background:var(--navy);color:#fff;padding:2.75rem 0 2.25rem;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.stat-value{display:flex;align-items:baseline;}
.stat-num,.stat-plus{
  font-family:var(--f-display);font-stretch:64%;font-weight:800;
  font-size:clamp(2.6rem,12vw,4.5rem);line-height:.9;color:#fff;
  font-variant-numeric:tabular-nums;
}
.stat-plus{color:var(--blue-pale);}
.stat-lbl{display:block;margin-top:.5rem;font-size:.76rem;line-height:1.3;color:#EFF5F7;}

/* ---------- 10. Section shell ---------- */
.section{padding:4rem 0;}
/* the tinted ground would otherwise hide the fixed rails, so it carries its own */
.section-alt{background:var(--paper-2);position:relative;isolation:isolate;}
.section-alt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,
    var(--rail-light) 0 1px, transparent 1px calc(100% / var(--rails)));
}
.section-alt > *{position:relative;z-index:1;}
/* clear the sticky header when an in-page anchor is followed */
section[id]{scroll-margin-top:80px;}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.25rem;max-width:46ch;}
.plate .sec-head h2,.plate h3{color:#fff;}

/* ---------- 10b. FAQ accordion ---------- */
.faq-list{max-width:64ch;}
.faq-item{
  border-bottom:1px solid var(--slate-200);
  padding:1.1rem 0;
}
.faq-item:first-child{border-top:1px solid var(--slate-200);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  cursor:pointer;list-style:none;
  font-family:var(--f-display);font-stretch:88%;font-weight:700;
  font-size:1.05rem;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";flex:none;
  width:1.6rem;height:1.6rem;border-radius:50%;
  border:1px solid var(--slate-300);
  display:grid;place-items:center;
  font-size:1.1rem;line-height:1;color:var(--blue-text);
  transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{content:"–";transform:rotate(180deg);}
.faq-item p{margin-top:.85rem;padding-right:2.4rem;color:var(--slate-500);}

/* circle badge — outline ring with letterspaced label */
.ring{
  display:none;width:11rem;height:11rem;border-radius:50%;
  border:1px solid var(--slate-300);
  place-items:center;text-align:center;flex:none;
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate-500);line-height:1.7;
}
.ring-light{border-color:rgba(255,255,255,.32);color:var(--on-ink);}

/* rotated outline word used as a section marker */
.stamp{
  display:none;
  font-family:var(--f-display);font-stretch:64%;font-weight:800;
  font-size:4.5rem;line-height:.85;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);
  writing-mode:vertical-rl;transform:rotate(180deg);
  user-select:none;
}

/* ---------- 11. Services ---------- */
.filters{display:flex;gap:1.25rem;overflow-x:auto;margin-bottom:2rem;
         padding-bottom:.75rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.filters::-webkit-scrollbar{display:none;}
.chip{
  flex:none;min-height:44px;padding:.4rem 0;background:none;border:0;cursor:pointer;
  border-bottom:2px solid transparent;color:var(--slate-500);
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.chip:hover{color:var(--ink);}
.chip.is-active{color:var(--ink);border-bottom-color:var(--blue);}

.svc-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
.svc{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);}
.svc[hidden]{display:none;}
.svc-media{position:relative;aspect-ratio:16/10;}
.svc-media img{width:100%;height:100%;object-fit:cover;
               transition:transform .6s var(--ease),filter .4s var(--ease);}
.svc::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,22,30,.04) 32%,rgba(9,22,30,.84) 100%);
}
.svc-body{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:1.25rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;
}
.svc-body h3{color:#fff;}
.svc-body p{font-size:.88rem;line-height:1.5;color:#CBDCE2;max-width:44ch;}
.svc:hover .svc-media img,.svc:focus-within .svc-media img{transform:scale(1.03);}
.svc-empty{margin-top:1.5rem;color:var(--slate-500);}

/* ---------- 12. Why (dark plate) ---------- */
.plate{
  position:relative;background:var(--ink);color:var(--on-ink);
  border-radius:var(--radius);padding:3rem 0;overflow:hidden;
}
/* the plate is inset from the left and runs off the right edge of the viewport */
.plate-bleed{margin-left:var(--bleed);margin-right:calc(50% - 50vw);
             border-radius:var(--radius) 0 0 var(--radius);}
.plate .wrap{max-width:1240px;}

.arrow-list{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.arrow-item{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;row-gap:.35rem;}
.arrow-item .ico{stroke:var(--blue-lift);grid-row:1;margin-top:.3rem;}
.arrow-item h3{grid-column:2;font-size:1.05rem;color:#fff;}
.arrow-item p{grid-column:2;font-size:.92rem;color:var(--on-ink-dim);}

/* ---------- 13. About ---------- */
.about-grid{display:flex;flex-direction:column;gap:1.75rem;}
.about-copy p{color:var(--slate-500);}
.about-copy .stack{display:flex;flex-direction:column;gap:1.1rem;}
.about-copy blockquote{
  margin:0;padding:1.25rem 0 1.25rem 1.25rem;
  border-left:2px solid var(--blue);
  font-family:var(--f-display);font-stretch:100%;font-weight:500;
  font-size:1.05rem;line-height:1.45;color:var(--ink);text-transform:none;
}
.about-meta{font-size:.86rem;color:var(--slate-500);}
.about-media{border-radius:var(--radius);overflow:hidden;}
.about-media img{width:100%;}

/* ---------- 14. Sourcing (duotone panel) ---------- */
.sourcing-panel{
  position:relative;isolation:isolate;border-radius:var(--radius);overflow:hidden;
  background:var(--duo-low);padding:3rem 0;
}
.sourcing-panel > .duo{position:absolute;inset:0;z-index:-2;}
.sourcing-panel::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,19,24,.60),rgba(11,19,24,.80));
}
.sourcing-panel h2,.sourcing-panel h3{color:#fff;}
.steps{display:flex;flex-direction:column;gap:1.4rem;margin-top:2rem;}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.3rem;align-items:start;}
.step-n{
  grid-row:1 / span 2;
  font-family:var(--f-display);font-stretch:64%;font-weight:800;font-size:2.4rem;
  line-height:.85;color:var(--blue-lift);font-variant-numeric:tabular-nums;
}
.steps h3{font-size:1.05rem;}
.steps p{font-size:.92rem;color:var(--on-ink);}

/* ---------- 15. Projects ---------- */
.proj-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
.proj-ph{
  aspect-ratio:16/10;border-radius:var(--radius);
  border:1px dashed var(--slate-300);background:var(--paper-2);
  display:grid;place-items:center;
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-500);
}
.proj p{margin-top:.75rem;font-family:var(--f-display);font-stretch:100%;font-weight:600;
        font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);}
.proj-cta{margin-top:2rem;}

/* ---------- 16. Industries ---------- */
.ind-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--slate-200);
         border:1px solid var(--slate-200);border-radius:var(--radius);overflow:hidden;}
.ind-row li{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1rem;background:var(--paper);}
.ind-row .ico{stroke:var(--blue-text);}
.ind-row span{font-family:var(--f-display);font-stretch:100%;font-weight:600;
              font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
              color:var(--ink);line-height:1.3;}

/* ---------- 17. Contact ---------- */
.contact-grid{display:flex;flex-direction:column;gap:2rem;}
.field{margin:0 0 1.1rem;}
.field label{
  display:block;margin-bottom:.5rem;
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink);
}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.75rem 0;
  background:transparent;color:#fff;
  border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;
  font-family:var(--f-body);font-size:1rem;
  transition:border-color .2s var(--ease);
}
.field select{padding-right:1.5rem;}
.field select option{color:var(--ink);background:#fff;}
.field textarea{min-height:auto;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--blue-lift);outline:none;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#E08A6E;}
.field-row{display:grid;grid-template-columns:1fr;gap:0;}
.form-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;}
.form-note{margin-top:1rem;font-size:.9rem;color:var(--on-ink-dim);}
.form-note.is-error{color:#E08A6E;}
.form-note.is-ok{color:var(--blue-lift);}

.contact-side{display:flex;flex-direction:column;gap:0;}
.contact-card{
  display:flex;align-items:center;gap:1rem;min-height:68px;padding:1.1rem 0;
  border-bottom:1px solid rgba(255,255,255,.14);color:var(--on-ink);
  transition:color .2s var(--ease);
}
.contact-card:first-child{border-top:1px solid rgba(255,255,255,.14);}
.contact-card:hover{text-decoration:none;color:#fff;}
.contact-card .ico{stroke:var(--blue-lift);}
.contact-card span{display:flex;flex-direction:column;min-width:0;}
.contact-card strong{
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
.contact-card em{font-style:normal;font-size:.82rem;color:var(--on-ink-dim);}
.contact-card-static{cursor:default;}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--ink);color:var(--on-ink-dim);padding:3.5rem 0 1.75rem;font-size:.9rem;}
.foot-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;}
.foot-logo{height:24px;width:auto;margin-bottom:1rem;}
.foot-tag{
  font-family:var(--f-display);font-stretch:64%;font-weight:800;
  font-size:clamp(1.6rem,7vw,2.4rem);line-height:.95;text-transform:uppercase;
  color:#fff;margin-bottom:.6rem;
}
.foot-desc{color:var(--on-ink-dim);max-width:40ch;}
.site-footer h2{
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-lift);margin:0 0 1rem;
}
.site-footer a{color:var(--on-ink);}
.site-footer a:hover{color:#fff;}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px;padding:.15rem 0;}
.site-footer li:not(:has(a)){padding:.5rem 0;line-height:1.5;}
.foot-bottom{
  margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:.5rem;font-size:.78rem;
}

/* ---------- 19. Sticky mobile action bar ---------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--ink);border-top:1px solid rgba(255,255,255,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.action-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  min-height:60px;color:#fff;
  font-family:var(--f-display);font-stretch:100%;font-weight:600;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.action-bar a:hover{text-decoration:none;background:var(--ink-2);}
.action-bar .ico{stroke:currentColor;}
.action-bar .ab-wa .ico{stroke:#4ED07A;}

/* ---------- 19b. Fixed WhatsApp button ---------- */
.wa-fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:131;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.wa-fab:hover{transform:scale(1.06);text-decoration:none;}
.wa-fab .ico{width:22px;height:22px;stroke:var(--wa);color:var(--wa);fill:none;}

@media (max-width:899.98px){
  .wa-fab{right:1rem;bottom:calc(72px + env(safe-area-inset-bottom));}
}

/* ---------- 20. Scroll reveal (JS-gated) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ==========================================================================
   Breakpoints — min-width only
   ========================================================================== */

@media (min-width:480px){
  .hero-ctas{flex-direction:row;flex-wrap:wrap;}
  .form-actions{flex-direction:row;}
  .btn-full{width:auto;}
}

@media (min-width:640px){
  :root{--gut:2rem;--bleed:2rem;}
  .section{padding:5.5rem 0;}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;}
  .svc-media{aspect-ratio:4/3;}
  .arrow-list{grid-template-columns:repeat(2,1fr);gap:2rem;}
  .proj-grid{grid-template-columns:repeat(3,1fr);}
  .ind-row{grid-template-columns:repeat(3,1fr);}
  .field-row{grid-template-columns:1fr 1fr;gap:0 1.5rem;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .foot-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
  .plate{padding:4rem 0;}
  .sourcing-panel{padding:4rem 0;}
}

@media (min-width:900px){
  :root{--rails:5;--gut:2.5rem;--bleed:5rem;}
  .section{padding:7rem 0;}
  .sec-head{margin-bottom:3rem;}

  .hero{min-height:92svh;padding:10rem 0 5rem;}
  .hero .lede{font-size:1.1rem;max-width:48ch;}

  .stats{max-width:none;}
  .stat-lbl{font-size:.85rem;}
  .licence-line{font-size:.92rem;}

  .svc-grid{grid-template-columns:repeat(3,1fr);}

  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
  .about-media{margin-left:-3rem;}

  .plate{padding:5.5rem 0;}
  .plate-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start;}
  .arrow-list{gap:2.25rem 3rem;}

  .sourcing-panel{padding:6rem 0;}
  .sourcing-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start;}
  .stamp{display:block;}

  .contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:start;}

  .ring{display:grid;}
  .head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:3rem;}
  .head-row .sec-head{margin-bottom:0;}

  .ind-row{grid-template-columns:repeat(6,1fr);}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;}

  .action-bar{display:none;}
  body{padding-bottom:0;}
}

/* Capped at three columns: a fourth squeezes the description to the point
   where the tile stops being scannable. */
@media (min-width:1180px){
  .stat-num,.stat-plus{font-size:5rem;}
}

/* ---------- 21. Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1 !important;transform:none !important;}
}

@media print{
  .site-header,.action-bar,.wa-fab,.hero-bg,.rails,.nav-overlay{display:none !important;}
  body{padding:0;color:#000;background:#fff;}
  .plate,.trust,.site-footer,.sourcing-panel{background:#fff !important;color:#000 !important;}
  h1,h2,h3,h4{color:#000 !important;}
}