/* ═══════════════════════════════════════════
   TUPLE TECH v2 — the quiet edit
   Fewer words, more air, detail behind a click.
   ═══════════════════════════════════════════ */
:root{
  --bg:#08090A; --s1:#0E1113; --s2:#14181B;
  --wire:rgba(255,255,255,.09); --wire2:rgba(255,255,255,.18);
  --fg:#F2F4F6; --fg2:#9AA3AB; --fg3:#636C74;
  --sig:#FF4A1C;
  --e:cubic-bezier(.32,.72,0,1); --es:cubic-bezier(.22,1,.36,1);
  --shadow:none; color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#FFFFFF; --s1:#FAFBFC; --s2:#FFFFFF;
  --wire:rgba(12,18,24,.12); --wire2:rgba(12,18,24,.22);
  --fg:#0C1218; --fg2:#5B6670; --fg3:#8C959D;
  --sig:#DE3C15;
  --shadow:0 1px 2px rgba(12,18,24,.04),0 12px 34px -18px rgba(12,18,24,.16);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Space Grotesk",system-ui,sans-serif;font-weight:300;font-size:17px;
  line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--sig);color:#fff}

.wrap{width:min(1120px,100% - 3rem);margin-inline:auto}
section{padding-block:clamp(4rem,9vw,7rem)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.eyebrow{color:var(--fg3);margin:0 0 2rem;font-weight:500;letter-spacing:.2em}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.042em;line-height:1.02}
.d0{font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.02}
.d0 em{font-style:normal;color:var(--sig)}
.d1{font-size:clamp(2.4rem,5.4vw,4rem)}
.d2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.lede{font-size:1.05rem;color:var(--fg2);max-width:52ch;line-height:1.62;margin:1.6rem 0 0}
.lede.big{font-size:clamp(1.1rem,1.6vw,1.32rem);color:var(--fg2);max-width:46ch}
.note{font-size:.82rem;color:var(--fg3);margin:.9rem 0 0;line-height:1.5}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;cursor:pointer;
  padding:.62rem 1.15rem;background:var(--fg);color:var(--bg);font-size:.88rem;font-weight:500;
  border:1px solid var(--fg);white-space:nowrap;
  transition:transform .45s var(--e),opacity .45s var(--e)}
.btn:hover{transform:translateY(-1px);opacity:.88}
.btn.big{padding:.85rem 1.5rem;font-size:.95rem;margin-top:2.4rem}
.btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--wire)}
.bar{width:min(1120px,100% - 3rem);margin-inline:auto;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.5rem}
.brand .bm{width:20px;height:20px;color:var(--fg);flex:none}
.brand b{font-weight:600;font-size:1rem;letter-spacing:-.035em}
.brand b i{font-style:normal;color:var(--fg3)}
.links{display:flex;gap:1.6rem}
.links a{font-size:.9rem;color:var(--fg2);transition:color .4s var(--e)}
.links a:hover,.links a.on{color:var(--fg)}
.right{display:flex;align-items:center;gap:.6rem}
.tt{width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--wire);
  display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color .4s var(--e)}
.tt:hover{border-color:var(--wire2)}
.tt svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none}
.tt .sun{display:none}
html[data-theme="light"] .tt .sun{display:block}
html[data-theme="light"] .tt .moon{display:none}
.burger{display:none;width:2.2rem;height:2.2rem;border-radius:999px;position:relative;
  border:1px solid var(--wire)}
.burger span{position:absolute;left:50%;width:13px;height:1.2px;background:var(--fg);
  transition:transform .5s var(--e)}
.burger span:nth-child(1){top:calc(50% - 3.5px);transform:translateX(-50%)}
.burger span:nth-child(2){top:calc(50% + 3.5px);transform:translateX(-50%)}
body.open .burger span:nth-child(1){transform:translateX(-50%) translateY(3.5px) rotate(45deg)}
body.open .burger span:nth-child(2){transform:translateX(-50%) translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:49;display:grid;place-items:center;
  background:var(--bg);opacity:0;visibility:hidden;transition:opacity .45s var(--e),visibility .45s}
body.open .sheet{opacity:1;visibility:visible}
.sheet nav{display:flex;flex-direction:column;gap:.4rem;text-align:center}
.sheet a{font-size:2rem;font-weight:600;letter-spacing:-.04em}
.sheet a.sig{color:var(--sig)}

/* ── hero: one idea, fits the screen ── */
.hero{padding-block:clamp(5rem,12vw,9rem) clamp(4rem,9vw,7rem)}
.page{padding-block:clamp(4rem,9vw,6.5rem) clamp(2rem,4vw,3rem)}

/* ── services: summary visible, detail on click ── */
.svcs{border-top:1px solid var(--wire)}
.svc{border-bottom:1px solid var(--wire)}
.svc summary{display:flex;align-items:flex-start;gap:1.4rem;padding:1.7rem 0;cursor:pointer;
  list-style:none;transition:opacity .4s var(--e)}
.svc summary::-webkit-details-marker{display:none}
.svc summary:hover{opacity:.72}
.svc .num{color:var(--fg3);padding-top:.4rem;flex:none}
.svc .body{flex:1;font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.5;color:var(--fg2);
  letter-spacing:-.02em}
.svc .body b{color:var(--fg);font-weight:600}
.svc .chev{width:1.9rem;height:1.9rem;border-radius:999px;border:1px solid var(--wire);
  flex:none;position:relative;transition:transform .5s var(--e),border-color .4s var(--e)}
.svc .chev::before,.svc .chev::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:1.3px;background:var(--fg2);transform:translate(-50%,-50%);
  transition:transform .5s var(--e),background .4s var(--e)}
.svc .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc[open] .chev{border-color:var(--sig)}
.svc[open] .chev::before,.svc[open] .chev::after{background:var(--sig)}
.svc[open] .chev::after{transform:translate(-50%,-50%) rotate(0)}
.svc .detail{padding:0 0 1.9rem calc(1.4rem + 2.2rem);max-width:64ch}
.svc dl{margin:0;border-top:1px solid var(--wire)}
.svc .dr{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding:.95rem 0;
  border-bottom:1px solid var(--wire)}
.svc dt{font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3);padding-top:.25rem}
.svc dd{margin:0;font-size:.94rem;color:var(--fg2);line-height:1.6}
.hint{color:var(--fg3);margin-top:1.6rem;text-align:center}

/* ── work cards ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.wimg{border-radius:.8rem;overflow:hidden;background:var(--s1);aspect-ratio:16/10;
  border:1px solid var(--wire)}
.wimg img{width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform 1s var(--es)}
.wcard:hover .wimg img,.wshot:hover .wimg img{transform:scale(1.03)}
.wcard h3,.wshot h3{font-size:1.05rem;font-weight:600;margin-top:1rem;letter-spacing:-.03em}
.wcard p{margin:.3rem 0 0;font-size:.88rem;color:var(--fg2)}
.wshot{margin:0}
.wshot figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.9rem}
.wshot figcaption .mono{color:var(--fg3);font-size:.575rem}

/* ── statement ── */
.statement{border-block:1px solid var(--wire)}
.statement blockquote{margin:0;font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:300;
  letter-spacing:-.035em;line-height:1.3;max-width:24ch}
.statement em{font-style:normal;color:var(--sig)}

/* ── people ── */
.people{grid-template-columns:repeat(2,minmax(0,15rem));gap:clamp(1.6rem,4vw,3rem);
  justify-content:start}
.people .pf{border-radius:.9rem;overflow:hidden;aspect-ratio:4/5;background:var(--s1);
  border:1px solid var(--wire)}
.people .pf img{width:100%;height:100%;object-fit:cover}
.person h3{margin-top:1.2rem;font-size:1.15rem}
.person .role{margin:.25rem 0 0;color:var(--sig);font-size:.9rem}

/* ── contact ── */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:start}
form{display:grid;gap:1.1rem}
form label{display:grid;gap:.45rem;font-size:.8rem;color:var(--fg3);
  font-family:"JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
form input,form textarea,form select{border:0;border-bottom:1px solid var(--wire);
  padding:.7rem 0;font-size:1rem;font-family:"Space Grotesk",sans-serif;font-weight:300;
  letter-spacing:-.01em;text-transform:none;color:var(--fg);outline:none;
  transition:border-color .4s var(--e)}
form input:focus,form textarea:focus,form select:focus{border-color:var(--sig)}
form textarea{resize:vertical}
form select option{background:var(--s1)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.direct{border-left:1px solid var(--wire);padding-left:clamp(1.5rem,3vw,2.5rem)}
.dl{display:flex;align-items:center;gap:.5rem;padding:.85rem 0;font-size:1rem;
  border-bottom:1px solid var(--wire);transition:color .4s var(--e)}
.dl:hover{color:var(--sig)}
.dl svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ── cta ── */
.cta{border-top:1px solid var(--wire);text-align:center}
.cta .lede{margin-inline:auto;margin-top:1.2rem}

/* ── footer ── */
footer{border-top:1px solid var(--wire);padding-block:2.6rem 1.8rem}
.frow{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
  padding-bottom:2rem}
.flinks{display:flex;gap:1.5rem;font-size:.9rem;color:var(--fg2)}
.flinks a:hover{color:var(--fg)}
.fmeta{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem;color:var(--fg2);
  text-align:right}
.fmeta a:hover{color:var(--fg)}
.fbot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.5rem;border-top:1px solid var(--wire);color:var(--fg3)}

/* ── inline citations ── */
.cite{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:.58em;
  vertical-align:super;line-height:1;color:var(--sig);padding:0 .12em;
  border-bottom:1px solid transparent;transition:border-color .3s var(--e)}
.cite:hover{border-bottom-color:var(--sig)}

/* ── sector index on home ── */
.secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2.6rem;
  background:var(--wire);border:1px solid var(--wire)}
.secgrid a{display:block;padding:1.5rem 1.4rem;background:var(--bg);
  transition:background .4s var(--e)}
.secgrid a:hover{background:var(--s1)}
.secgrid b{display:block;font-weight:600;font-size:1rem;letter-spacing:-.03em}
.secgrid span{display:block;margin-top:.35rem;font-size:.84rem;color:var(--fg2)}

/* ── sector blocks ── */
.sectors{border-top:1px solid var(--wire)}
.sector{padding-block:clamp(2.6rem,5vw,4rem);border-bottom:1px solid var(--wire);
  scroll-margin-top:5rem}
.sechead{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:2rem}
.sechead .num{color:var(--fg3);flex:none}
.secbody{display:grid;grid-template-columns:15rem 1fr;gap:clamp(1.8rem,4vw,3.4rem);
  align-items:start}
.stat{border-left:2px solid var(--sig);padding-left:1.2rem}
.stat.plain{border-left-color:var(--wire)}
.stat b{display:block;font-size:clamp(2rem,3.4vw,2.7rem);font-weight:600;
  letter-spacing:-.045em;line-height:1}
.stat>p{margin:.6rem 0 0;font-size:.86rem;color:var(--fg2);line-height:1.5}
.srcline{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;
  color:var(--fg3);transition:color .4s var(--e)}
.srcline:hover{color:var(--sig)}
.srcline svg{width:9px;height:9px;stroke:currentColor;stroke-width:1.8;fill:none}
.meth{margin:.7rem 0 0!important;font-size:.75rem!important;color:var(--fg3)!important;
  line-height:1.55}
.sectext .lede{margin-top:0;max-width:58ch}
.builds{margin:1.5rem 0 0;font-size:.94rem;color:var(--fg2);line-height:1.65;max-width:62ch;
  padding-top:1.2rem;border-top:1px solid var(--wire)}
.builds .lbl{display:block;color:var(--fg3);margin-bottom:.5rem}

/* ── honest lists ── */
.honest .hlist{list-style:none;margin:2.4rem 0 0;padding:0;
  display:grid;gap:1.4rem;max-width:70ch}
.honest .hlist.tight{gap:1rem}
.honest .hlist li{padding-left:1.4rem;position:relative;font-size:.98rem;
  color:var(--fg2);line-height:1.62}
.honest .hlist li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1.5px;background:var(--sig)}
.honest .hlist b{color:var(--fg);font-weight:600}

/* ── engagement shapes ── */
.shapes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:2.4rem;
  background:var(--wire);border:1px solid var(--wire)}
.shape{padding:1.8rem 1.6rem;background:var(--bg)}
.shape .mono{color:var(--sig)}
.shape h3{font-size:1.2rem;margin:.7rem 0 0;letter-spacing:-.035em}
.shape p{margin:.7rem 0 0;font-size:.92rem;color:var(--fg2);line-height:1.6}

/* ── floating WhatsApp button ── */
.wafab{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.05rem;border-radius:999px;
  background:#25D366;color:#06240F;font-size:.9rem;font-weight:500;
  box-shadow:0 6px 24px -8px rgba(0,0,0,.45);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.wafab:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.wafab svg{width:19px;height:19px;flex:none}
@media (max-width:760px){
  .wafab{right:1rem;bottom:1rem;padding:.8rem;gap:0}
  .wafab span{display:none}
  .wafab svg{width:22px;height:22px}
}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(1.6rem);transition:opacity .8s var(--es),transform .8s var(--es)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .grid3,.grid2,.contact-grid,.shapes{grid-template-columns:1fr}
  .secgrid{grid-template-columns:repeat(2,1fr)}
  .secbody{grid-template-columns:1fr;gap:1.6rem}
  .people{grid-template-columns:repeat(2,minmax(0,13rem))}
  .direct{border-left:0;border-top:1px solid var(--wire);padding-left:0;padding-top:2rem}
  .svc .dr{grid-template-columns:1fr;gap:.3rem}
}
@media (max-width:760px){
  .wrap,.bar{width:calc(100% - 2rem)}
  .links{display:none}
  .right .btn{display:none}
  .burger{display:block}
  .svc .detail{padding-left:0}
  .secgrid{grid-template-columns:1fr}
  .sechead{gap:.9rem}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  section{padding-block:3.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* form feedback */
.note[data-tone="ok"]{color:#4FBE84}
.note[data-tone="bad"]{color:var(--sig)}