/* =========================================================
   Calidar Base Styles — Refactored & Commented
   ========================================================= */

/* =========================
   THEME VARIABLES
   ========================= */
:root{
  /* Brand */
  --cyan:#03e4ee; --cyan-soft:#79f0f5; --rose:#ff9a8f; --red:#ee0d03;

  /* Neutrals */
  --black:#030303; --dark:#3f3f3f; --bg:#ffffff; --muted:#f5f5f5;

  /* Effects */
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,0.08);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.1);

  /* Layout helpers */
  --nav-offset:60px;  /* distance from header to mobile nav sheet */
  --footer-logo-h:54px;

  /* ===== FIG ANIMATION CONTROLS (Technology page) ===== */
  /* FIG1 master timings */
  --fig1-prewait:300ms;       /* delay before wipe starts */
  --fig1-wipe:1500ms;         /* wipe duration */
  --fig1-fadein:1000ms;       /* frame3 fade-in duration */
  --fig1-scale:500ms;         /* frame3 vertical scale duration */
  --fig1-end-hold:0ms;        /* hold frame3 at full before fade-out */
  --fig1-fadeout:500ms;       /* fade-out duration when cycling */
  --fig1-gap:200ms;           /* gap after fade-out before restarting */
  --fig1-frame3-delay:800ms;  /* when frame3 (fade+scale) starts (rel. to start) */
  --fig1-scale-start:0.6;     /* frame3 starting vertical scale (0–1) */

  /* Derived fig1 variables (keep JS/CSS in sync) */
  --fig1-wipe-delay:var(--fig1-prewait);
  --fig1-wipe-duration:var(--fig1-wipe);
  --fig1-final-delay:calc(var(--fig1-prewait) + var(--fig1-frame3-delay));
  --fig1-scale-delay:calc(var(--fig1-final-delay) + var(--fig1-end-hold));
  --fig1-scale-duration:var(--fig1-scale);
  --fig1-final-duration:var(--fig1-fadein);
  --fig1-fade-duration:var(--fig1-fadeout);
  --fig1-gap-after-fade:var(--fig1-gap);

  /* FIG2 timings */
  --fig2-prewait:1ms;
  --fig2-wipe:3000ms;
  --fig2-hold:3000ms; /* reserved */
  --fig2-fade:100ms;
  --fig2-gap:500ms;   /* reserved */

  /* FIG3 timings */
  --fig3-prewait:2000ms;
  --fig3-xfade:800ms;
  --fig3-wipe:1000ms;
  --fig3-loop-wait:0ms;
  --fig3-loop-fade:3000ms;

  /* Tech layout proportions */
  --fig1-col-figure:1.5fr; --fig1-col-text:1fr;
  --fig2-col-figure:1.5fr; --fig2-col-text:1fr;
  --fig3-col-figure:1.5fr; --fig3-col-text:1fr;

  /* Tech page background bases */
  --merged-base-1:#01071b; --merged-base-2:#001319;

  /* Section rhythm (tech) */
  --section-padY:clamp(140px,14vw,240px);
  --gap:32px; --col-pad:8px;

  /* Tech “step” variables (copy widths, font sizes, heading sizes, image scale) */
  --scatter-w-xl:600px; --scatter-w-lg:450px; --scatter-w-md:400px;
  --sign-w-xl:   600px; --sign-w-lg:   450px; --sign-w-md:   400px;
  --fourd-w-xl:  600px; --fourd-w-lg:  450px; --fourd-w-md:  400px;

  --scatter-fs-xl:1.0625rem; --scatter-fs-lg:1.0rem; --scatter-fs-md:0.9rem;
  --sign-fs-xl:   1.0625rem; --sign-fs-lg:   1.0rem; --sign-fs-md:0.9rem;
  --fourd-fs-xl:  1.0625rem; --fourd-fs-lg:  1.0rem; --fourd-fs-md:0.9rem;

  --scatter-h2-xl:2.0rem; --scatter-h2-lg:1.85rem; --scatter-h2-md:1.7rem;
  --sign-h2-xl:   2.0rem; --sign-h2-lg:   1.85rem; --sign-h2-md:1.7rem;
  --fourd-h2-xl:  2.0rem; --fourd-h2-lg:  1.85rem; --fourd-h2-md:1.7rem;

  --scatter-img-scale-xl:1.35; --scatter-img-scale-lg:1.2; --scatter-img-scale-md:1.1;
  --sign-img-scale-xl:   1.35; --sign-img-scale-lg:   1.2; --sign-img-scale-md:1.1;
  --fourd-img-scale-xl:  1.35; --fourd-img-scale-lg:  1.2; --fourd-img-scale-md:1.1;

  /* Active (defaults to XL) */
  --scatter-step-w:var(--scatter-w-xl);
  --sign-step-w:   var(--sign-w-xl);
  --fourd-step-w:  var(--fourd-w-xl);

  --scatter-step-fs:var(--scatter-fs-xl);
  --sign-step-fs:   var(--sign-fs-xl);
  --fourd-step-fs:  var(--fourd-fs-xl);

  --scatter-step-h2:var(--scatter-h2-xl);
  --sign-step-h2:   var(--sign-h2-xl);
  --fourd-step-h2:  var(--fourd-h2-xl);

  --scatter-img-scale-step:var(--scatter-img-scale-xl);
  --sign-img-scale-step:   var(--sign-img-scale-xl);
  --fourd-img-scale-step:  var(--fourd-img-scale-xl);

  /* Tightening at LG/MD */
  --col-gap-lg:16px; --col-gap-md:10px;
  --col-pad-lg:0px;  --col-pad-md:0px;

  /* Unified tech layout knobs */
  --tech-col-gap:36px;   /* gap between figure/text on tech sections (>=1000px) */
  --tech-img-scale:1.20; /* figure scale on desktop/tablet */
}

/* =========================
   RESET / BASE
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6; color:var(--dark); background:var(--bg);
}
h1,h2,h3{color:var(--black);line-height:1.2}
h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 0.25rem}
h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 0.5rem}
h3{font-size:clamp(1.15rem,2vw,1.25rem);margin:0 0 0.25rem}
p{margin:0.5rem 0}
.lede{font-size:1.125rem;opacity:0.95}

/* Containers & Utilities */
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:64px 0}
.section.muted{background:var(--muted)}
.center{text-align:center}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.max-600{max-width:600px;margin:0.5rem auto}

/* Grid */
.grid-2{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:start;
}

/* =========================
   HEADER / NAV
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  transition:box-shadow .25s ease, background-color .25s ease;
  padding:10px 0;
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.site-header.light{background:#fff}
.site-header.dark{background:#2c2c2c}

.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;color:var(--black)}
.logo-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#fff,#aaf7fb,#ffcfcf);color:#111;font-size:14px}

.nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;padding:10px 4px;border-bottom:2px solid transparent;color:var(--dark)}
.nav a:hover,.nav a:focus{border-color:var(--cyan)}
.nav a.active{border-color:var(--cyan)}

.menu-toggle{display:none;background:transparent;border:0;cursor:pointer;width:44px;height:44px;border-radius:10px}
.menu-toggle .bar{display:block;height:2px;background:#444;margin:7px 6px}

/* Skip link (a11y) */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#fff;color:#000;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}

/* =========================
   HERO (light pages)
   ========================= */
.hero{
  position:relative; padding:96px 0 56px; overflow:hidden;
  background:
    radial-gradient(1200px 300px at -20% 10%, rgba(3,228,238,0.25), transparent 60%),
    radial-gradient(800px 240px at 120% 20%, rgba(238,13,3,0.10), transparent 60%);
}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:center}
.tagline{font-weight:600;color:var(--black);opacity:0.9}
.hero-copy .lede{max-width:560px}
.hero-art{position:relative;min-height:280px}
.hero-art .optics{position:absolute;inset:0}

/* Decorative dividers */
.divider.wave{
  height:14px;background:
  repeating-linear-gradient(90deg,transparent 0 18px, rgba(3,228,238,0.15) 18px 22px),
  linear-gradient(90deg, rgba(255,255,255,0), rgba(3,228,238,0.25), rgba(238,13,3,0.25), rgba(255,255,255,0));
}
.divider.prism{
  height:14px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(3,228,238,0.35), rgba(238,13,3,0.35), rgba(255,255,255,0));
}

/* Cards / Features / Team */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.dark .card{background:#2b2b2b;color:#f1f1f1;border:1px solid rgba(255,255,255,0.06)}

.features{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.feature{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.feature .icon{color:var(--cyan);width:40px;height:40px}
.feature p{margin:0.35rem 0 0}
.section.muted .feature{background:#fff}

.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.member h3{margin-top:0.25rem}
.avatar{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#e6fdff,#ffe5e3);
  color:#111;display:grid;place-items:center;font-weight:800;margin-bottom:10px
}

/* News */
.news-teaser{list-style:none;margin:0;padding:0}
.news-teaser li{display:flex;gap:12px;align-items:baseline;margin:8px 0}
.news-teaser time{font-variant-numeric:tabular-nums;color:#666}

.page-hero{padding:84px 0 20px;background:linear-gradient(180deg,#fff 0,#f9ffff 100%)}

/* Buttons */
.btn{
  display:inline-block;padding:12px 16px;border-radius:14px;text-decoration:none;border:2px solid transparent;
  transition:transform .05s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; font-weight:700;
}
.btn:focus{outline:3px solid rgba(3,228,238,0.6);outline-offset:2px}
.btn.primary{background:var(--cyan);color:#111}
.btn.primary:hover{box-shadow:0 6px 16px rgba(3,228,238,0.3);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--cyan);color:#111}
.btn.ghost:hover{background:rgba(3,228,238,0.08)}

/* Forms */
.contact-form .form-row{display:flex;flex-direction:column;margin-bottom:12px}
label{font-weight:600}
input,textarea{border:1px solid #d9d9d9;border-radius:12px;padding:12px;font-size:1rem;background:#fff;color:#111}
input:focus,textarea:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.form-note{font-size:0.9rem;opacity:0.8;transition:opacity .3s ease, transform .3s ease;transform:translateY(10px)}
.form-note[style*="block"]{opacity:1;transform:translateY(0)}
.form-note.error{color:var(--red);font-weight:600}
.form-note.success{color:var(--dark);font-weight:400}
.lede{font-size:1.5rem;opacity:0.95}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid #eee;margin-top:48px}
.site-footer.dark{background:#2c2c2c;color:#f1f1f1;border-top-color:rgba(255,255,255,0.08);margin-top:0}
.footer-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px}
.footer-nav a{text-decoration:none;margin-right:12px;color:inherit}
.footer-nav a:hover{color:var(--cyan)}
.social a{margin-right:12px;text-decoration:none}
.copy{text-align:right;color:#666}
.dark .copy{color:#aaa}

/* Shared image helpers */
.logo img{display:block;height:28px;width:auto}
.footer-brand img{display:block;height:var(--footer-logo-h);width:auto}
.hero-wordmark{display:block;margin-bottom:6px;height:auto}
.headshot{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:var(--shadow)}

/* Footer: stack disclaimer over copyright (centered block) */
.site-footer .copy{
  display:flex;flex-direction:column;gap:4px;text-align:center;align-items:center;
  width:min(92%, var(--footer-copy-w));margin-inline:auto;
}
.site-footer .copy .disclaimer{font-size:0.72rem;line-height:1.35;color:#666;max-width:70ch}
.site-footer.dark .copy .disclaimer{color:#aaa}
.site-footer .footer-brand{display:flex;align-items:center;justify-content:left}

/* Dark header nav contrast */
.site-header.dark .nav a{color:#fff}
.site-header.dark .nav a:hover,
.site-header.dark .nav a:focus,
.site-header.dark .nav a.active{border-color:var(--cyan)}
.site-header.dark .menu-toggle .bar{background:#fff}

/* Focus offset for in-page anchors */
a:focus,button:focus,input:focus,textarea:focus{scroll-margin:100px}

/* =========================
   REVEAL-ON-SCROLL
   ========================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* =========================
   RESPONSIVE (global)
   ========================= */
@media (max-width:1024px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-inner{grid-template-columns:1fr}
  .hero-art{order:-1;margin-bottom:10px}
}

@media (max-width:768px){
  body{font-size:0.9rem}
  .grid-2{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:auto 1fr; gap:8px}
  .copy{text-align:left}
  .menu-toggle{display:inline-block}

  /* Mobile menu sheet (closed state) */
  .nav{
    position:absolute; inset:var(--nav-offset) 0 auto 0; background:#fff; border-bottom:1px solid #eee;
    transform:translateY(calc(-100% - var(--nav-offset))) !important;
    transition:transform .25s ease; box-shadow:var(--shadow-sm); will-change:transform;
  }
  .site-header.dark .nav{background:#2c2c2c;border-bottom-color:rgba(255,255,255,0.08)}
  .nav.open{transform:translateY(0) !important;}
  .nav-links{flex-direction:column; padding:12px}
  .nav a{padding:12px 4px}
}

/* =========================================================
   DARK THEME + TECHNOLOGY PAGE
   ========================================================= */
.dark{background:#3f3f3f;color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}

/* Merged dark background */
.merged-stack{position:relative;isolation:isolate}
.merged-stack::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(180% 120% at 10% 0%, rgba(3,228,238,0.12), transparent 65%),
    radial-gradient(160% 140% at 90% 100%, rgba(121,240,245,0.10), transparent 65%),
    linear-gradient(112deg,
      rgba(3,228,238,0.25) 6%,
      rgba(3,228,238,0.10) 12%,
      rgba(121,240,245,0.18) 18%,
      rgba(255,154,143,0.15) 26%,
      rgba(238,13,3,0.15) 36%,
      rgba(238,13,3,0.05) 48%
    ),
    linear-gradient(180deg,var(--merged-base-1) 0%,var(--merged-base-2) 100%);
  background-size:120% 120%,140% 140%,220% 220%,100% 100%;
  background-position:0% 0%,100% 100%,0% 40%,0% 0%;
  opacity:0.97;
}

/* Tech sections */
.tech-hero{position:relative;padding:86px 0 20px;background:transparent}
.tech-section{position:relative;margin:0;padding:var(--section-padY) 0;background:transparent}
.tech-section.tight{--section-padY:clamp(80px,10vw,160px)}

.grid-2{align-items:center}
.tech-art,.tech-copy{padding-inline:var(--col-pad)}
.tech-art{overflow:visible}
.tech-art img{display:block;width:100%;height:auto}

/* Tech hero grid */
.hero-grid{display:grid;grid-template-columns:var(--fig1-col-figure) var(--fig1-col-text);gap:var(--gap);align-items:center}
.hero-art img{width:900px;height:auto;display:block;margin-left:-4rem}
.hero-copy{padding-inline:var(--col-pad);display:flex;align-items:center}
.hero-copy h1{font-size:clamp(3rem,5vw,4rem);margin:0;color:#fff}

/* Floating background image (parallax) */
.floating-bg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0.3;pointer-events:none;width:80%;max-width:1000px;height:auto;filter:saturate(1.05) brightness(1.05)}

/* Gradient headings on tech sections */
#scatter-title,#signatures-title{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 15%,var(--rose) 25%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#four-d-title{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 25%,var(--rose) 35%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#insight-title{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-soft) 30%,var(--rose) 60%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}


/* ---------- Fig1 (scatter) ---------- */
.fig-stack{position:relative;width:100%;aspect-ratio:720/400;overflow:hidden;transition:opacity var(--fig1-fade-duration) ease}
.fig-stack.is-hidden{opacity:0}
.fig-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center bottom;will-change:clip-path,opacity,transform}
.fig1-base{z-index:1}
.fig1-wipe{z-index:2;clip-path:inset(0 0 100% 0);animation:fig1WipeDown var(--fig1-wipe-duration) ease-out var(--fig1-wipe-delay) forwards}
.fig1-final{z-index:3;opacity:0;transform:scaleY(var(--fig1-scale-start));animation:fig1FadeIn var(--fig1-final-duration) ease-out var(--fig1-final-delay) forwards, fig1ScaleUp var(--fig1-scale-duration) ease-in var(--fig1-scale-delay) forwards}
@keyframes fig1WipeDown{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes fig1FadeIn{from{opacity:0} to{opacity:1}}
@keyframes fig1ScaleUp{from{transform:scaleY(var(--fig1-scale-start))} to{transform:scaleY(1)}}

/* ---------- Fig2 (signatures) ---------- */
.fig2-stack{position:relative;width:100%;aspect-ratio:720/400;overflow:visible} /* allow scale to breathe */
.fig2-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fig2-base{z-index:1;opacity:1}
.fig2-wipe{z-index:2;clip-path:inset(0 100% 0 0);opacity:1}
@keyframes fig2WipeLR{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes fig2FadeOut{from{opacity:1} to{opacity:0}}
.fig2-wipe.is-wiping{animation:fig2WipeLR var(--fig2-wipe) ease-out forwards}
.fig2-wipe.is-fading{animation:fig2FadeOut var(--fig2-fade) ease-out forwards}

/* ---------- Fig3 (3D->4D) ---------- */
.fig3-stack{position:relative;width:100%;aspect-ratio:720/400;overflow:hidden}
.fig3-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity var(--fig3-loop-fade) ease}
.fig3-frame1{z-index:1;opacity:1}
.fig3-frame2{z-index:2;opacity:0}
.fig3-frame3{z-index:3;opacity:1;clip-path:inset(0 0 100% 0)}
@keyframes fig3WipeDown{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
.fig3-frame3.is-wiping{animation:fig3WipeDown var(--fig3-wipe) ease-out forwards}

/* Tech footer (dark page variant) */
.site-footer.dark{background:#2c2c2c;color:#f1f1f1;border-top-color:rgba(255,255,255,0.08)}
.dark .copy{color:#fff}

/* Desktop/tablet tech layout & unified scaling */
@media (min-width:1000px){
  .tech-section .grid-2{column-gap:var(--tech-col-gap) !important;}

  /* Section-specific column order */
  .tech-section[aria-labelledby="scatter-title"]   .grid-2{grid-template-columns:var(--fig1-col-figure) var(--fig1-col-text)}
  .tech-section[aria-labelledby="signatures-title"] .grid-2{grid-template-columns:var(--fig2-col-text) var(--fig2-col-figure)}
  .tech-section[aria-labelledby="four-d-title"]    .grid-2{grid-template-columns:var(--fig3-col-figure) var(--fig3-col-text)}
  .tech-section[aria-labelledby="signatures-title"] .grid-2>.tech-copy{order:1}
  .tech-section[aria-labelledby="signatures-title"] .grid-2>.tech-art{order:2}

  /* Copy widths + type scales */
  .tech-section[aria-labelledby="scatter-title"] .tech-copy{width:min(100%,var(--scatter-step-w)) !important}
  .tech-section[aria-labelledby="scatter-title"] .tech-copy p{font-size:var(--scatter-step-fs) !important}
  .tech-section[aria-labelledby="scatter-title"] .tech-copy h2{font-size:var(--scatter-step-h2) !important}

  .tech-section[aria-labelledby="signatures-title"] .tech-copy{width:min(100%,var(--sign-step-w)) !important}
  .tech-section[aria-labelledby="signatures-title"] .tech-copy p{font-size:var(--sign-step-fs) !important}
  .tech-section[aria-labelledby="signatures-title"] .tech-copy h2{font-size:var(--sign-step-h2) !important}

  .tech-section[aria-labelledby="four-d-title"] .tech-copy{width:min(100%,var(--fourd-step-w)) !important}
  .tech-section[aria-labelledby="four-d-title"] .tech-copy p{font-size:var(--fourd-step-fs) !important}
  .tech-section[aria-labelledby="four-d-title"] .tech-copy h2{font-size:var(--fourd-step-h2) !important}

  /* Unified figure scale knob */
  :root{
    --scatter-img-scale-step:var(--tech-img-scale);
    --sign-img-scale-step:   var(--tech-img-scale);
    --fourd-img-scale-step:  var(--tech-img-scale);
  }
  .tech-section[aria-labelledby="scatter-title"] .fig-stack{transform:scale(var(--scatter-img-scale-step));transform-origin:center}
  .tech-section[aria-labelledby="signatures-title"] .fig2-stack{transform:scale(var(--sign-img-scale-step));transform-origin:center}
  .tech-section[aria-labelledby="four-d-title"]   .fig3-stack{transform:scale(var(--fourd-img-scale-step));transform-origin:center}

  /* Subtle inner padding */
  .tech-section .tech-art,.tech-section .tech-copy{padding-inline:max(var(--col-pad),6px)}
}

/* LG-only spacing tightening (1200–1299px) */
@media (min-width:1200px) and (max-width:1299px){ :root{ --tech-col-gap:var(--col-gap-lg); } }

/* MD-only spacing tightening (1000–1199px) */
@media (min-width:1000px) and (max-width:1199px){ :root{ --tech-col-gap:var(--col-gap-md); } }

/* Tech mobile layout */
@media (max-width:999px){
  .grid-2{grid-template-columns:1fr;align-items:start}
  .hero-grid{grid-template-columns:1fr;text-align:center;row-gap:var(--gap)}
  .hero-art img{width:100%;max-width:720px;margin-inline:auto}
  .hero-copy{display:block;margin:0;padding-inline:0}
  .hero-copy h1{text-align:center;margin:var(--gap) 0}
  .tech-hero{padding:86px 0 var(--gap)}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .fig1-wipe,.fig1-final{animation:none !important;clip-path:inset(0 0 0 0) !important;opacity:1 !important;transform:none !important}
  .fig2-wipe{animation:none !important;clip-path:inset(0 0 0 0) !important;opacity:1 !important}
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-top:4rem}

/* Contact hero (image + title) */
.title-container{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr);
  align-items:center;gap:clamp(16px,4vw,32px);
}
.title-container img{width:100%;height:auto;object-fit:contain;display:block;justify-self:start;max-width:1200px}
.title-container h1{
  margin:0 0 -10rem -8rem;color:#000;font-size:clamp(2.5rem,6vw,5rem);line-height:1.1;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  justify-self:center;text-align:center;overflow-wrap:anywhere;padding-inline:0.5rem;
}
@media (max-width:1100px) and (min-width:769px){
  .title-container{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr)}
  .title-container h1{font-size:clamp(2.2rem,5vw,4rem);margin:0 0 -10rem 0}
}

/* Contact — mobile */
@media (max-width:768px){
  .contact-container{grid-template-columns:1fr;margin-top:2rem}
  .page-hero{text-align:center}
  .title-container{grid-template-columns:1fr;align-items:center;text-align:center}
  .title-container img{max-width:1080px;margin-inline:auto}
  .title-container h1{margin:0;justify-self:center;text-align:center;font-size:5rem}
}

/* Center the last tech section "The Value of 4D" */
.tech-section[aria-labelledby="insight-title"] .container{display:flex;justify-content:center}
.tech-section[aria-labelledby="insight-title"] .centered-copy{text-align:center;margin-inline:auto;max-width:890px}

/* Contact hero — match Tech hero (≥1000px) */
@media (min-width:1000px){
  .title-container{grid-template-columns:var(--fig1-col-figure) var(--fig1-col-text) !important;align-items:center}
  .title-container h1{margin:0 !important;justify-self:start;align-self:center;text-align:left;font-size:clamp(3rem,5vw,4rem)}
  .title-container img{max-width:1000px;margin-left:-4rem}
}
@media (max-width:999px){
  .title-container{grid-template-columns:1fr !important}
  .title-container h1{margin:var(--gap) 0 0 !important;justify-self:center;text-align:center}
  /* Tech page only: bump text size on mobile */
  body.dark.tech-page{font-size:1rem}
  body.dark.tech-page h2{font-size:1.6rem}
  body.dark.tech-page p{font-size:1.1rem}
}

/* Reduce spacing between "From 3D to 4D" and "The Value of 4D" */
.tech-section[aria-labelledby="four-d-title"]{padding-bottom:calc(var(--section-padY) / 1.5)}
.tech-section[aria-labelledby="insight-title"]{padding-top:calc(var(--section-padY) / 1.5)}

/* =========================================================
   TECH PAGE — Mobile figure spacing (FIXED transform for fig1-final)
   ========================================================= */
@media (max-width:999px){
  :root{ --m-fig-gutter:-30px; } /* tighten or overscan by making this negative */

  /* Remove column padding; gutters controlled below */
  .tech-section .tech-art{ padding-inline:0 !important; }

  /* Fig 1: equal small gutters */
  .tech-section[aria-labelledby="scatter-title"] .fig-stack{
    width:calc(100vw - (var(--m-fig-gutter) * 2)) !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw + var(--m-fig-gutter)) !important;
    margin-right:calc(50% - 50vw + var(--m-fig-gutter)) !important;
  }

  /* Fig 2: edge-to-edge full-bleed */
  .tech-section[aria-labelledby="signatures-title"] .fig2-stack{
    width:100vw !important; max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  }

  /* Fig 3: equal small gutters, avoid cropping */
  .tech-section[aria-labelledby="four-d-title"] .fig3-stack{
    width:calc(100vw - (var(--m-fig-gutter) * 2)) !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw + var(--m-fig-gutter)) !important;
    margin-right:calc(50% - 50vw + var(--m-fig-gutter)) !important;
    overflow:visible;
  }

  /* Ensure images fill stacks without cropping.
     IMPORTANT: do NOT clobber transforms on .fig1-final, which the scroll JS animates. */
  .tech-section .fig-stack img,
  .tech-section .fig2-stack img,
  .tech-section .fig3-stack img{
    width:100% !important; height:100% !important; object-fit:contain !important;
  }
  /* Keep transforms disabled for most images, BUT allow fig1-final to animate */
  .tech-section .fig-stack img:not(.fig1-final),
  .tech-section .fig2-stack img,
  .tech-section .fig3-stack img{
    transform:none !important;
  }
  .tech-section .fig-stack .fig1-final{
    will-change: transform, opacity; /* smooth scrolling animation */
  }

  /* Extra gap before Fig1 (hero → Fig1) */
  .tech-section[aria-labelledby="scatter-title"]{
    padding-top: calc(var(--section-padY) * 1) !important;
  }

  /* Prevent horizontal scrollbars from full-bleed/gutter math */
  body.dark.tech-page{ overflow-x:hidden; }
}


/* Tech page — extra gap before Fig1 on mobile */
@media (max-width: 999px){
  .tech-section[aria-labelledby="scatter-title"]{
    padding-top: calc(var(--section-padY) * 1) !important;
  }
}

/* ===== Contact page responsive stacking ===== */
@media (max-width: 999px){
  .contact-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .contact-container .page-hero{
    order: 1;
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }

  .contact-container .contact-form{
    order: 2;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}

/* === TECH (mobile): prevent sideways drag / hidden overflow === */
@media (max-width: 999px){
  /* 1) Stop intentional overscan that exceeds the viewport */
  :root{ --m-fig-gutter: 0px; } /* was -30px; negative makes width > 100vw */

  /* 2) Hard-lock page width to viewport on mobile */
  html, body{ overflow-x: hidden; }

  /* 3) Use dynamic viewport units when available to avoid iOS rounding glitches */
  @supports (width: 100dvw){
    /* Fig1 + Fig3 (equal gutters → true full-bleed without overflow) */
    .tech-section[aria-labelledby="scatter-title"] .fig-stack,
    .tech-section[aria-labelledby="four-d-title"] .fig3-stack{
      width: 100dvw !important;
      margin-left: calc(50% - 50dvw) !important;
      margin-right: calc(50% - 50dvw) !important;
      max-width: none !important;
    }
    /* Fig2 (already full-bleed) */
    .tech-section[aria-labelledby="signatures-title"] .fig2-stack{
      width: 100dvw !important;
      max-width: 100dvw !important;
      margin-left: calc(50% - 50dvw) !important;
      margin-right: calc(50% - 50dvw) !important;
    }
  }
}

/* === TECH page (mobile): keep dark header locked + shadow on scroll === */
@media (max-width: 999px){
  /* Pin the header so it doesn't retract when touch-drag scrolling */
  body.dark.tech-page .site-header{
    position: fixed;      /* instead of sticky for iOS reliability */
    top: 0; left: 0; right: 0;
    z-index: 1000;
    will-change: transform;  /* improves iOS scroll stability */
    transform: translateZ(0);
  }

  /* Offset main content so it's not hidden behind the fixed header */
  body.dark.tech-page main{
    padding-top: calc(var(--nav-offset) + 10px);
  }
}

/* === Tech (mobile): remove 1px seam under header at top === */
@media (max-width: 999px){
  /* When the mobile sheet is CLOSED, kill its bottom border & shadow */
  body.dark.tech-page .site-header .nav:not(.open){
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* When the mobile sheet is OPEN, keep the subtle divider/shadow */
  body.dark.tech-page .site-header .nav.open{
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Keep the header fixed and crisp on iOS */
  body.dark.tech-page .site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transform: translateZ(0);
    will-change: transform;
  }

  /* Ensure content isn’t hidden behind the fixed header */
  body.dark.tech-page main{
    padding-top: calc(var(--nav-offset) + 10px);
  }
}

/* Tech (mobile): header pinned + correct content offset */
@media (max-width: 999px){
  body.dark.tech-page .site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transform: translateZ(0);
    will-change: transform;
  }

  /* IMPORTANT: remove any +10px padding you added earlier */
  body.dark.tech-page main{
    padding-top: var(--nav-offset) !important; /* was calc(var(--nav-offset) + 10px) */
  }
}

/* Contact form: unify fonts across inputs + textarea + placeholders */
.contact-form input,
.contact-form textarea{
  font-family: inherit;       /* match site/body font */
  font-size: 1rem;
  color: #111;
}

/* Placeholders (modern) */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-family: inherit;       /* ensure placeholder isn’t monospace/system */
  font-size: 1rem;
  color: #111;
  opacity: 1;
}

/* WebKit & legacy fallbacks */
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder{
  font-family: inherit; font-size: 1rem; color: #111; opacity: 1;
}
.contact-form input:-ms-input-placeholder,
.contact-form textarea:-ms-input-placeholder{
  font-family: inherit; font-size: 1rem; color: #111; opacity: 1;
}

/* === Tech: "The Value of 4D" text box widths === */
:root{
  --insight-w-desktop: 750px;  /* set your desktop width here */
  --insight-w-mobile:  750px;  /* set your mobile width here */
  --insight-w-active:  var(--insight-w-desktop);
}

@media (max-width: 999px){
  :root{ --insight-w-active: var(--insight-w-mobile); }
}

/* Apply the width to the centered-copy wrapper */
.tech-section[aria-labelledby="insight-title"] .centered-copy{
  width: min(92%, var(--insight-w-active));
  max-width: none;            /* override previous max-width */
  margin-inline: auto;
  text-align: center;
}

/* =========================
   Tech page: centered text on mobile
   ========================= */
@media (max-width: 999px){
  body.dark.tech-page .tech-copy {
    text-align: center;               /* center text */
    margin-inline: auto;              /* keep even space left/right */
    width: min(92%, 700px);           /* normal readable width */
    padding-inline: 1rem;             /* ensures side padding */
  }

  body.dark.tech-page .tech-copy h2 {
    text-align: center;               /* center section headings */
  }
}

/* =========================
   Contact page: keep light header pinned on mobile
   ========================= */
@media (max-width: 999px){
  /* Pin the light header (Contact page header uses .site-header.light) */
  .site-header.light{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transform: translateZ(0);
    will-change: transform;
  }

  /* Offset page content so it doesn't slide under the fixed header */
  body:not(.dark) main{
    padding-top: var(--nav-offset) !important;
  }

  /* Match tech page sheet behavior: no divider when closed, subtle divider when open */
  .site-header.light .nav:not(.open){
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .site-header.light .nav.open{
    border-bottom: 1px solid #eee !important;
    box-shadow: var(--shadow-sm) !important;
  }
}


/* === Tech page — mobile-only tweaks (fig1–fig3) === */
@media (max-width: 999px){
  .fig3-stack{position:relative;width:100%;aspect-ratio:720/600;overflow:hidden}

  /* 1) Left-justify the textboxes in fig1, fig2, fig3 */
  body.dark.tech-page .tech-section[aria-labelledby="scatter-title"]   .tech-copy,
  body.dark.tech-page .tech-section[aria-labelledby="signatures-title"] .tech-copy,
  body.dark.tech-page .tech-section[aria-labelledby="four-d-title"]    .tech-copy{
    text-align: left !important;     /* paragraphs left */
    margin-inline: auto;             /* keep same centered block width */
  }

  /* 2) But keep their titles centered */
  body.dark.tech-page .tech-section[aria-labelledby="scatter-title"]   .tech-copy h2,
  body.dark.tech-page .tech-section[aria-labelledby="signatures-title"] .tech-copy h2,
  body.dark.tech-page .tech-section[aria-labelledby="four-d-title"]    .tech-copy h2{
    text-align: left !important;
  }

  /* 3) fig3: fit screen width with 10px gap each side */
  .tech-section[aria-labelledby="four-d-title"] .fig3-stack{
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    margin-left:  auto !important;
    margin-right: auto !important;
  }

  @supports (width: 100dvw){
    .tech-section[aria-labelledby="four-d-title"] .fig3-stack{
      width: calc(100dvw - 20px) !important;
    }
  }
}


/* ==== iOS right-shift fix: Tech page, mobile only ==== */

/* Stop iOS auto text zoom from nudging widths */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Make tech sections truly full-width on mobile so figures don't need vw hacks */
@media (max-width: 999px){
  body.dark.tech-page .tech-section > .container{
    width: 100% !important;
    margin: 0 !important;
  }

  /* Figures: simple full-width, no negative margins or vw math */
  body.dark.tech-page .tech-section .fig-stack,
  body.dark.tech-page .tech-section .fig2-stack,
  body.dark.tech-page .tech-section .fig3-stack{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Remove side padding added earlier; your .tech-copy text is still centered/tightened elsewhere */
  body.dark.tech-page .tech-section .tech-art,
  body.dark.tech-page .tech-section .tech-copy{
    padding-inline: 0 !important;
  }

  /* Final guard: no horizontal growth from any off-canvas pixels */
  body.dark.tech-page,
  body.dark.tech-page .merged-stack,
  body.dark.tech-page .tech-section{
    overflow-x: clip;
  }
  @supports not (overflow-x: clip){
    body.dark.tech-page,
    body.dark.tech-page .merged-stack,
    body.dark.tech-page .tech-section{
      overflow-x: hidden;
    }
  }
}

@media (min-width:769px) and (max-width:999px){
  body.dark.tech-page main{ padding-top: 0 !important; }                 /* no global gap */
  body.dark.tech-page .tech-hero{ padding-top: var(--nav-offset) !important; } /* offset lives inside hero */
}

:root{
  --fig1-max-tablet: 700px;
  --fig2-max-tablet: 680px;
  --fig3-max-tablet: 500px; /* e.g., let Fig 3 run larger */
}
@media (max-width: 999px){
  body.dark.tech-page .tech-section[aria-labelledby="scatter-title"]    .fig-stack { max-width: var(--fig1-max-tablet) !important;width: 100% !important;                            /* stay responsive */
    margin-left: auto !important;
    margin-right: auto !important; }
  body.dark.tech-page .tech-section[aria-labelledby="signatures-title"] .fig2-stack{ max-width: var(--fig2-max-tablet) !important;width: 100% !important;                            /* stay responsive */
    margin-left: auto !important;
    margin-right: auto !important; }
  body.dark.tech-page .tech-section[aria-labelledby="four-d-title"]     .fig3-stack{ max-width: var(--fig3-max-tablet) !important;
  width: 100% !important;                            /* stay responsive */
    margin-left: auto !important;
    margin-right: auto !important; }
}