/* Arnow Solutions — shared theme layer.
   Linked on every page AFTER site.css. Loaded with theme.js in <head>.

   1. the toggle control + the header row it sits in   (both themes, every page)
   2. light theme: tokens + the form page              (moved out of contact.html)
   3. light theme: the home hero                       (hero3)

   Dark is the default. Every light rule is scoped to body.light, so a visitor with
   no stored preference gets the dark site untouched. site.css is not edited. */

/* ============================================================================
   1. header row + theme toggle
   the same control, the same markup, on every page — one definition, no drift
   ========================================================================== */
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.nav .brand{width:auto}
.tt{position:relative;flex:0 0 auto;width:44px;height:44px;margin:0;padding:0;
  display:grid;place-items:center;border:0;background:none;color:var(--mu);cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:color .4s var(--ease)}
.tt::before{content:"";position:absolute;inset:3px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.tt:hover{color:var(--accent)}
.tt:hover::before{border-color:rgba(94,234,212,.45)}
.tt:active::before{background:rgba(94,234,212,.07)}
.tt:focus-visible{border-radius:999px;outline-offset:2px}
.tt svg{grid-area:1/1;display:block;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.tt .i-moon{opacity:0;transform:rotate(-45deg) scale(.72)}
body.light .tt .i-sun{opacity:0;transform:rotate(45deg) scale(.72)}
body.light .tt .i-moon{opacity:1;transform:none}

/* ============================================================================
   2. light theme — tokens, then the form page
   every rule is class-scoped; the tokens live here and nowhere else
   ========================================================================== */
body.light{
  --ink:#faf7f0; --fg:#182027; --mu:#55606a; --line:#e6e0d3; --accent:#0b6f66;
  background:#faf7f0;
  /* daylight: a warm paper base with the light falling from the top left */
  background-image:radial-gradient(125% 78% at 14% -8%,#fffdf8 0%,#faf7f0 44%,#f3eee2 100%);
  color-scheme:light}
body.light .nav{background:rgba(250,247,240,.82);border-bottom-color:#e3dccd}
body.light .tt::before{border-color:#d5cdbd}
body.light .tt:hover::before{border-color:rgba(11,111,102,.45);background:rgba(11,111,102,.04)}
body.light .tt:active::before{background:rgba(11,111,102,.07)}
/* the PNG is cut for a dark header: invert lightness, hold the hue, so the white
   wordmark reads as ink and the teal stays teal (measured: #e0e0e0→#1f1f1f 15.4:1,
   cyan→#006868 6.2:1 on the paper) */
body.light .brand img{filter:invert(1) hue-rotate(180deg)}

/* the form card — dark base first, then its paper counterpart */
.card{position:relative;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);backdrop-filter:blur(10px)}
.card::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -20%,rgba(94,234,212,.10),transparent 60%)}
body.light .card{background:#fff;border-color:#e6e0d3;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(24,32,39,.05),0 2px 10px -4px rgba(24,32,39,.06),
    0 30px 54px -34px rgba(24,32,39,.30)}
body.light .card::before{background:radial-gradient(120% 90% at 50% -20%,rgba(13,148,136,.07),transparent 62%)}

.fld{margin:0 0 16px}
.fld label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin:0 0 7px}
.fld input,.fld textarea{width:100%;font:inherit;color:var(--fg);background:rgba(7,13,24,.62);
  border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:13px 14px;transition:border-color .2s,box-shadow .2s;outline:none}
.fld input::placeholder,.fld textarea::placeholder{color:#66788f}
.fld input:focus,.fld textarea:focus{border-color:rgba(94,234,212,.65);box-shadow:0 0 0 3px rgba(94,234,212,.12)}
.fld textarea{min-height:118px;resize:vertical;line-height:1.5}
body.light .fld input,body.light .fld textarea{background:#fdfcf9;border-color:#968f80;color:#182027;
  box-shadow:0 1px 1px rgba(24,32,39,.03)}
body.light .fld input::placeholder,body.light .fld textarea::placeholder{color:#6e685e}
body.light .fld input:focus,body.light .fld textarea:focus{border-color:#0b6f66;
  box-shadow:0 0 0 3px rgba(13,148,136,.16)}

body.light .btn{box-shadow:0 8px 18px -8px rgba(13,148,136,.5),inset 0 1px 0 rgba(255,255,255,.5),
  inset 0 -1px 0 rgba(4,32,29,.12)}
body.light .btn:hover{box-shadow:0 13px 26px -9px rgba(13,148,136,.55),inset 0 1px 0 rgba(255,255,255,.55)}

.msg{margin:0 0 14px;padding:11px 13px;border-radius:10px;font-size:13.5px;display:none}
.msg.err{display:block;background:rgba(255,99,99,.10);border:1px solid rgba(255,99,99,.35);color:#ffc9c9}
.msg.ok{display:block;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.35);color:#bdf5ea}
body.light .msg.err{background:#fdf2f0;border-color:#e3b5ac;color:#8e2f22}
body.light .msg.ok{background:#eefaf7;border-color:#b7e3da;color:#0a6159}

.done{text-align:center;padding:12px 0 4px}
.done .tick{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:rgba(94,234,212,.10);border:1px solid rgba(94,234,212,.35);color:var(--accent)}
.done h2{font-size:24px;margin:0 0 8px}
.done p{font-size:14px;margin:0}
body.light .done .tick{background:#eaf7f4;border-color:#bfe4dc;color:#0b6f66}

body.light .skip{background:#0b6f66;color:#fff}

/* ============================================================================
   3. light theme — home hero (hero3)
   Paper, ink, one accent. The mascot is a dark teal character: on paper he finally
   has contrast, so the job here is to give him a floor and get the UI out of the
   near-invisible grey band the dark theme could afford and paper cannot.
   ========================================================================== */

/* the ground: a warm light falling from the top, and no black vignette */
body.light .hero3::before{background:
  radial-gradient(58% 52% at 50% 56%,rgba(24,80,92,.05),transparent 72%),
  radial-gradient(70% 55% at 50% 42%,rgba(13,148,136,.055),transparent 76%)}

/* dot matrix: ink dots instead of white ones, still only lit around the pointer */
body.light .hero3 .dots{background-image:radial-gradient(rgba(24,32,39,.13) 1px,transparent 1px)}

/* the stage gets a floor: a warm studio sweep behind the cut-out, so he stands
   on the page instead of floating over a flat rectangle of paper */
body.light .hero3 .stage{background:radial-gradient(64% 56% at 50% 58%,
  #fffefb 0%,rgba(255,253,247,.62) 44%,rgba(255,253,247,0) 74%)}
/* the cast shadow under the shoes. The baked frames carry their own occlusion but
   no floor, so the pool has to be wider than the footprint and its core has to sit
   just under the soles — centred lower it hides behind the shoes and he floats. */
body.light .hero3 .stage .contact{left:50%;bottom:0;width:60%;height:12%;filter:blur(11px);
  background:radial-gradient(ellipse at 50% 30%,rgba(70,50,25,.42),rgba(64,46,24,.16) 52%,transparent 78%)}

/* speech bubble: warm paper glass, ink text, teal hairline */
body.light .albie-say{background:rgba(255,253,248,.95);border-color:rgba(11,111,102,.24);color:#182027;
  box-shadow:0 10px 26px -10px rgba(24,32,39,.22),0 1px 2px rgba(24,32,39,.06)}
body.light .albie-say::after{background:rgba(255,253,248,.95);border-color:rgba(11,111,102,.24)}

/* cursor hint: a tinted chip rather than a white pill, so it reads as a control
   on paper and not as disabled ghost text. (No opacity rule here: the pill is
   fully opaque in dark — the .hint selectors in site.css never matched this
   element, its class is .aim-badge — and the site's own .is-gone fade handles
   hiding it on pointer move.) */
body.light .aim-badge{background:rgba(11,111,102,.07);border-color:rgba(11,111,102,.30);color:#0b5f58;
  box-shadow:0 6px 18px -8px rgba(24,32,39,.28),0 1px 2px rgba(24,32,39,.06)}

/* services list: white pills on the paper, carrying the same whisper shadow the
   form card uses (a hairline alone disappears at this size); the numbers and the
   current row carry the accent */
body.light .hero3 .svc li{border-color:#e8e2d5;background:#fff;color:var(--mu);
  box-shadow:0 1px 2px rgba(24,32,39,.05),0 2px 6px -3px rgba(24,32,39,.07)}
body.light .hero3 .svc .n{color:var(--accent)}
body.light .hero3 .svc li:hover,body.light .hero3 .svc li.on{border-color:rgba(11,111,102,.42);
  background:rgba(11,111,102,.07);color:var(--fg)}
body.light .r-note{color:var(--mu)}

/* body copy: real ink, a shade under the headline */
body.light .hero3 .lede{color:#3f4a54}

/* The intro clip has a baked dark ground (its poster corner is #23150c): on paper
   it reads as a hole, and framing it as a "screen" only turns it into a deliberate
   black rectangle. So light mode skips the clip entirely and hands straight over to
   the mascot standing on the page — theme.js calls site.js's __introSkip on load and
   on every switch to light. Dark keeps the clip. */
body.light .hero3 .stage .intro-wrap{display:none}