/* ═══════════════════════════════════════════════════════════
   SE·TL — "Deep Field"
   The colour and type tokens this file relies on are written
   into the page by app/theme.php, computed from the theme
   chosen in the admin. Everything here is layout and shape.
   ═══════════════════════════════════════════════════════════ */
:root{ --max:1180px; --pad:56px; --r:13px; --wt-body:400; }
@media(max-width:820px){ :root{ --pad:22px } }
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:var(--body-lh);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

.in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal);color:var(--on-teal);padding:12px 20px;
  font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ── Reveal on scroll ───────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
/* Renamed from .rv.in — "in" collided with the unrelated .in content-
   wrapper class (max-width + 56px side padding) below, so every card that
   finished its reveal animation silently picked up that 56px of padding
   on top of its own. See assets/js/site.js. */
.rv.shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ═══ HEADER ═══════════════════════════════════════════════ */
header{
  position:sticky;top:0;z-index:100;
  background:var(--veil);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hd{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{
  font-family:var(--f-display);font-weight:800;font-size:19px;
  letter-spacing:-.015em;display:flex;align-items:center;gap:9px;flex-shrink:0;
}
.logo .dot{color:var(--teal)}
.logo img{height:32px;width:auto;max-width:190px;object-fit:contain}

nav.main{flex:1;display:flex;justify-content:center;min-width:0}
nav.main ul{display:flex;gap:22px;align-items:center}
nav.main a{
  font-size:13.5px;font-weight:500;color:var(--dim);white-space:nowrap;
  position:relative;padding:6px 0;transition:color .22s;
}
@media(max-width:1120px) and (min-width:941px){
  nav.main ul{gap:15px}
  nav.main a{font-size:13px}
}
nav.main a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--teal);transition:right .28s cubic-bezier(.22,1,.36,1);
}
nav.main a:hover,nav.main a.active{color:var(--ink)}
nav.main a:hover::after,nav.main a.active::after{right:0}

.hd-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.lang{
  display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  font-family:var(--f-mono);font-size:11px;
}
.lang a,.lang button{padding:6px 10px;color:var(--faint);transition:all .2s;display:block}
.lang a[aria-pressed="true"],.lang button[aria-pressed="true"]{background:var(--teal);color:var(--on-accent);font-weight:500}
.cta-hd{
  background:var(--teal);color:var(--on-accent);font-weight:600;font-size:13.5px;
  padding:10px 19px;border-radius:8px;transition:transform .22s,box-shadow .22s;
}
.cta-hd:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--teal) 60%,transparent)}

.burger{display:none;width:40px;height:40px;position:relative}
.burger span{
  position:absolute;left:10px;width:20px;height:1.6px;background:var(--ink);
  transition:transform .3s,opacity .2s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media(max-width:940px){
  nav.main{
    position:fixed;inset:70px 0 auto;background:var(--veil-solid);
    backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:12px var(--pad) 26px;display:none;
  }
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch;gap:0}
  nav.main li{border-bottom:1px solid var(--line)}
  nav.main a{display:block;padding:15px 0;font-size:15.5px}
  nav.main a::after{display:none}
  .burger{display:block}
  .cta-hd{display:none}
}

/* ═══ HERO ═════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;min-height:var(--slider-h);display:flex;align-items:center}
.mesh{
  position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 44% at 22% 26%, color-mix(in srgb,var(--teal) calc(var(--mesh-a)*100%),transparent), transparent 68%),
    radial-gradient(34% 40% at 76% 30%, color-mix(in srgb,var(--coral) calc(var(--mesh-b)*100%),transparent), transparent 66%),
    radial-gradient(46% 52% at 55% 84%, color-mix(in srgb,var(--teal) calc(var(--mesh-c)*100%),transparent), transparent 70%);
  filter:blur(26px);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.09)}
}
.gridlines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(74% 66% at 50% 34%,#000 18%,transparent 82%);
  mask-image:radial-gradient(74% 66% at 50% 34%,#000 18%,transparent 82%);
}
@media(prefers-reduced-motion:reduce){ .mesh{animation:none} }

.hero .in{position:relative;z-index:2;width:100%;padding-top:66px;padding-bottom:60px}
.slides{position:relative}
.slide{
  display:none;
  animation:slideIn var(--slide-fade) cubic-bezier(.22,1,.36,1) both;
}
.slide.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .slide{animation:none} }

.eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:20px;display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--teal);flex-shrink:0}
h1{
  font-family:var(--f-display);font-weight:var(--wt-display);
  font-size:var(--fs-h1);line-height:.99;letter-spacing:var(--ls-head);
  max-width:15ch;text-wrap:balance;
}
h1 em{
  font-style:normal;
  background:linear-gradient(104deg,var(--teal) 6%,var(--coral) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin-top:22px;max-width:52ch;color:var(--dim);font-size:17px;line-height:1.62}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;padding:14px 27px;border-radius:9px;
  transition:transform .22s,box-shadow .22s,background .22s,border-color .22s;
}
.btn-solid{background:var(--teal);color:var(--on-accent);box-shadow:0 12px 34px -12px color-mix(in srgb,var(--teal) 62%,transparent)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px color-mix(in srgb,var(--teal) 75%,transparent)}
.btn-ghost{border:1px solid var(--line-hi);color:var(--ink);background:var(--glass-1)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--teal)}

/* terminal */
.term{
  margin-top:44px;max-width:560px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);backdrop-filter:blur(8px);overflow:hidden;
  box-shadow:0 24px 56px -24px var(--shadow);
}
.term-bar{
  display:flex;align-items:center;gap:7px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--glass-1);
}
.term-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-hi)}
.term-bar span{margin-left:8px;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.term-body{padding:16px 18px;font-family:var(--f-mono);font-size:12.5px;line-height:2}
.term-body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-teal{color:var(--teal)}
.c-coral{color:var(--coral)}
.c-dim{color:var(--faint)}
.cursor{
  display:inline-block;width:7px;height:14px;background:var(--teal);
  vertical-align:-2px;animation:blink 1.05s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .cursor{animation:none} }

/* slide media — panel placement (sits where the terminal sits) */
.hero-media{
  margin-top:44px;max-width:560px;position:relative;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);box-shadow:0 24px 56px -24px var(--shadow);
}
.hero-media img,.hero-media video,.hero-media iframe{
  display:block;width:100%;height:100%;object-fit:cover;border:0;
}
.hero-media .play-note{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--chip);border:1px solid var(--line-hi);
  padding:5px 10px;border-radius:20px;
}

/* slide media — background placement */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;border:0;pointer-events:none;
}
/* Scrim uses the theme background colour, so it darkens a dark theme and
   lightens a light one — text keeps its contrast either way. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--veil-solid) 0%, var(--veil) 46%,
    color-mix(in srgb, var(--bg) 46%, transparent) 100%);
}
.hero.has-bg .mesh{opacity:.42}
.hero.has-bg .gridlines{opacity:.18}
@media(max-width:760px){
  .hero-bg::after{background:var(--veil-solid)}
}

/* slider controls */
.sl-ctl{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:16px;
}
.dots{display:flex;gap:8px}
.dots button{
  width:26px;height:3px;border-radius:2px;background:var(--line-hi);transition:background .3s;
}
.dots button[aria-current="true"]{background:var(--teal)}
.arrow{
  width:34px;height:34px;border:1px solid var(--line-hi);border-radius:50%;
  display:grid;place-items:center;color:var(--dim);transition:all .22s;
}
.arrow:hover{border-color:var(--teal);color:var(--teal)}

/* ═══ STAT RAIL ════════════════════════════════════════════ */
.rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--glass-0)}
.rail .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{padding:28px 0 28px 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
@media(max-width:700px){
  .rail .in{grid-template-columns:1fr 1fr}
  .stat{padding-left:20px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
}
.stat b{
  display:block;font-family:var(--f-display);font-weight:800;font-size:31px;
  letter-spacing:-.032em;font-variant-numeric:tabular-nums;
}
.stat small{
  display:block;margin-top:5px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
}
.stat p{margin-top:8px;font-size:13px;color:var(--faint);line-height:1.5;max-width:26ch}

/* ═══ SECTIONS ═════════════════════════════════════════════ */
section{scroll-margin-top:78px}
.sec{padding:64px 0}
.sec.bordered{border-top:1px solid var(--line)}
.sec-head{margin-bottom:32px;max-width:58ch}
.sec-key{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--teal);margin-bottom:14px;
}
.sec-head h2{
  font-family:var(--f-display);font-weight:var(--wt-display);
  font-size:var(--fs-h2);line-height:1.08;letter-spacing:var(--ls-h2);text-wrap:balance;
}
.sec-head p{margin-top:14px;color:var(--dim);font-size:16px;line-height:1.62}

/* ── Services ─────────────────────────────────────────────── */
/* Selector matches the template's actual container class (svc-grid) — it
   was ".svc" here for a while, which never matched anything, so this whole
   grid silently fell back to plain block flow and every card stacked full
   width. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
/* "Stacked list" layout option (Settings → Layout → Services layout). Each
   card becomes a full-width horizontal band instead of a column. */
.svc-grid.list{grid-template-columns:1fr}
.svc-grid.list .svc-card{flex-direction:row;align-items:center;gap:22px;padding:22px 26px}
.svc-grid.list .svc-card p{flex:1 1 auto}
.svc-grid.list .chips{flex:0 0 auto}
@media(max-width:640px){.svc-grid.list .svc-card{flex-direction:column;align-items:flex-start}}
.svc-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px 32px;
  background:linear-gradient(180deg,var(--glass-2),var(--glass-0));
  display:flex;flex-direction:column;gap:14px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--teal),transparent 72%);
}
.svc-card.lead::before{background:linear-gradient(90deg,var(--coral),var(--teal) 76%,transparent)}
.svc-card:hover{transform:translateY(-5px);border-color:var(--line-hi);box-shadow:0 22px 48px -22px var(--shadow)}
.svc-ico{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 11%,transparent);border:1px solid color-mix(in srgb,var(--teal) 24%,transparent);
  font-size:20px;line-height:1;
}
.svc-card.lead .svc-ico{background:color-mix(in srgb,var(--coral) 11%,transparent);border-color:color-mix(in srgb,var(--coral) 26%,transparent)}
.svc-key{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.svc-card.lead .svc-key{color:var(--coral)}
.svc-card h3{font-family:var(--f-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.02em}
.svc-card p{color:var(--dim);font-size:14.5px;line-height:1.63;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{
  font-family:var(--f-mono);font-size:10.5px;border:1px solid var(--line);
  border-radius:5px;padding:4px 9px;color:var(--dim);
}
.more{font-size:13.5px;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:6px}
.more svg{transition:transform .22s}
.svc-card:hover .more svg{transform:translateX(4px)}

/* ── Filters + portfolio grid ─────────────────────────────── */
.filters{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.filters button{
  font-size:13px;font-weight:600;padding:8px 17px;border-radius:22px;
  border:1px solid var(--line);color:var(--dim);transition:all .22s;
}
.filters button:hover{border-color:var(--line-hi);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:800px){.grid.g2{grid-template-columns:1fr}}
/* "Horizontal (cascaded)" layout option (Settings → Layout → Products
   layout): one column of full-width rows, image on the left. */
.grid.horizontal{grid-template-columns:1fr}
.grid.horizontal .tile{flex-direction:row}
.grid.horizontal .thumb{
  aspect-ratio:auto;width:280px;flex:0 0 280px;
  /* Row layout: the thumb sits on the left, so only its left edge touches
     the card's rounded corner — top-right/bottom-right are internal seams
     against .tile-body and stay square. */
  border-radius:var(--radius-media) 0 0 var(--radius-media);
  border-bottom:none;border-right:1px solid var(--line);
}
.grid.horizontal .tile-body{justify-content:center}
@media(max-width:760px){
  .grid.horizontal .tile{flex-direction:column}
  .grid.horizontal .thumb{
    width:100%;flex:none;aspect-ratio:16/10;
    /* Back to a column layout at this width, so the thumb is on top again. */
    border-radius:var(--radius-media) var(--radius-media) 0 0;
    border-bottom:1px solid var(--line);border-right:none;
  }
}

.tile{
  border:1px solid var(--line);border-radius:var(--radius-media);overflow:hidden;
  background:var(--surf);text-align:left;width:100%;
  transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
.tile:hover{transform:translateY(-5px);border-color:var(--line-hi);box-shadow:0 24px 52px -24px var(--shadow)}
.tile.hide{display:none}
.thumb{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--plate);
  /* Belt-and-braces: .tile already clips to its own border-radius via
     overflow:hidden, which is enough in most browsers, but a photo (an
     <img>, which some engines promote to its own compositing layer) can
     still paint past that clip right at the corner instead of being cut
     to match it. Giving .thumb the same top-corner radius directly means
     the corner is genuinely rounded pixel-for-pixel, not just clipped by
     a parent that may or may not be respected. */
  border-radius:var(--radius-media) var(--radius-media) 0 0;
}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tile:hover .thumb img{transform:scale(1.05)}
/* Settings → Layout & imagery → Padding around thumbnail photos. Project/
   product/article/job cards only (.tile), never Team (.member) or the
   testimonial avatar, which isn't wrapped in either. Sizing the photo by
   inset instead of leaving width/height:100% is required here — an
   absolutely-positioned box sizes and positions against its parent's
   padding box regardless of the parent's own `padding`, so this is the one
   way to actually pull the photo in from the card's edge on all 4 sides.
   An <img> is a replaced element, and browsers size a replaced element's
   auto width/height from its own intrinsic dimensions rather than solving
   it from opposing inset values the way a plain box would — so `inset` +
   `width/height:auto` here silently ignores the right/bottom inset and the
   photo overflows past them. Pinning position with top/left and sizing
   with an explicit calc() sidesteps that entirely. */
.tile .thumb img{
  position:absolute;
  top:var(--thumb-inset);left:var(--thumb-inset);
  width:calc(100% - (var(--thumb-inset) * 2));
  height:calc(100% - (var(--thumb-inset) * 2));
  border-radius:var(--radius-media);
}
.tile .thumb .ph{
  inset:var(--thumb-inset);
  border-radius:var(--radius-media);
  overflow:hidden;
}
.ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.03em;
  color:rgba(255,255,255,.16);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 92% at 78% 16%,color-mix(in srgb,var(--coral) 30%,transparent),transparent 62%),
    radial-gradient(72% 100% at 16% 86%,color-mix(in srgb,var(--teal) 34%,transparent),transparent 64%);
}
.ph::after{
  content:"";position:absolute;inset:0;opacity:.34;
  background-image:linear-gradient(var(--grid-fine) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px);
  background-size:24px 24px;
}
.ph span{position:relative;z-index:2}
.tag{
  position:absolute;top:12px;left:12px;z-index:3;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;color:var(--teal);
  background:var(--chip);border:1px solid var(--line-hi);
  backdrop-filter:blur(6px);
}
.badge-media{
  position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:6px;
}
.badge-media i{
  font-style:normal;font-family:var(--f-mono);font-size:9.5px;
  padding:5px 8px;border-radius:5px;color:var(--ink);
  background:var(--chip);border:1px solid var(--line-hi);
  backdrop-filter:blur(6px);
}
.tile-body{
  padding:var(--card-pad-top) var(--card-pad-right) var(--card-pad-bottom) var(--card-pad-left);
  display:flex;flex-direction:column;gap:7px;flex:1;
}
.tile-body h3,.tile-body h4{font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:-.018em}
.tile-body p{color:var(--dim);font-size:13.5px;line-height:1.56;flex:1}
.meta{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;color:var(--faint);
  display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.meta .view{color:var(--teal)}
.empty{
  border:1px dashed var(--line-hi);border-radius:var(--r);
  padding:44px 24px;text-align:center;color:var(--faint);font-size:14px;
}

/* ── Article cards ────────────────────────────────────────── */
.art-cat{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral);
}
.art-date{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}

/* ── Team ─────────────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
.member{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surf);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s;
}
.member:hover{transform:translateY(-4px);border-color:var(--line-hi)}
/* Settings → Layout & imagery → Team photo shape. Independent of the card's
   own corner radius, so a circle photo can sit in a square-cornered card. */
.member .thumb{aspect-ratio:1/1;border-radius:var(--radius-photo)}
/* Settings → Layout & imagery → Card text padding. Shared with the
   project/product/article/job cards' .tile-body — one set of controls for
   the text padding on every card type, Team included. */
.member-body{padding:var(--card-pad-top) var(--card-pad-right) var(--card-pad-bottom) var(--card-pad-left)}
.member-body h3{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.018em}
.member-role{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:5px}
.member-body p{color:var(--dim);font-size:13px;line-height:1.55;margin-top:10px}
.exp{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.exp span{font-family:var(--f-mono);font-size:9.5px;border:1px solid var(--line);border-radius:4px;padding:3px 7px;color:var(--faint)}

/* ═══ CLIENT STRIP ═════════════════════════════════════════ */
.clients{border-bottom:1px solid var(--line);padding:34px 0;overflow:hidden}
.clients-lab{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);text-align:center;margin-bottom:24px;
}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-set{display:flex;align-items:center;gap:58px;padding-right:58px}
.client{
  flex-shrink:0;display:grid;place-items:center;height:42px;
  opacity:var(--client-op,.5);filter:grayscale(1);transition:opacity .3s,filter .3s;
}
.client:hover{opacity:1;filter:none}
.client img{max-height:38px;width:auto;object-fit:contain}
.client span{
  font-family:var(--f-display);font-weight:700;font-size:16.5px;
  letter-spacing:-.015em;color:var(--dim);white-space:nowrap;
}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .marquee-set{flex-wrap:wrap;justify-content:center;gap:34px;padding-right:0}
  .marquee-set.dup{display:none}
}

/* ═══ TESTIMONIALS ═════════════════════════════════════════ */
.quotes{position:relative;max-width:820px;margin:0 auto}
.quote{
  display:none;border:1px solid var(--line);border-radius:16px;
  padding:44px 46px 38px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-3),var(--glass-0));
  animation:qIn .5s cubic-bezier(.22,1,.36,1) both;
}
.quote.active{display:block}
@keyframes qIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.quote{animation:none}}
@media(max-width:640px){.quote{padding:32px 24px 28px}}
.quote::before{
  content:"”";position:absolute;top:-26px;right:26px;
  font-family:var(--f-display);font-weight:800;font-size:150px;line-height:1;
  color:var(--teal);opacity:.13;pointer-events:none;
}
.stars{display:flex;gap:3px;margin-bottom:20px;color:var(--coral)}
.quote blockquote{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(18px,2.3vw,23px);line-height:1.52;letter-spacing:-.017em;
  text-wrap:balance;
}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;
  display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 30%,transparent),color-mix(in srgb,var(--coral) 30%,transparent));
  font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--ink);
}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.byline b{display:block;font-family:var(--f-display);font-weight:700;font-size:15.5px;letter-spacing:-.015em}
.byline small{
  display:block;margin-top:3px;font-family:var(--f-mono);font-size:11px;
  color:var(--faint);letter-spacing:.03em;
}
.q-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}


/* ═══ CONTACT FORM ═════════════════════════════════════════ */
.cform{max-width:680px;margin:36px auto 0;text-align:left}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}
.cf-field{margin-bottom:14px}
.cf-field label{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
.cform input,.cform select,.cform textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
  color:var(--ink);padding:13px 15px;border-radius:9px;
  font-family:var(--f-body);font-size:15px;transition:border-color .2s,box-shadow .2s;
}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent);
}
.cform ::placeholder{color:var(--faint)}
.cf-consent{
  display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;
  font-size:13.5px;color:var(--dim);line-height:1.55;
}
.cf-consent input{width:auto;flex-shrink:0;margin-top:3px;accent-color:var(--teal)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-msg{padding:15px 18px;border-radius:9px;font-size:14.5px;margin-bottom:18px;line-height:1.55}
.cf-ok{background:color-mix(in srgb,var(--teal) 10%,transparent);border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);color:var(--teal)}
.cf-bad{background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.4);color:#FF9C9C}
.cform button[type=submit]{width:100%;justify-content:center;border:0}
.cform button[disabled]{opacity:.55;cursor:wait}

/* ═══ CONTACT BAND ═════════════════════════════════════════ */
.band{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:78px 0}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 120% at 50% 108%,color-mix(in srgb,var(--teal) 20%,transparent),transparent 68%);
}
.band .in{position:relative;z-index:2;text-align:center}
.band h2{
  font-family:var(--f-display);font-weight:var(--wt-display);
  font-size:clamp(28px,4.4vw,46px);line-height:1.05;letter-spacing:-.032em;
  max-width:20ch;margin:0 auto;text-wrap:balance;
}
.band p{margin:16px auto 0;max-width:52ch;color:var(--dim);font-size:16.5px}
.band .hero-cta{justify-content:center;margin-top:32px}

/* ═══ FOOTER ═══════════════════════════════════════════════ */
footer{border-top:1px solid var(--line);background:var(--glass-0)}
.ft-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding:56px 0 44px;
}
@media(max-width:820px){.ft-top{grid-template-columns:1fr;gap:34px}}
.ft-brand .logo{font-size:21px;margin-bottom:14px}
.ft-brand p{color:var(--dim);font-size:14.5px;line-height:1.65;max-width:38ch}
.socials{display:flex;gap:9px;margin-top:22px}
.socials a{
  width:36px;height:36px;border:1px solid var(--line);border-radius:9px;
  display:grid;place-items:center;color:var(--dim);transition:all .22s;
}
.socials a:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.ft-col h4{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:400;
}
.ft-col ul{display:flex;flex-direction:column;gap:11px}
.ft-col a,.ft-col span{color:var(--dim);font-size:14.5px;transition:color .2s}
.ft-col a:hover{color:var(--teal)}
.ft-bot{
  border-top:1px solid var(--line);padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11.5px;color:var(--faint);
}
.ft-bot ul{display:flex;gap:20px;flex-wrap:wrap}
.ft-bot ul a:hover{color:var(--teal)}

/* ═══ LIGHTBOX ═════════════════════════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  background:var(--lb-veil);backdrop-filter:blur(10px);
  padding:28px;overflow-y:auto;
}
.lb.open{display:block}
.lb-inner{
  max-width:960px;margin:0 auto;background:var(--surf);
  border:1px solid var(--line-hi);border-radius:15px;overflow:hidden;
  animation:pop .34s cubic-bezier(.22,1,.36,1);
}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lb-inner{animation:none}}
.lb-close{
  position:sticky;top:0;margin-left:auto;
  width:42px;height:42px;display:grid;place-items:center;
  color:var(--dim);font-size:24px;z-index:5;
}
.lb-close:hover{color:var(--ink)}
.lb-stage{position:relative;aspect-ratio:16/9;background:var(--plate);border-bottom:1px solid var(--line)}
.lb-stage img{width:100%;height:100%;object-fit:cover}
.lb-stage iframe{width:100%;height:100%;border:0;display:block}
.lb-body{padding:28px 30px 32px}
@media(max-width:640px){.lb-body{padding:22px}}
.lb-body .tagrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.lb-body .tagrow span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--line-hi);border-radius:5px;padding:4px 9px;
}
.lb-body h3{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.028em;line-height:1.14}
.lb-body .desc{color:var(--dim);font-size:15.5px;line-height:1.68;margin-top:14px;max-width:68ch}
.lb-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  margin-top:26px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.lb-facts div{background:var(--surf);padding:15px 16px}
.lb-facts dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.lb-facts dd{margin-top:5px;font-size:14.5px;font-weight:600}
.lb-thumbs{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}
.lb-thumbs button{
  width:82px;aspect-ratio:16/10;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);position:relative;transition:border-color .2s;
}
.lb-thumbs button[aria-current="true"]{border-color:var(--teal)}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-thumbs .vid{
  display:grid;place-items:center;background:color-mix(in srgb,var(--coral) 14%,transparent);
  color:var(--coral);font-family:var(--f-mono);font-size:9.5px;height:100%;
}
.lb-feats{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.lb-feats li{color:var(--dim);font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.lb-feats li::before{content:"✓";color:var(--teal);font-weight:700;flex-shrink:0}

/* ═══ LOADING ══════════════════════════════════════════════ */
.boot{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:grid;place-items:center;transition:opacity .5s;
}
.boot.gone{opacity:0;pointer-events:none}
.boot span{font-family:var(--f-mono);font-size:12px;color:var(--teal);letter-spacing:.2em}