/* Sandhu Web Studio — shared design system.
   Tokens, base, buttons, header, mobile menu, footer and reveal motion are shared with the homepage
   (index.html loads this file, then home.css). The rest styles the inner pages. No heavy motion here. */
:root{
  --cover:#0e0e10;--paper:#f3f2ef;--sheet:#fbfaf8;--ink:#17171a;--mute:#5d5b57;--line:#dcd9d2;
  --on:#f3f2ef;--on-mute:#a8a49b;--cline:#2a2a2f;--gold:#c6a15b;--gold-ink:#7a5c22;--gold-soft:#e4d3ae;
  --serif:'Castoro',Georgia,serif;--sans:'Schibsted Grotesk',system-ui,sans-serif;
  --r:16px;--ease:cubic-bezier(.16,1,.3,1);--wrap:1440px;
}
*{box-sizing:border-box}
.ph{display:inline-flex;width:1em;height:1em;flex:none;vertical-align:-.125em}.ph svg{width:100%;height:100%}
body{margin:0;background:var(--cover);color:var(--ink);font:17px/1.6 var(--sans);overflow-x:clip}
::selection{background:var(--gold);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
html{scrollbar-color:#8c887f var(--cover)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 48px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font-size:clamp(40px,5vw,76px);line-height:1.02}
p{margin:0}
.lead{font-size:19px;color:var(--mute);max-width:58ch}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 30px;border-radius:999px;font:600 16px var(--sans);text-decoration:none;white-space:nowrap;transition:box-shadow .4s var(--ease);will-change:transform}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.btn i{transition:transform .4s var(--ease)}.btn:hover i{transform:translateX(4px)}
.btn:active{scale:.98}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.tlink i{transition:transform .3s var(--ease)}.tlink:hover i{transform:translate(3px,-1px)}
.paper{background:var(--paper);color:var(--ink)}
.sheet{background:var(--sheet);color:var(--ink)}
.dark{background:var(--cover);color:var(--on)}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s,color .4s}
.nav.solid{background:rgba(14,14,16,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px)}
.nav.light{background:rgba(243,242,239,.86);color:var(--ink)}
.nav .in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--on)}
.nav.light .in{color:var(--ink)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 17px var(--sans)}
.brand img{width:38px;height:38px;border-radius:10px}
.links{display:flex;gap:30px;font-size:15px}
.links a{text-decoration:none;opacity:.72;transition:opacity .2s}.links a:hover{opacity:1}
.navr{display:flex;align-items:center;gap:22px;font-size:15px}
.navr .login{opacity:.72;text-decoration:none}
.navr .btn{height:44px;padding:0 20px;font-size:15px}
.menu{display:none;background:none;border:1px solid currentColor;color:inherit;width:44px;height:44px;border-radius:999px;font-size:20px;opacity:.8}

footer{color:var(--on-mute);font-size:15px;padding:72px 0 40px;border-top:1px solid var(--cline)}
.fgrid{display:grid;grid-template-columns:4fr 3fr 3fr 2fr;gap:40px}
footer h3,footer .fh{font:600 13px var(--sans);color:var(--on);margin:0 0 16px;letter-spacing:.02em}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer a{text-decoration:none}footer a:hover{color:var(--on)}
.fbase{margin-top:64px;padding-top:24px;border-top:1px solid var(--cline);display:flex;justify-content:space-between;font-size:13.5px;gap:16px;flex-wrap:wrap}

/* footer wordmark */
.bigmark{font:120px/.8 var(--serif);letter-spacing:-.05em;color:#26262c;margin-top:70px;white-space:nowrap;overflow:clip;padding-bottom:.08em;user-select:none}
.bigmark span{display:inline-block}
.bigmark{display:block;width:100%}

.rv{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(30px);filter:blur(6px)}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:49;background:var(--cover);color:var(--on);display:flex;flex-direction:column;justify-content:center;gap:34px;overflow-y:auto;overscroll-behavior:contain;padding:96px 24px calc(40px + env(safe-area-inset-bottom,0px))}
.mnav[hidden]{display:none}
.mnav nav{display:flex;flex-direction:column;gap:6px}
.mnav nav a{font:44px/1.15 var(--serif);letter-spacing:-.02em;text-decoration:none}
.mnav .btn{justify-content:center}
.mnav-contact{display:flex;flex-direction:column;gap:8px;color:var(--on-mute);font-size:15px}
.mnav-contact a{text-decoration:none}
html.menu-open{overflow:hidden}
.menu .ph-x{display:none}html.menu-open .menu .ph-list{display:none}html.menu-open .menu .ph-x{display:inline-flex}
@media (max-height:640px){.mnav{justify-content:flex-start}.mnav nav a{font-size:34px}}
@media (max-width:1100px){.links,.navr .login{display:none}}
@media (max-width:860px){
  .wrap{padding:0 20px}
  .nav .in{height:64px}.navr .btn{display:none}.menu{display:grid;place-items:center}
  .fgrid{grid-template-columns:1fr 1fr;gap:36px 24px}.fgrid>div:first-child{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .js .rv:not(.in){opacity:1;transform:none;filter:none}
}

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
[id]{scroll-margin-top:96px}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.dark .btn-line{box-shadow:inset 0 0 0 1px rgba(243,242,239,.4)}
.btn-line:hover{box-shadow:inset 0 0 0 1px currentColor}
.btn-sm{height:46px;padding:0 22px;font-size:15px}
.phero .ctas,.sec .ctas,.cta .ctas{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
.sec p a:not(.btn):not(.tlink),.sec li a:not(.btn):not(.tlink),.ans a,.prose a{text-decoration-color:var(--gold);text-decoration-thickness:1.5px}

/* small label above headings */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 20px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.dark .eyebrow{color:var(--gold-soft)}

/* page hero (matte black cover) */
.phero{position:relative;overflow:hidden;padding:200px 0 120px;color:var(--on)}
.phero::before{content:"";position:absolute;inset:-6%;background:url(/assets/home/tex.webp) center/cover;opacity:.5;pointer-events:none}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 75% 30%,rgba(14,14,16,.25),rgba(14,14,16,.94) 70%);pointer-events:none}
.phero>.wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(46px,6.6vw,108px);line-height:.98;letter-spacing:-.035em;max-width:16ch}
.phero h1 em,.dark h2 em{font-style:italic;color:var(--gold-soft)}
.phero .lead{color:var(--on-mute);margin-top:32px;font-size:clamp(17px,1.5vw,20px);max-width:60ch}
.phero .ctas{margin-top:44px}
.phero .tlink{color:var(--on)}
.phero.short{padding:170px 0 90px}
.phero.short h1{font-size:clamp(42px,5.4vw,84px)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:14.5px;color:var(--on-mute)}
.meta-row a{color:var(--on)}

/* sections */
.sec{padding:140px 0}
.sec.tight{padding:100px 0}
.sec+.sec.paper,.sec+.sec.sheet{border-top:1px solid var(--line)}
.sec h2{font-size:clamp(38px,4.6vw,68px);line-height:1.02;letter-spacing:-.03em}
.paper h2 em,.sheet h2 em{font-style:italic;color:var(--gold-ink)}
.sec .lead{margin-top:24px}
.dark .lead{color:var(--on-mute)}
.head{max-width:860px;margin-bottom:64px}
.head.center{text-align:center;margin-left:auto;margin-right:auto}
.head.center .eyebrow{justify-content:center}
.head.center .lead{margin-left:auto;margin-right:auto}
.split{display:grid;grid-template-columns:5fr 7fr;gap:40px 80px;align-items:start}
.split.even{grid-template-columns:1fr 1fr}
.split>.sticky{position:sticky;top:120px}
.muted{color:var(--mute)}
.dark .muted{color:var(--on-mute)}
.small{font-size:14.5px}
.center{text-align:center}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:56px}

/* icon list with dividers */
.ilist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ilist li{display:flex;gap:18px;align-items:flex-start;padding:26px 0;border-bottom:1px solid var(--line)}
.ilist li>.ph{font-size:24px;color:var(--gold-ink);margin-top:2px}
.ilist strong{display:block;font-weight:600;font-size:18px}
.ilist span.d{display:block;color:var(--mute);margin-top:4px}
.dark .ilist{border-top-color:var(--on-mute)}.dark .ilist li{border-bottom-color:var(--cline)}.dark .ilist li>.ph{color:var(--gold-soft)}.dark .ilist span.d{color:var(--on-mute)}

/* checks */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li>.ph{color:var(--gold-ink);font-size:20px;margin-top:3px}
.dark .checks li>.ph{color:var(--gold-soft)}

/* tiles (cards) */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tile{position:relative;background:var(--sheet);border-radius:var(--r);padding:40px;box-shadow:0 0 0 1px rgba(23,23,26,.07);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.sheet .tile{background:var(--paper)}
.tile:hover{box-shadow:0 0 0 1px rgba(23,23,26,.1),0 30px 60px -40px rgba(23,23,26,.45)}
.tile>.ph{font-size:30px;color:var(--gold-ink);margin-bottom:22px;display:flex}
.tile h3{font-size:clamp(26px,2.3vw,34px);line-height:1.08;margin-bottom:12px}
.tile p{color:var(--mute)}
.tile p+p{margin-top:12px}
.dark .tile{background:#151518;box-shadow:0 0 0 1px var(--cline)}.dark .tile p{color:var(--on-mute)}.dark .tile>.ph{color:var(--gold-soft)}
a.tile{display:block;text-decoration:none}
.tile .more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:3px}

/* numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:st}
.steps li{padding-top:28px;border-top:1px solid var(--ink)}
.dark .steps li{border-top-color:var(--cline)}
.steps .n{font:italic 20px var(--serif);color:var(--gold-ink);display:block;margin-bottom:12px}
.dark .steps .n{color:var(--gold-soft)}
.steps h3{font-size:clamp(28px,2.4vw,38px);line-height:1.08;margin-bottom:12px}
.steps p{color:var(--mute)}
.dark .steps p{color:var(--on-mute)}

/* work card: browser frame + screenshot */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 32px}
.work-card{display:block;text-decoration:none}
.frame{border-radius:14px;overflow:hidden;background:#1b1b20;box-shadow:0 0 0 1px rgba(23,23,26,.12),0 40px 70px -46px rgba(23,23,26,.7)}
.frame .bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#8c887f;font-size:12px;border-bottom:1px solid #2e2e35}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#3a3a42;flex:none}
.frame .bar span{margin:0 auto;padding-right:40px}
.frame .shot{aspect-ratio:16/10;overflow:hidden;background:#111}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.work-card:hover .frame img{transform:scale(1.03)}
.work-meta{margin-top:22px}
.work-meta h3{font-size:clamp(28px,2.6vw,40px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.work-meta p{color:var(--mute);margin-top:8px}
.live{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--gold);border-radius:999px;padding:4px 10px}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;font:400 clamp(21px,1.8vw,26px)/1.25 var(--serif);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ph{flex:none;font-size:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.faq summary .ph svg{width:20px;height:20px}
.faq details[open] summary .ph{transform:rotate(180deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.faq .ans{padding:0 64px 28px 0;color:var(--mute);max-width:72ch}
.faq .ans p+p{margin-top:12px}
.faq summary:focus-visible{outline-offset:-2px}
.dark .faq{border-top-color:var(--on-mute)}.dark .faq details{border-bottom-color:var(--cline)}.dark .faq summary .ph{border-color:var(--cline)}.dark .faq .ans{color:var(--on-mute)}

/* closing CTA band */
.cta{position:relative;overflow:hidden;color:var(--on)}
.cta::before{content:"";position:absolute;inset:-6%;background:url(/assets/home/tex.webp) center/cover;opacity:.7;transform:scaleX(-1)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,16,.25),rgba(14,14,16,.9))}
.cta>.wrap{position:relative;z-index:1;padding-top:160px;padding-bottom:140px}
.cta h2{font-size:clamp(46px,6.4vw,110px);line-height:.96;letter-spacing:-.04em;max-width:15ch}
.cta .lead{color:var(--on-mute);margin-top:28px}
.cta .ctas{margin-top:48px}
.cta .tlink{color:var(--on)}
.cta .note{margin-top:40px;color:var(--on-mute);max-width:70ch}
.cta .note a{color:var(--on)}

/* pills / tags */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--mute)}
.dark .pill{border-color:var(--cline);color:var(--on-mute)}
.pills{display:flex;flex-wrap:wrap;gap:8px}

/* quote / callout */
.callout{border-left:2px solid var(--gold);padding:6px 0 6px 24px;font:italic clamp(22px,2vw,28px)/1.35 var(--serif);color:var(--ink)}
.dark .callout{color:var(--on)}
.note-box{background:var(--sheet);border-radius:var(--r);padding:28px 32px;box-shadow:0 0 0 1px rgba(23,23,26,.07)}
.sheet .note-box{background:var(--paper)}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);background:var(--sheet)}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--paper)}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tbody th{font-weight:600}

/* long-form text: blog posts, legal pages */
.prose{max-width:720px;font-size:18px;line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(32px,3.4vw,46px);line-height:1.08;margin-top:2.2em;margin-bottom:.1em}
.prose h3{font-size:clamp(24px,2.2vw,30px);line-height:1.15;margin-top:1.8em}
.prose h4{font:600 18px var(--sans);margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--gold-ink)}
.prose a{font-weight:500}
.prose strong{font-weight:600}
.prose blockquote{margin:1.6em 0;border-left:2px solid var(--gold);padding:4px 0 4px 24px;font:italic 24px/1.4 var(--serif)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose .tbl-wrap{margin:1.6em 0}
.prose img{border-radius:12px}
.prose .note-box{font-size:17px}
.toc{border-top:1px solid var(--ink);padding-top:20px;font-size:15px}
.toc ol,.toc ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.toc a{text-decoration:none;color:var(--mute)}.toc a:hover{color:var(--ink)}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--on-mute);font-size:14.5px;margin-top:28px}

/* forms (shared look for any converted form) */
.field-l{display:block;font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.input{width:100%;height:54px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font:400 16px var(--sans);padding:0 16px;transition:border-color .2s,box-shadow .2s}
textarea.input{height:auto;min-height:140px;padding:14px 16px;resize:vertical}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(198,161,91,.25)}

/* scroll reveal is opt-in per element via .rv (see site.js) */

@media (max-width:1100px){
  .tiles.three{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
}
@media (max-width:860px){
  .phero{padding:132px 0 80px}
  .phero.short{padding:120px 0 64px}
  .phero h1{font-size:clamp(40px,11vw,60px)}
  .phero.short h1{font-size:clamp(38px,10vw,54px)}
  .phero .ctas{flex-direction:column;align-items:stretch;gap:14px}
  .phero .ctas .btn{justify-content:center}
  .phero .ctas .tlink{align-self:flex-start}
  .sec{padding:88px 0}.sec.tight{padding:64px 0}
  .sec h2{font-size:clamp(34px,9vw,46px)}
  .head{margin-bottom:40px}
  .split,.split.even{grid-template-columns:1fr;gap:32px}
  .split>.sticky{position:static}
  .tiles,.tiles.three{grid-template-columns:1fr}
  .tile{padding:28px 24px}
  .steps{grid-template-columns:1fr;row-gap:32px}
  .works{grid-template-columns:1fr;gap:48px}
  .faq .ans{padding-right:0}
  .cta>.wrap{padding-top:100px;padding-bottom:90px}
  .cta h2{font-size:clamp(40px,11vw,58px)}
  .cta .ctas{flex-direction:column;align-items:stretch;gap:14px}
  .cta .ctas .btn{justify-content:center;white-space:normal;height:auto;min-height:58px;padding:14px 24px;text-align:center}
  .cta .ctas .tlink{align-self:flex-start}
  .prose{font-size:17px}
  .sec .btn,.phero .btn{white-space:normal;text-align:center;height:auto;min-height:54px;padding-top:12px;padding-bottom:12px}
}