/* ============================================================================
   ORCA DEVS — UI components
   Device frames, live embeds, screenshot slots, project cards, system builder,
   FAQ, forms, marquee.
   ========================================================================== */

/* ==========================================================================
   1. BROWSER FRAME + LIVE EMBED STAGE
   ========================================================================== */
.frame{
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--sh-3);
  overflow:hidden;
  position:relative;
}
.frame-bar{
  display:flex; align-items:center; gap:9px;
  height:38px; padding:0 12px;
  background:linear-gradient(180deg,#FCFBF7,#F0EEE7);
  border-bottom:1px solid var(--line-2);
  position:relative; z-index:3;
}
.dots{ display:flex; gap:6px; flex-shrink:0 }
.tl{ width:10px; height:10px; border-radius:50% }
.tl.r{ background:#FF5F57 } .tl.y{ background:#FEBC2E } .tl.g{ background:#28C840 }
.frame-url{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:7px;
  height:24px; padding:0 12px;
  border-radius:var(--pill);
  background:rgba(10,20,23,.05);
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame-url svg{ flex-shrink:0; opacity:.55 }
.frame-act{ display:flex; align-items:center; gap:6px; flex-shrink:0 }
.fbtn{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 11px; border-radius:var(--pill);
  background:rgba(10,20,23,.05); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  transition:background .18s, color .18s;
}
.fbtn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* the tinted area a scaled device sits inside */
.stage{
  position:relative;
  aspect-ratio:16/10;
  background:var(--tone, linear-gradient(160deg,#EFEDE6,#DFDCD2));
  overflow:hidden;
  display:grid; place-items:center;
  contain:layout paint;
}
.stage.portrait{ aspect-ratio:1/1 }
.stage.tallish{  aspect-ratio:4/3 }
.stage.wide{     aspect-ratio:16/9 }

.device{
  position:absolute; left:50%; top:50%;
  transform-origin:center center;
  transform:translate(-50%,-50%) scale(.9);
  opacity:0;
  transition:opacity .55s var(--ease-soft);
  display:flex; flex-direction:column; align-items:center;
}
.device.on{ opacity:1 }
.device.shelled{
  background:linear-gradient(165deg,#2A2E30,#131617 62%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 40px 90px -30px rgba(10,20,23,.6),
    0 10px 24px -12px rgba(10,20,23,.4);
}
.screen{
  overflow:hidden; background:#fff; position:relative; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.screen > iframe{ border:0; display:block }
.chin{ display:grid; place-items:center; width:100%; flex-shrink:0 }
.cam{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22) }
.brandchip{
  font-family:var(--mono); letter-spacing:.22em; color:rgba(255,255,255,.32);
  text-transform:uppercase;
}
.notch{
  position:absolute; left:50%; transform:translateX(-50%);
  border-radius:var(--pill); background:#000;
}
.pedestal{
  background:linear-gradient(180deg,#22282A,#14181A);
  border-radius:0 0 6px 6px;
  box-shadow:0 20px 40px -16px rgba(10,20,23,.7);
}

/* frames do not eat page scroll until clicked */
.stage[data-locked="1"] .device{ pointer-events:none }
.veil{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  opacity:0; transition:opacity .28s;
  pointer-events:none;
}
.stage[data-locked="1"]:hover .veil{ opacity:1 }
.veil span{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:8px 15px; border-radius:var(--pill);
  background:rgba(10,20,23,.86); color:var(--paper);
  backdrop-filter:blur(6px);
  box-shadow:var(--sh-2);
}
.skel{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  background:var(--tone, #EFEDE6);
  text-align:center; padding:20px;
}
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-100%);
}
@media (prefers-reduced-motion: no-preference){
  .skel::after{ animation:sheen 1.9s var(--ease-soft) infinite }
}
@keyframes sheen{ to{ transform:translateX(100%) } }

/* ==========================================================================
   2. CLICK-TO-LOAD POSTER  (heavy WebGL embeds never auto-load)
   ========================================================================== */
.poster{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center; gap:0;
  background:var(--tone, linear-gradient(160deg,#EFE7D6,#D8C6A6));
  cursor:pointer;
  border:0; width:100%; height:100%;
  text-align:center;
  transition:opacity .4s var(--ease-soft);
}
.poster::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(255,255,255,.28), transparent 70%),
    repeating-linear-gradient(135deg, rgba(10,20,23,.035) 0 2px, transparent 2px 9px);
}
.poster-inner{ position:relative; display:grid; gap:16px; justify-items:center; padding:26px }
.poster-play{
  width:62px; height:62px; border-radius:50%;
  background:rgba(10,20,23,.9); color:#fff;
  display:grid; place-items:center;
  box-shadow:var(--sh-3);
  transition:transform .3s var(--ease), background .3s;
}
.poster:hover .poster-play{ transform:scale(1.09); background:var(--tide-deep) }
.poster-title{ font-weight:650; font-size:16px; letter-spacing:-.015em; color:var(--ink) }
.poster-note{
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--ink-2);
  max-width:34ch;
}
.poster-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--pill);
  background:rgba(10,20,23,.08); border:1px solid var(--line-2); color:var(--ink-2);
}
.poster.gone{ opacity:0; pointer-events:none }

/* a heads-up rail beside a heavy embed */
.heavy-note{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-sm);
  background:var(--sun-wash); border:1px solid rgba(210,105,30,.2);
  font-size:13.5px; line-height:1.5; color:#7A3D10;
}
.heavy-note svg{ flex-shrink:0; margin-top:2px }
.heavy-note b{ font-weight:650 }

/* ==========================================================================
   3. REAL-SCREENSHOT SLOT
   Renders the image when present; an honest, non-fake pending state when not.
   ========================================================================== */
.shot{
  position:relative; overflow:hidden;
  background:var(--tone, linear-gradient(160deg,#EFEDE6,#DFDCD2));
  display:grid; place-items:center;
}
.shot img{ width:100%; height:100%; object-fit:contain; display:block }
.shot-pending{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; align-content:center; gap:14px;
  padding:28px; text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(10,20,23,.028) 0 10px, transparent 10px 20px),
    var(--tone, linear-gradient(160deg,#EFEDE6,#DFDCD2));
}
.shot-pending .ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(10,20,23,.06); border:1px solid var(--line-2); color:var(--ink-3);
}
.shot-pending .t{ font-weight:650; font-size:15px; letter-spacing:-.015em; color:var(--ink) }
.shot-pending .d{ font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ink-3); max-width:38ch }
.shot-pending code{
  font-family:var(--mono); font-size:10.5px;
  background:rgba(10,20,23,.07); padding:2px 6px; border-radius:5px; color:var(--ink-2);
}
.shot img[src] + .shot-pending{ display:none }

/* gallery of screenshots on a project page */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px }
.gallery figure{ margin:0 }
.gallery .frame{ box-shadow:var(--sh-2) }
.gallery figcaption{
  margin-top:11px; font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.5;
}

/* ==========================================================================
   4. PROJECT CARDS  (work index + featured on home)
   ========================================================================== */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:24px }
.pgrid.two{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) }

.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s;
  isolation:isolate;
}
.pcard:hover{ box-shadow:var(--sh-4); transform:translateY(-4px); border-color:var(--line) }
.pcard-vis{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--tone, linear-gradient(155deg,#EDEAE2,#DCD8CE));
  border-bottom:1px solid var(--line-2);
}
.pcard-vis img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .7s var(--ease) }
.pcard:hover .pcard-vis img{ transform:scale(1.035) }
.pcard-flag{ position:absolute; top:14px; left:14px; z-index:3 }
.pcard-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:13px; flex:1 }
.pcard-kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.pcard h3{
  font-family:var(--display);
  font-size:1.55rem; line-height:1.14; letter-spacing:-.032em; font-weight:600;
}
.pcard p{ font-size:15px; line-height:1.58; color:var(--ink-2); flex:1 }
.pcard-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:16px; margin-top:4px; border-top:1px solid var(--line-3);
}
.pcard-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; color:var(--ink);
  transition:gap .25s var(--ease);
}
.pcard:hover .pcard-go{ gap:11px; color:var(--tide-deep) }

/* a tall marquee card for the lead project */
.pcard.lead{ grid-column:1/-1 }
.pcard.lead .pcard-inner{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch }
.pcard.lead .pcard-vis{ aspect-ratio:auto; min-height:380px; border-bottom:0; border-right:1px solid var(--line-2) }
.pcard.lead .pcard-body{ padding:clamp(28px,3.4vw,46px); justify-content:center; gap:16px }
.pcard.lead h3{ font-size:clamp(1.8rem,3vw,2.5rem) }
@media (max-width:820px){
  .pcard.lead .pcard-inner{ grid-template-columns:1fr }
  .pcard.lead .pcard-vis{ min-height:0; aspect-ratio:16/10; border-right:0; border-bottom:1px solid var(--line-2) }
}

/* ==========================================================================
   5. SYSTEM BUILDER  — the interactive "what we build" section
   ========================================================================== */
.sysb{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.4vw,52px); align-items:start;
}
@media (max-width:940px){ .sysb{ grid-template-columns:1fr } }

/* the left column: the tile grid, then the hint underneath it */
.sysb > div:first-child{ display:grid; align-content:start; min-width:0 }

.sysb-picks{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:520px){ .sysb-picks{ grid-template-columns:1fr } }

.tile{
  position:relative; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:15px 16px;
  border-radius:var(--r-sm);
  background:var(--paper-2);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  transition:border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s;
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line) }
.tile .ti{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(10,20,23,.05); color:var(--ink-2);
  transition:background .25s, color .25s;
}
/* The label and its subtitle are two plain spans. Left inline they set on one
   line — "Kitchen displaytickets, timers, bump bar" — and the subtitle's
   margin was silently dropped, since vertical margins do nothing on an inline
   box. Stacking them properly is the whole fix. */
.tile > span:nth-child(2){ display:grid; gap:3px; min-width:0 }
.tile .tt{
  display:block;
  font-size:14.5px; font-weight:600; letter-spacing:-.018em; line-height:1.25;
  color:var(--ink);
}
.tile .ts{
  display:block;
  font-size:11.5px; line-height:1.4; color:var(--ink-3);
  letter-spacing:-.005em;
  overflow-wrap:anywhere;
}
.tile[aria-pressed="true"] .ts{ color:var(--tide-deep); opacity:.85 }
.tile .tk{
  width:21px; height:21px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
  color:transparent; transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.tile[aria-pressed="true"]{
  background:linear-gradient(160deg, var(--tide-wash), #F2F7FF);
  border-color:rgba(0,82,204,.28);
}
.tile[aria-pressed="true"] .ti{ background:var(--tide); color:#fff }
.tile[aria-pressed="true"] .tk{ background:var(--tide); border-color:var(--tide); color:#fff; transform:scale(1.06) }

.sysb-side{ display:grid; gap:14px; margin-top:16px }
.sysb-hint{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3); line-height:1.6;
  display:flex; gap:9px; align-items:flex-start;
}
.sysb-hint svg{ flex-shrink:0; margin-top:3px }

/* the canvas */
.sysb-canvas{
  position:relative;
  border-radius:var(--r-lg);
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(0,118,255,.08), transparent 70%),
    linear-gradient(165deg,#0A1B21,#061318);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--sh-4);
  overflow:hidden;
  padding:22px;
  min-height:470px;
  display:flex; flex-direction:column;
}
.sysb-canvas::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 45%, #000, transparent 78%);
  mask-image:radial-gradient(90% 70% at 50% 45%, #000, transparent 78%);
}
.sysb-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  position:relative; z-index:2; margin-bottom:8px;
}
.sysb-head .lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.sysb-count{
  font-family:var(--mono); font-size:11px; color:#66AAFF;
  padding:5px 11px; border-radius:var(--pill);
  background:rgba(102,170,255,.1); border:1px solid rgba(102,170,255,.22);
}

.sysb-map{ position:relative; flex:1; min-height:330px }
.sysb-map svg.wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1 }
.wires path{
  fill:none; stroke:rgba(102,170,255,.5); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset .7s var(--ease), opacity .4s;
  opacity:0;
}
.wires path.on{ stroke-dashoffset:0; opacity:1 }
@media (prefers-reduced-motion: no-preference){
  .wires path.on{ animation:flow 3.4s linear infinite }
}
@keyframes flow{
  0%{ stroke-dasharray:6 7; stroke-dashoffset:0 }
  100%{ stroke-dasharray:6 7; stroke-dashoffset:-26 }
}

/* Core and empty-state both live dead centre, so exactly one may be visible:
   with nothing ticked the core fades out and the prompt takes the middle. */
.sysb-map.empty .sysb-core{
  opacity:0; transform:translate(-50%,-50%) scale(.94); pointer-events:none;
}
.sysb-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
  z-index:3; width:min(190px,46%);
  padding:16px 15px; border-radius:16px; text-align:center;
  background:linear-gradient(160deg,#12444C,#0A2A31);
  border:1px solid rgba(159,218,219,.3);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.8), 0 0 0 6px rgba(159,218,219,.05);
}
.sysb-core .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#66AAFF; opacity:.9;
}
.sysb-core .v{
  font-family:var(--display);
  font-size:1.18rem; line-height:1.14; letter-spacing:-.02em; color:#fff; margin-top:7px;
}
.sysb-core .s{ font-size:11.5px; color:rgba(255,255,255,.45); margin-top:7px; line-height:1.4 }

.node{
  position:absolute; z-index:2;
  transform:translate(-50%,-50%) scale(.82);
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  display:grid; gap:5px; justify-items:center; text-align:center;
  width:104px;
}
.node.on{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.node .nb{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  color:#66AAFF;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
}
.node .nl{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:rgba(255,255,255,.55); line-height:1.3;
}

.sysb-empty{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; align-content:center; gap:12px;
  text-align:center; padding:24px;
  transition:opacity .4s;
}
.sysb-empty.gone{ opacity:0; pointer-events:none }
.sysb-empty .e1{
  font-family:var(--display);
  font-size:1.35rem; letter-spacing:-.02em; color:rgba(255,255,255,.82);
}
.sysb-empty .e2{ font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.38); max-width:30ch; line-height:1.6 }

.sysb-out{
  position:relative; z-index:3; margin-top:14px;
  border-top:1px solid rgba(255,255,255,.09); padding-top:14px;
  min-height:92px;
}
.sysb-out .oh{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:10px;
}
.sysb-out ul{ display:grid; gap:8px }
.sysb-out li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.55);
  opacity:0; transform:translateY(5px);
  animation:fadeUp .45s var(--ease) forwards;
}
.sysb-out li b{ color:#fff; font-weight:600 }
.sysb-out li .d{ color:#66AAFF; flex-shrink:0; margin-top:1px }
@keyframes fadeUp{ to{ opacity:1; transform:none } }
.sysb-cta{ margin-top:16px; position:relative; z-index:3 }

/* rough build time, shown once something is picked */
.sysb-meta{
  position:relative; z-index:3; margin-top:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  border-top:1px solid rgba(255,255,255,.09); padding-top:13px;
}
.sysb-meta > div{ display:grid; gap:3px }
.sysb-meta .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-deep-3);
}
.sysb-meta .v{ font-size:13.5px; color:#fff; font-weight:600; letter-spacing:-.01em }

/* ------------------------------------------------------------------ presets
   The entry point for someone who cannot name the parts but can name the shop
   they run. Ticks a starting set; everything stays editable afterwards. */
.presets{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:20px;
}
.presets-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-right:2px;
}
.preset{
  padding:9px 15px; border-radius:var(--pill);
  font-size:14px; font-weight:500; letter-spacing:-.01em;
  background:var(--paper-2); color:var(--ink-2);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
  transition:background .2s, color .2s, border-color .2s, transform .18s var(--ease);
}
.preset:hover{ border-color:var(--line); color:var(--ink); transform:translateY(-1px) }
.preset:active{ transform:translateY(0) scale(.98) }
.preset[aria-pressed="true"]{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.preset.ghost{ background:transparent; box-shadow:none; color:var(--ink-3) }
.preset.ghost:hover{ color:var(--ink) }
@media (max-width:560px){
  .presets{ gap:7px }
  .preset{ padding:8px 13px; font-size:13.5px }
}

/* phone: the ring has less room, so the nodes shrink to match the tighter
   radius sysbuilder.js computes for a narrow map */
@media (max-width:560px){
  .sysb-canvas{ padding:16px; min-height:410px }
  .sysb-map{ min-height:290px }
  .node{ width:84px; gap:4px }
  .node .nb{ width:44px; height:44px; border-radius:12px }
  .node .nl{ font-size:9px }
  .sysb-core{ width:min(150px,52%); padding:13px 12px }
  .sysb-core .v{ font-size:1.02rem }
  .sysb-core .s{ font-size:10.5px }
  .sysb-out{ min-height:0 }
}

/* ==========================================================================
   6. MARQUEE
   ========================================================================== */
.marquee{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line-2);
  padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; gap:0; width:max-content }
@media (prefers-reduced-motion: no-preference){
  .marquee-track{ animation:slide 46s linear infinite }
}
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee-track span{
  display:inline-flex; align-items:center; gap:14px;
  padding-inline:22px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--ink-2); white-space:nowrap;
}
.marquee-track span::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--tide); opacity:.45;
}

/* ==========================================================================
   7. FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line-2) }
.faq .q{ border-bottom:1px solid var(--line-2) }
.faq .q > button{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:24px 4px; text-align:left;
  font-size:clamp(1.02rem,1.6vw,1.16rem); font-weight:600; letter-spacing:-.018em;
  line-height:1.4;
  transition:color .2s;
}
.faq .q > button:hover{ color:var(--tide-deep) }
.faq .plus{
  position:relative; flex-shrink:0; width:20px; height:20px; margin-top:3px;
}
.faq .plus::before,.faq .plus::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink);
  transform:translate(-50%,-50%); border-radius:2px;
  transition:transform .34s var(--ease), opacity .3s;
}
.faq .plus::before{ width:14px; height:1.7px }
.faq .plus::after{ width:1.7px; height:14px }
.faq .q.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0 }
.faq .a{ height:0; overflow:hidden }
.faq .a > div{ padding:0 4px 26px; max-width:70ch }
.faq .a p{ color:var(--ink-2); font-size:15.5px; line-height:1.65 }

/* ==========================================================================
   8. FORM
   ========================================================================== */
.form{ display:grid; gap:18px }
.field{ display:grid; gap:8px }
.field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.field input,.field textarea,.field select{
  font:inherit; font-size:16px;
  padding:14px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
  width:100%;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6 }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--tide);
  box-shadow:0 0 0 3px rgba(14,117,128,.13);
  background:#fff;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-4) }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr } }
.form-note{ font-size:13px; color:var(--ink-3); line-height:1.55 }

/* checkbox group used by the brief builder */
.checks{ display:flex; flex-wrap:wrap; gap:8px }
.checks label{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--pill);
  border:1px solid var(--line); background:var(--paper-2);
  font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--ink-2);
  cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
.checks input{ position:absolute; opacity:0; width:0; height:0 }
.checks label:has(input:checked){
  background:var(--tide); border-color:var(--tide); color:#fff;
}
.checks label:has(input:focus-visible){ outline:2px solid var(--tide); outline-offset:2px }

/* ==========================================================================
   9. CONTACT / CTA BLOCK
   ========================================================================== */
.cta-block{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(160deg,#0B2229,#061318);
  color:var(--on-deep);
  padding:clamp(40px,6vw,76px) clamp(26px,5vw,64px);
  text-align:center;
  box-shadow:var(--sh-4);
  isolation:isolate;
}
.cta-block::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 320px at 20% -10%, rgba(35,165,176,.24), transparent 62%),
    radial-gradient(520px 300px at 88% 110%, rgba(210,105,30,.18), transparent 64%);
}
.cta-block h2{ margin-block:18px 16px }
.cta-block .lede{ margin-inline:auto; color:var(--on-deep-2) }
.cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px }

/* ==========================================================================
   10. SPLIT ROWS (project page sections)
   ========================================================================== */
.split{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(28px,4vw,60px); align-items:center;
}
.split.top{ align-items:start }
.split-copy{ display:grid; gap:18px; align-content:start }
.split.flip .split-copy{ order:2 }
@media (max-width:820px){ .split.flip .split-copy{ order:0 } }

/* spec table used on project pages */
.spec-table{ display:grid; gap:0; border-top:1px solid var(--line-2) }
.spec-table > div{
  display:grid; grid-template-columns:minmax(120px,.5fr) 1fr; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line-2);
  font-size:14.5px; line-height:1.55;
}
.spec-table dt,.spec-table .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding-top:2px;
}
.spec-table .v{ color:var(--ink-2) }
.spec-table .v b{ color:var(--ink); font-weight:600 }
@media (max-width:520px){ .spec-table > div{ grid-template-columns:1fr; gap:6px } }

/* ==========================================================================
   11. LIVE API CARD
   ========================================================================== */
.api-card{
  border-radius:var(--r); overflow:hidden;
  background:#08161A; border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--sh-3);
}
.api-bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:11.5px; color:var(--on-deep-2);
}
.api-bar .m{
  padding:3px 8px; border-radius:5px; background:rgba(159,218,219,.14);
  color:var(--glacier); font-size:10px; letter-spacing:.08em;
}
.api-out{
  margin:0; padding:18px; min-height:190px;
  font-family:var(--mono); font-size:12px; line-height:1.7;
  color:var(--on-deep-2); white-space:pre-wrap; word-break:break-word;
  max-height:280px; overflow:auto;
}
.api-out .k{ color:var(--glacier) }
.api-out .s{ color:#E9B872 }
.api-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:10.5px; color:var(--on-deep-3);
}
.api-foot button{
  padding:6px 13px; border-radius:var(--pill);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  color:var(--on-deep); font-family:var(--mono); font-size:10.5px;
  transition:background .2s;
}
.api-foot button:hover{ background:rgba(255,255,255,.17) }

/* ==========================================================================
   12. PROCESS STEPS
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:22px; counter-reset:s }
.step{
  position:relative; padding:28px 26px 30px;
  border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  display:grid; gap:14px; align-content:start;
}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--tide); font-weight:500;
}
.step h4{ font-size:1.22rem; letter-spacing:-.022em; font-weight:650; line-height:1.25 }
.step p{ font-size:14.5px; line-height:1.6; color:var(--ink-2) }
.step .ticks li{ font-size:14px }

/* ==========================================================================
   13. PEOPLE
   ========================================================================== */
.people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px }
.person{
  display:flex; gap:15px; align-items:center;
  padding:18px 20px; border-radius:var(--r);
  background:var(--paper-2); border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.person .av{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:#fff;
  font-family:var(--display); font-size:1.35rem;
}
.person .nm{ font-weight:650; font-size:16px; letter-spacing:-.02em }
.person .rl{ font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.4 }
.person .go{ margin-left:auto; display:flex; gap:6px }
.iclink{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--ink-2);
  transition:background .2s, color .2s, transform .2s var(--ease);
}
.iclink:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px) }

/* ==========================================================================
   14. PERF
   ========================================================================== */
.defer-paint{ content-visibility:auto; contain-intrinsic-size:auto 620px }