/* SMARTS — inner pages (About · Services · Downloads · Contact · 404). Tokens/components: global.css */

/* shared split */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,7rem);align-items:center}
.split-media{border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/5;background:var(--paper);box-shadow:var(--sh-2)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-copy h2{margin-bottom:1.6rem}
.split-copy p{color:var(--muted);margin-bottom:1.1rem}
.tick{display:grid;place-items:center;flex:none;width:52px;height:44px;background:var(--green);color:#fff;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}
.tick svg{width:22px;height:22px;fill:currentColor}

/* ---------- About: pick any two ---------- */
.pick{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.pick-tri{position:relative;aspect-ratio:10/9;max-width:500px;width:100%}
.pick-tri svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tri-base{fill:none;stroke:var(--line);stroke-width:3;stroke-linejoin:round}
.edge{stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-io)}
.edge.on{stroke-dashoffset:0}
.vtx{position:absolute;transform:translate(-50%,-50%);padding:.9rem 1.7rem;font-family:var(--font-display);font-weight:750;font-size:clamp(1.15rem,1rem + .7vw,1.6rem);letter-spacing:-.02em;color:var(--ink);background:#fff;border-radius:var(--r-ctl);box-shadow:var(--sh-1);border:2px solid var(--line);transition:background .4s,color .4s,border-color .4s,opacity .4s,transform .5s var(--ease)}
.vtx:hover{transform:translate(-50%,-54%)}
.vtx[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);transform:translate(-50%,-50%) scale(1.08)}
.vtx.is-out{opacity:.5;border-style:dashed;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.pick-live{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,1.1rem + 2.4vw,3.2rem);letter-spacing:-.035em;line-height:1.08;color:var(--ink);margin-bottom:2rem;min-height:2.2em}
.outcomes{list-style:none;padding:0;display:grid;gap:.2rem;border-top:1px solid var(--line)}
.outcomes li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem .2rem;border-bottom:1px solid var(--line);color:var(--muted);transition:color .4s,padding .5s var(--ease),background .4s}
.outcomes b{font-family:var(--font-display);color:inherit}
.outcomes i{font-style:normal;font-weight:600}
.outcomes li.on{color:var(--ink);padding-left:1rem;background:linear-gradient(90deg,rgba(200,20,30,.08),transparent);box-shadow:inset 4px 0 0 var(--red)}

/* commitments */
.commit-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.commit{display:grid;grid-template-columns:auto 1fr;gap:1.4rem}
.commit p{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--text);max-width:none}

/* gallery */
.gal{display:flex;gap:1rem;height:clamp(220px,21vw,310px)}
.gal figure{flex:1;border-radius:var(--r-card);overflow:hidden;transition:flex .9s var(--ease);box-shadow:var(--sh-1);background:var(--azure)}
.gal figure:hover,.gal figure:focus-visible{flex:2.6}
.gal img{width:100%;height:100%;object-fit:cover;object-position:center}
.video{position:relative;margin-top:clamp(2rem,4vw,3.5rem);border-radius:var(--r-panel);overflow:hidden;aspect-ratio:16/9;max-width:960px;margin-inline:auto;background:linear-gradient(120deg,var(--blue),var(--ink));box-shadow:var(--sh-2);display:grid;place-items:center}
.video::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 30px)}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.8rem;padding:.9rem 1.6rem .9rem 1rem;border-radius:var(--r-ctl);background:#fff;font-family:var(--font-display);font-weight:700;color:var(--ink);box-shadow:var(--sh-3);transition:transform .5s var(--ease)}
.video-play:hover{transform:scale(1.06)}
.video-play svg{width:46px;height:46px;padding:12px;background:var(--red);fill:#fff;border-radius:var(--r-ctl)}

/* ---------- Services ---------- */
.svc-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.svc-media{position:sticky;top:calc(var(--hdr-h) + 2rem);border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-2)}
.svc-media img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.svc-split h2{margin-bottom:1.6rem}
.acc{border-top:1px solid var(--line)}
.acc-btn small{display:block;font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--muted);letter-spacing:0;margin-top:.25rem}
.acc-body p{color:var(--muted);margin-bottom:1.2rem}
.acc-item:target .acc-btn,.acc-item.is-target .acc-btn{color:var(--blue)}
.anchor-offset{display:block;height:0}

/* ---------- Downloads ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem 1.2rem;border:0;padding:0;margin:0;min-width:0}
.doc{position:relative;background:#fff;border:1px solid var(--line);border-radius:0 var(--r-card) var(--r-card) var(--r-card);padding:1.6rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:1.2rem;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .3s}
.doc::before{content:"";position:absolute;left:-1px;top:-24px;width:96px;height:25px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;clip-path:polygon(0 0,82% 0,100% 100%,0 100%);transition:background .3s,border-color .3s}
.doc:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.doc input{position:absolute;opacity:0;pointer-events:none}
.doc label{display:flex;flex-direction:column;gap:1.1rem;cursor:pointer;flex:1}
.doc label::after{content:"";position:absolute;inset:0;border-radius:inherit}
.doc .link-arrow{position:relative;z-index:2;align-self:flex-start}
.doc-ico{width:52px;height:44px;display:grid;place-items:center;background:var(--paper);color:var(--blue);clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);transition:background .4s,color .4s}
.doc-ico svg{width:22px;height:22px;fill:currentColor}
.doc-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.doc:has(input:checked){border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-5px)}
.doc:has(input:checked)::before{background:var(--blue);border-color:var(--blue)}
.doc:has(input:checked) .doc-ico{background:var(--red);color:#fff}
.doc:has(input:focus-visible){outline:3px solid var(--blue-hi);outline-offset:3px}
.doc--ask{background:var(--ink);border-color:var(--ink);color:#fff;justify-content:space-between}
.doc--ask::before{background:var(--red);border-color:var(--red)}
.doc--ask h3{color:#fff}
.doc--ask p{color:var(--muted-dark);font-size:.98rem}
.doc--ask .btn{align-self:flex-start}
.doc-note{margin:3rem auto 0;text-align:center;color:var(--muted)}
.doc-note a{font-weight:600}
.req-bar{position:fixed;left:50%;bottom:1.2rem;z-index:58;transform:translate(-50%,180%);display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center;background:var(--ink);color:#fff;padding:.8rem .9rem .8rem 1.4rem;border-radius:var(--r-card);box-shadow:var(--sh-3);transition:transform .7s var(--ease),visibility 0s .7s;max-width:calc(100vw - 6.5rem);visibility:hidden}
.req-bar.is-on{transform:translate(-50%,0);visibility:visible;transition:transform .7s var(--ease),visibility 0s}
.req-text b{font-family:var(--font-display);color:var(--red-hi)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.contact-info h2{margin-bottom:1rem}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(1.6rem,1rem + 2.4vw,3rem);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.form-card h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);margin-bottom:1.6rem}
.form-note{margin-top:1rem;font-size:.92rem;color:var(--muted)}
.form-done{display:grid;gap:1rem;justify-items:start}
.form-done[hidden]{display:none}
.form-done h3{font-size:1.6rem}
.form-done p{color:var(--muted)}
.form-card.is-done form,.form-card.is-done>h2{display:none}
.map-wide{margin-top:clamp(3rem,6vw,6rem);aspect-ratio:21/9}

/* ---------- 404 ---------- */
.nf{min-height:min(720px,70vh);display:flex;align-items:center}
.nf-code{font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,3rem + 12vw,13rem);line-height:.85;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--red-hi);margin-bottom:1.2rem}
.nf h1{max-width:16ch}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split,.pick,.commit-grid,.svc-split,.contact-grid{grid-template-columns:1fr}
  .split-media{max-width:420px}
  .svc-media{position:relative;top:0;aspect-ratio:16/9;max-width:none}
  .doc-grid{grid-template-columns:repeat(2,1fr)}
  .map-wide{aspect-ratio:4/3}
  .pick-tri{margin-inline:auto}
}
@media (max-width:640px){
  .gal{flex-direction:column;height:auto}
  .gal figure{flex:none;height:200px}
  .gal figure:hover{flex:none}
  .doc-grid{grid-template-columns:1fr}
  .vtx{padding:.7rem 1.1rem}
  .req-bar{left:1rem;right:5.5rem;transform:translateY(180%);max-width:none;justify-content:flex-start}
  .req-bar.is-on{transform:none}
  .commit{grid-template-columns:1fr}
}

/* ---------- Service detail pages ---------- */
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.svc-hero h1{max-width:16ch;font-size:clamp(2.3rem,1.1rem + 3.8vw,4.3rem)}
.svc-hero .lead{color:var(--muted-dark);margin-top:1.3rem;max-width:34rem}
.crumb{flex-wrap:wrap}
.svc-tag{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line-dark);color:#fff;font-weight:600;font-size:.92rem}
.svc-tag .slashes{font-size:1.1em}
.svc-art{position:relative;max-width:470px;width:100%;margin-inline:auto}
.svc-art svg{display:block;width:100%;height:auto;border-radius:28px;box-shadow:var(--sh-3)}
.il-float{animation:il-float 7s ease-in-out infinite;transform-box:fill-box}
@keyframes il-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.svc-ov{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.svc-ov h2{margin-bottom:1.5rem}
.svc-ov p{color:var(--muted);margin-bottom:1.1rem}
.svc-ov .btn-row{margin-top:1.8rem}
.orig{border-left:4px solid var(--red);padding:.3rem 0 .3rem 1.3rem;margin:0 0 1.6rem;font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.svc-fig{margin:0;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--sh-2);background:var(--azure);aspect-ratio:16/11}
.svc-fig img{width:100%;height:100%;object-fit:cover;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(var(--zoom,1))}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.help{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,1rem + 1vw,2rem);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.help:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.help-ic{display:grid;place-items:center;width:58px;height:50px;background:var(--blue);color:#fff;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);margin-bottom:1.2rem}
.help-ic svg{width:24px;height:24px}
.help h3{font-size:1.3rem;margin-bottom:.5rem}
.help p{color:var(--muted);font-size:.98rem}
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;position:relative}
.flow::before{content:"";position:absolute;left:24px;right:24px;top:24px;border-top:2px dashed var(--line)}
.flow li{position:relative}
.fnum{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-ctl);background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:800;margin-bottom:1.2rem}
.flow li:last-child .fnum{background:var(--red)}
.flow h3{font-size:1.3rem;margin-bottom:.45rem}
.flow p{color:var(--muted);font-size:.98rem}
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.faq-note{margin-top:1.2rem;color:var(--muted)}
.faq-note a{font-weight:600}
.faq-grid .acc{border-top:1px solid var(--line)}
.faq-grid .acc-btn{font-size:clamp(1.1rem,1rem + .4vw,1.3rem)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.rel{display:flex;flex-direction:column;gap:1rem;padding:1.2rem 1.2rem 1.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);color:inherit;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .3s}
.rel:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--blue)}
.rel-art{display:block;border-radius:18px;background:#0090FF;overflow:hidden}
.rel-art svg{display:block;width:100%;height:auto}
.rel h3{font-size:1.35rem}
.rel .link-arrow{margin-top:auto;align-self:flex-start}
.rel:hover .link-arrow::after{transform:scaleX(1)}
.rel-all{margin-top:2rem}
@media (max-width:1000px){
  .svc-hero-grid,.svc-ov,.faq-grid{grid-template-columns:1fr}
  .svc-art{max-width:320px}
  .help-grid,.rel-grid{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:2rem}
  .flow::before{display:none}
}
@media (max-width:640px){
  .help-grid,.rel-grid,.flow{grid-template-columns:1fr}
}

/* ---------- Our Services page: intro + illustrated rows ---------- */
.svc-intro{padding-bottom:clamp(2.5rem,4vw,4rem)}
.svc-intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.svc-intro-fig{margin:0;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:16/9}
.svc-intro-fig img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.jump{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.jump a{padding:.5rem 1rem;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.jump a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.svc-list .section-head{margin-bottom:clamp(1.8rem,3vw,3rem)}
.srows{display:grid;gap:clamp(3rem,6vw,6rem)}
.srow{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.6rem,5vw,5rem);align-items:center;scroll-margin-top:calc(var(--hdr-h) + 24px)}
.srow--flip{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.srow--flip .srow-art{order:2}
.srow-art{display:block;border-radius:var(--r-panel);overflow:hidden;background:#0090FF;box-shadow:var(--sh-2)}
.srow-art svg{display:block;width:100%;height:auto}
.srow-tag{display:inline-flex;align-items:center;padding:.3rem .85rem;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.88rem;color:var(--ink)}
.section--paper .srow-tag{background:#fff}
.srow h3{font-size:clamp(1.8rem,1.2rem + 1.9vw,2.9rem);letter-spacing:-.035em;margin:.7rem 0 1rem}
.srow-text{color:var(--muted);font-size:1.08rem}
.srow-points{list-style:none;padding:0;margin:1.3rem 0 1.8rem;display:grid;gap:.6rem}
.srow-points li{display:flex;align-items:center;gap:.75rem;font-weight:600;color:var(--ink)}
.srow-points li::before{content:"";flex:none;width:24px;height:24px;border-radius:7px;background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>") center/15px no-repeat}
@media (max-width:1000px){
  .svc-intro-grid,.srow,.srow--flip{grid-template-columns:1fr}
  .srow--flip .srow-art{order:0}
  .srow-art{max-width:560px}
  .svc-intro-fig{max-width:620px}
}

/* ---------- About: Good – Cheap & Fast (interactive) ---------- */
.vtx::after{content:"";position:absolute;inset:-7px;border-radius:12px;border:2px solid var(--blue-hi);opacity:0;pointer-events:none}
.pick:not(.has-pair) .vtx:not([aria-pressed="true"])::after{animation:vtx-ping 2.2s ease-out infinite}
.pick:not(.has-pair) .vtx:nth-of-type(2)::after{animation-delay:.5s}
.pick:not(.has-pair) .vtx:nth-of-type(3)::after{animation-delay:1s}
@keyframes vtx-ping{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
.vtx.is-out{animation:vtx-shake .55s var(--ease)}
@keyframes vtx-shake{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 9px),-50%)}45%{transform:translate(calc(-50% + 9px),-50%)}70%{transform:translate(calc(-50% - 5px),-50%)}}
.edge.on{filter:drop-shadow(0 0 6px rgba(200,20,30,.55))}
.runner{fill:var(--red);filter:drop-shadow(0 0 8px rgba(200,20,30,.8));transition:opacity .4s}
.pick-live.is-swap{animation:live-in .6s var(--ease)}
@keyframes live-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.meters{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.7rem}
.meters li{display:grid;grid-template-columns:62px 1fr;gap:.9rem;align-items:center;font-family:var(--font-display);font-weight:650;color:var(--muted);transition:color .4s}
.meters i{display:block;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.meters b{display:block;height:100%;background:linear-gradient(90deg,var(--blue-hi),var(--red));transform:scaleX(var(--v,0));transform-origin:left;transition:transform .9s var(--ease)}
.meters li.is-on{--v:1;color:var(--ink)}
.meters li.is-out{--v:.12}
.pick-live{min-height:2.2em}

/* service pages: the overview image is now each service's own illustration */
.svc-fig{aspect-ratio:auto;background:#0090FF}
.svc-fig svg{display:block;width:100%;height:auto}