/* =======================================================================
   Fazsite -- new site (2026). Brand blue (#007FBF / #005880 / #0066CC) and the
   ring/hand mark carried from the 2003 original; everything else is new.
   Served as iso-8859-1. Assets are one level up (../img, ../images, ../logos).
   ======================================================================= */
:root{
  --ink:#0A1826; --ink-soft:#37506A; --muted:#6B84A0;
  --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#E9F0F7;
  --brand:#007FBF; --brand-deep:#005880; --accent:#00C2FF;
  --line:#D6E1EC; --ring:rgba(0,127,191,.16);
  --shadow:0 1px 2px rgba(10,24,38,.06),0 12px 30px -12px rgba(10,24,38,.18);
  --radius:16px;
  --display:"Space Grotesk","Trebuchet MS",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Dark palette. Applied when the visitor picks dark (data-theme="dark"), or
   when the system prefers dark AND the visitor has not forced light. The
   header theme button (see foot.php) sets data-theme and remembers it. */
:root[data-theme="dark"]{
  --ink:#EAF2FA; --ink-soft:#B7C8DA; --muted:#7C93AC;
  --bg:#06121D; --surface:#0D2131; --surface-2:#122A3E;
  --line:#1C374C; --ring:rgba(0,194,255,.18);
  --brand:#2BA4E0; --brand-deep:#63C6F2; --accent:#4FD4FF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -14px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EAF2FA; --ink-soft:#B7C8DA; --muted:#7C93AC;
    --bg:#06121D; --surface:#0D2131; --surface-2:#122A3E;
    --line:#1C374C; --ring:rgba(0,194,255,.18);
    --brand:#2BA4E0; --brand-deep:#63C6F2; --accent:#4FD4FF;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -14px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.02em}
p{margin:0}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); display:inline-flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--brand)}

/* ring mark: the site signature, from the logo's concentric rings */
.mark{position:relative; display:inline-grid; place-items:center}
.mark i{position:absolute; border-radius:50%; border:1.5px solid var(--ring)}
.mark i:nth-child(1){inset:0}
.mark i:nth-child(2){inset:22%}
.mark i:nth-child(3){inset:42%; border-color:var(--brand)}

/* header */
.site-head{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:24px; height:96px}
/* transparent logo, no box; colored on light, crisp white on dark */
.brand{display:inline-flex; align-items:center; line-height:0}
.brand img{height:60px; width:auto; display:block}
/* dark theme: two-tone logo built for dark backgrounds (white inside the hand
   and "Faz", blue wordmark). Two ring options exist -- swap the filename to
   pick: fazsite_header_dark.png (white rings) or fazsite_header_dark_gray.png
   (gray rings). No baked shadow; add filter:drop-shadow(...) here if wanted. */
:root[data-theme="dark"] .brand img{content:url(../logos/fazsite_header_dark.png?v=5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{content:url(../logos/fazsite_header_dark.png?v=5)}}
.theme-btn{margin-left:8px; width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-size:17px; line-height:1; display:inline-grid; place-items:center; transition:border-color .2s ease, color .2s ease, transform .15s ease}
.theme-btn:hover{border-color:var(--brand); color:var(--brand)}
.theme-btn:active{transform:scale(.94)}
.nav{display:flex; gap:26px; margin-left:auto; font-size:14.5px; font-weight:500}
.nav a{color:var(--ink-soft); position:relative; padding:4px 0}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--brand); transition:right .25s ease}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.nav a.on{color:var(--ink)} .nav a.on::after{right:0}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; font-family:var(--body)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 22px -8px var(--brand)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 28px -8px var(--brand); background:var(--brand-deep)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.head-cta{margin-left:8px}
.nav-cta{display:none}
/* hamburger: hidden on desktop, shown on small screens */
.nav-toggle{display:none; margin-left:8px; width:42px; height:42px; padding:0; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
  align-items:center; justify-content:center; gap:5px; flex-direction:column}
.nav-toggle span{display:block; width:20px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease}
.nav-toggle:hover{border-color:var(--brand)}
.site-head.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-head.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-head.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-top:92px; padding-bottom:96px}
.hero h1{font-size:clamp(38px,6vw,68px); font-weight:700}
.hero .lead{margin-top:24px; font-size:clamp(16px,2vw,19px); color:var(--ink-soft); max-width:44ch}
.hero .cta{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.hero .facts{margin-top:44px; display:flex; gap:34px; flex-wrap:wrap}
.fact b{font-family:var(--display); font-size:30px; display:block; letter-spacing:-.03em}
.fact span{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
/* hero mark: the hand enters and clicks; on the click a compact hi-tech cluster
   assembles around the fingertip, holds, fades, and the sequence loops. Two
   variants share the choreography -- fx1 (radar HUD) and fx2 (signal net);
   the page picks one via ?fx=1 / ?fx=2 (default fx1). Rings kept small. */
.hero-art{position:relative; aspect-ratio:1; overflow:visible}
.hero-art .tap{position:absolute; left:50%; top:41%; width:52%; aspect-ratio:1; transform:translate(-50%,-50%)}
.hero-art .tap i{position:absolute; border-radius:50%; border:2px solid var(--accent);
  opacity:0; transform:scale(.2); will-change:transform,opacity; animation:ringPop 4.4s ease-in-out infinite}
.hero-art .tap i:nth-child(1){inset:0}
.hero-art .tap i:nth-child(2){inset:30%; animation-delay:.1s}
.hero-art .tap .dot{position:absolute; left:50%; top:50%; width:13%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(0); opacity:0; border-radius:50%; border:2px solid var(--brand);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 60%,transparent),transparent 70%);
  animation:dotPop 4.4s ease-in-out infinite}
.hero-art .hand{position:absolute; left:50%; top:40%; width:33%; z-index:3;
  transform:translateX(-50%) translateY(150%); opacity:0; transform-origin:50% 0%;
  filter:drop-shadow(0 14px 26px rgba(0,88,128,.4)); animation:handEnter 4.4s cubic-bezier(.3,.6,.2,1) infinite}

/* fx1 -- radar HUD: dashed ring, sweep, orbiting satellite */
.fx1 .dash{position:absolute; inset:-22%; border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);
  opacity:0; animation:hudIn 4.4s ease-in-out infinite, spin 9s linear infinite}
.fx1 .sweep{position:absolute; inset:0; border-radius:50%; opacity:0;
  background:conic-gradient(from 0deg, transparent 318deg, color-mix(in srgb,var(--accent) 55%,transparent) 356deg, transparent 360deg);
  animation:hudIn 4.4s ease-in-out infinite, spin 1.9s linear infinite}
.fx1 .orbit{position:absolute; inset:-9%; border-radius:50%; animation:spin 3.2s linear infinite}
.fx1 .orbit u{position:absolute; left:50%; top:-3px; width:7px; height:7px; margin-left:-3px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent); opacity:0; animation:hudIn 4.4s ease-in-out infinite}

/* fx2 -- signal net: spokes drawing outward to glowing nodes */
.fx2 .net{position:absolute; inset:0}
.fx2 .net s{position:absolute; left:50%; top:50%; width:2px; height:56%; margin-left:-1px;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--accent) 70%,transparent));
  transform-origin:50% 0; opacity:0; animation:spoke 4.4s ease-in-out infinite}
.fx2 .net s::after{content:""; position:absolute; left:-3px; bottom:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 9px var(--accent)}
.fx2 .net s:nth-child(1){--a:18deg}
.fx2 .net s:nth-child(2){--a:74deg; animation-delay:.05s}
.fx2 .net s:nth-child(3){--a:140deg; animation-delay:.1s}
.fx2 .net s:nth-child(4){--a:206deg; animation-delay:.15s}
.fx2 .net s:nth-child(5){--a:270deg; animation-delay:.08s}
.fx2 .net s:nth-child(6){--a:322deg; animation-delay:.13s}

@keyframes handEnter{
  0%   {transform:translateX(-50%) translateY(150%); opacity:0}
  13%  {opacity:1}
  22%  {transform:translateX(-50%) translateY(0); opacity:1}
  28%  {transform:translateX(-50%) translateY(8%)}
  34%  {transform:translateX(-50%) translateY(0)}
  80%  {transform:translateX(-50%) translateY(0); opacity:1}
  92%  {transform:translateX(-50%) translateY(-8%); opacity:0}
  100% {transform:translateX(-50%) translateY(150%); opacity:0}
}
@keyframes ringPop{
  0%,27%  {transform:scale(.2); opacity:0}
  41%     {transform:scale(1.07); opacity:.95}
  48%     {transform:scale(1); opacity:.95}
  80%     {transform:scale(1); opacity:.95}
  92%     {transform:scale(1); opacity:0}
  100%    {opacity:0}
}
@keyframes dotPop{
  0%,25%  {transform:translate(-50%,-50%) scale(0); opacity:0}
  31%     {transform:translate(-50%,-50%) scale(1.3); opacity:1}
  37%     {transform:translate(-50%,-50%) scale(1); opacity:1}
  80%     {transform:translate(-50%,-50%) scale(1); opacity:1}
  92%     {transform:translate(-50%,-50%) scale(1); opacity:0}
  100%    {opacity:0}
}
@keyframes hudIn{ 0%,27%{opacity:0} 44%{opacity:1} 80%{opacity:1} 92%{opacity:0} 100%{opacity:0} }
@keyframes spoke{
  0%,27%{transform:rotate(var(--a)) scaleY(0); opacity:0}
  46%   {transform:rotate(var(--a)) scaleY(1); opacity:1}
  80%   {transform:rotate(var(--a)) scaleY(1); opacity:1}
  92%   {transform:rotate(var(--a)) scaleY(1); opacity:0}
  100%  {opacity:0}
}
@keyframes spin{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce){
  .hero-art .tap i,.hero-art .tap .dot,.hero-art .hand,
  .fx1 .dash,.fx1 .sweep,.fx1 .orbit,.fx1 .orbit u,.fx2 .net s{animation:none}
  .hero-art .tap i{opacity:.6; transform:scale(1)}
  .hero-art .tap .dot{opacity:1; transform:translate(-50%,-50%) scale(1)}
  .hero-art .hand{opacity:1; transform:translateX(-50%) translateY(0)}
  .fx1 .dash{opacity:.5} .fx1 .orbit u{opacity:1}
  .fx2 .net s{opacity:1; transform:rotate(var(--a)) scaleY(1)}
}

/* video hero: royalty-free footage under a brand-colour veil. The veil is
   near-opaque on the left (text side) and opens to brand blue on the right,
   fading into the page background at the bottom. Theme-aware via --hero-veil. */
:root{--hero-veil:linear-gradient(100deg,rgba(241,245,249,.97) 0%,rgba(241,245,249,.82) 44%,rgba(0,127,191,.30) 100%)}
:root[data-theme="dark"]{--hero-veil:linear-gradient(100deg,rgba(6,18,29,.96) 0%,rgba(6,18,29,.76) 44%,rgba(0,127,191,.34) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hero-veil:linear-gradient(100deg,rgba(6,18,29,.96) 0%,rgba(6,18,29,.76) 44%,rgba(0,127,191,.34) 100%)}}
.hero-video{position:relative; overflow:hidden; isolation:isolate}
.hero-video .wrap{grid-template-columns:1fr; padding-top:124px; padding-bottom:132px; min-height:min(76vh,700px); align-content:center}
.hero-video .hero-copy{max-width:640px}
.hero-bg{position:absolute; inset:0; z-index:-1; background:var(--surface-2) center/cover no-repeat} /* poster set inline per clip */
.hero-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.92) contrast(1.02)}
.hero-veil{position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,transparent 30%), var(--hero-veil)}
/* a faint brand glow so the footage always reads as "ours" */
.hero-veil::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 82% 40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%); pointer-events:none}
@media (max-width:720px){ .hero-vid{display:none} .hero-video .wrap{padding-top:88px; padding-bottom:96px; min-height:0} }
@media (prefers-reduced-motion:reduce){ .hero-vid{display:none} }

/* page header (inner pages) */
.page-head{padding:72px 0 8px}
.page-head h1{font-size:clamp(32px,5vw,54px); margin-top:14px}
.page-head p{margin-top:16px; color:var(--ink-soft); font-size:18px; max-width:62ch}

/* generic section */
.section{padding:72px 0}
.section+.section{border-top:1px solid var(--line)}
.section-head{max-width:640px; margin-bottom:44px}
.section-head h2{font-size:clamp(28px,4vw,40px); margin-top:14px}
.section-head p{margin-top:14px; color:var(--ink-soft); font-size:17px}

/* services grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); position:relative; transition:transform .18s ease, border-color .18s ease; display:block; color:inherit}
.card:hover{transform:translateY(-4px); border-color:var(--brand)}
.card .mark{width:26px; height:26px; margin-bottom:20px}
.card .mark i{border-width:1.5px}
.card h3{font-size:19px; font-weight:600}
.card p{margin-top:10px; color:var(--ink-soft); font-size:14.5px}
.card .go{margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--brand); display:inline-flex; gap:6px; align-items:center}
.card:hover .go{gap:11px}
.card .go span{transition:transform .18s ease}
.card:hover .go span{transform:translateX(3px)}

/* products (system list) */
.prods{display:grid; grid-template-columns:repeat(2,1fr); gap:0 46px}
.prod{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start; padding:22px 0; border-top:1px solid var(--line); color:inherit}
.prod:hover h3{color:var(--brand)}
.prod .num{font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:4px}
.prod h3{font-size:19px; transition:color .15s ease}
.prod p{margin-top:6px; color:var(--ink-soft); font-size:14px}
.chip{font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:6px; background:var(--surface-2); color:var(--brand-deep); white-space:nowrap; align-self:start}

/* clients */
.clients{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.client{aspect-ratio:3/2; background:var(--surface); border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; padding:14px; overflow:hidden}
.client img{max-height:100%; width:auto; filter:grayscale(1) opacity(.62); transition:filter .2s ease, transform .2s ease}
.client:hover img{filter:none; transform:scale(1.04)}
.client .txt{font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink-soft); text-align:center}

/* about */
.about{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.about-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.about-item h3{font-size:20px; color:var(--brand-deep); display:flex; align-items:center; gap:10px}
.about-item h3 .d{width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none}
.about-item p{margin-top:12px; color:var(--ink-soft); font-size:15px; white-space:pre-line}

/* detail page */
.detail{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.detail .shot{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.detail h1{font-size:clamp(30px,4.5vw,46px)}
.detail .block{margin-top:26px}
.detail .block h3{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:8px}
.detail .block p{color:var(--ink-soft); white-space:pre-line}
.folio{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px}
.folio a{display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.folio a:hover{border-color:var(--brand)}

/* contact form */
.form{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.field input,.field textarea{width:100%; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.field textarea{min-height:130px; resize:vertical}
.field .row{display:grid; grid-template-columns:80px 1fr; gap:10px}
.form-aside{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.form-aside h3{font-size:18px}
.form-aside p{margin-top:10px; color:var(--ink-soft); font-size:14.5px; line-height:1.8}
.note{color:var(--muted); font-size:12.5px; margin-top:6px}
.err{color:#b00020; font-size:12.5px; margin-top:6px}
@media (prefers-color-scheme:dark){.err{color:#ff8a9b}}

/* confirmation / callout */
.callout{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); max-width:720px}
.callout h2{font-size:26px}
.callout dl{margin:18px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14.5px}
.callout dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.callout dd{margin:0; color:var(--ink-soft)}

/* contact CTA band */
.contact{background:linear-gradient(135deg,var(--brand-deep),var(--brand)); color:#fff; border-radius:24px; padding:52px; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; overflow:hidden; position:relative}
.contact::before{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; border:2px solid rgba(255,255,255,.18)}
.contact::after{content:""; position:absolute; right:-20px; top:-20px; width:200px; height:200px; border-radius:50%; border:2px solid rgba(255,255,255,.14)}
.contact h2{color:#fff; font-size:clamp(26px,3.5vw,38px); position:relative}
.contact p{margin-top:14px; color:rgba(255,255,255,.82); position:relative}
.contact .addr{font-size:14.5px; line-height:1.8; position:relative}
.contact .addr b{font-family:var(--display)}
.contact .btn-primary{background:#fff; color:var(--brand-deep); box-shadow:none}
.contact .btn-primary:hover{background:#eaf6fc}
.contact .cbox{position:relative}

/* footer */
.site-foot{padding:44px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px}
.site-foot .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.site-foot .fnav{display:flex; gap:18px; flex-wrap:wrap}
.site-foot a:hover{color:var(--brand)}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* responsive */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; padding-top:64px; padding-bottom:64px}
  .hero-art{max-width:360px; order:-1}
  .grid{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:1fr; gap:0}
  .clients{grid-template-columns:repeat(4,1fr)}
  .about,.detail,.form{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr; padding:36px}
  /* collapse nav into a hamburger dropdown */
  .nav-toggle{display:flex}
  .theme-btn{margin-left:auto}
  .head-cta{display:none}
  .nav{
    position:absolute; top:100%; left:0; right:0; margin-left:0;
    display:flex; flex-direction:column; gap:0; align-items:stretch;
    padding:6px 24px 18px; font-size:16px;
    background:color-mix(in srgb,var(--bg) 96%,transparent);
    backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease}
  .site-head.nav-open .nav{opacity:1; visibility:visible; transform:none}
  .nav a{padding:14px 2px; color:var(--ink); border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a.on{color:var(--brand)}
  .nav-cta{display:inline-flex; justify-content:center; margin-top:16px; border-bottom:0; color:#fff}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .clients{grid-template-columns:repeat(3,1fr)}
  .folio{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
}