@font-face{font-family:'Lora';src:url('fonts/lora.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* Odyssey v2 — shared styles for secondary detail pages (about/process/services).
   Same design tokens as index.html; landing keeps its own inline CSS. */
:root{
  color-scheme: light;
  --paper:#EFF1ED; --panel:#FBFCFA; --ink:#14171A; --ink-2:#2C332F;
  --muted:#5B6360; --faint:#667069; --hair:#D9DDD6;
  --accent:#0E6E78; --accent-deep:#0A545C;
  --dark:#101413; --dark-ink:#EDF0EC; --neon:#00F0FF;
  --serif:'Lora','Iowan Old Style',Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,system-ui,sans-serif;
  --wrap:860px; --pad:clamp(1.25rem,5vw,4rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;margin:0;text-wrap:balance}
p{margin:0}

/* floating pill nav (same as landing, links point back at index.html) */
.floatnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:1.7rem;width:max-content;
  background:rgba(14,18,17,.62);backdrop-filter:blur(22px) saturate(1.8) brightness(1.06);-webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.06);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.5rem .55rem .5rem 1.3rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.05),0 18px 44px -18px rgba(0,0,0,.5);
  max-width:calc(100vw - 24px)}
@supports not (backdrop-filter:blur(1px)){.floatnav{background:rgba(12,16,15,.85)}}
.floatnav .logo{font-family:var(--serif);color:#F2F5F2;font-size:1.15rem;display:flex;align-items:center;gap:.5rem}
.floatnav .logo .o{width:12px;height:12px;border:2.5px solid var(--neon);border-radius:50%;display:inline-block;box-shadow:0 0 10px rgba(0,240,255,.5)}
.floatnav .fn-links{display:flex;gap:1.5rem;font-size:0.88rem;color:#E4E9E6}
.floatnav .fn-links a:hover{color:#fff}
.floatnav .fn-cta{font-size:0.86rem;font-weight:600;color:#04201F;background:var(--neon);border-radius:999px;padding:.55rem 1.1rem;transition:.2s}
.floatnav .fn-cta:hover{filter:brightness(1.12)}
@media(max-width:720px){.floatnav{gap:1rem;padding-left:1.05rem}.floatnav .fn-links{display:none}
  .floatnav .fn-cta{white-space:nowrap;font-size:.82rem;padding:.5rem .95rem}}

/* page header band */
.phead{padding:clamp(7rem,14vh,9rem) 0 clamp(2.6rem,5vw,3.6rem);text-align:center}
.phead .crumb{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:.42rem .95rem;display:inline-block}
.phead h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.06;margin-top:1.2rem}
.phead .lede{color:var(--muted);max-width:52ch;margin:1.2rem auto 0}

/* article body */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
article{padding-bottom:clamp(3rem,7vw,5rem)}
article section{padding:clamp(1.8rem,4vw,2.6rem) 0;border-top:1px solid var(--hair);scroll-margin-top:88px}
article section:first-of-type{border-top:0}
article h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin-bottom:.9rem}
article h3{font-size:1.15rem;margin:1.4rem 0 .4rem;color:var(--ink)}
article p{color:var(--ink-2);max-width:64ch}
article p + p{margin-top:.9rem}
article ul{margin:.8rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}
article li{position:relative;padding-left:1.2rem;color:var(--ink-2);max-width:62ch}
article li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
article li b{color:var(--ink);font-weight:600}
.note{color:var(--faint);font-size:.92rem;font-style:italic;font-family:var(--serif)}
/* editorial two-column: heading rail left, prose right (desktop only) */
@media(min-width:1100px){
  .wrap{max-width:1060px}
  article section{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:4.5rem}
  article section>*{grid-column:2}
  article section>h2{grid-column:1;grid-row:1;margin-bottom:0}
}

/* ── services page: numbered long-form systems (navbar-style anatomy, studio voice) ── */
.sindex{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1.8rem auto 0;max-width:860px}
.sindex a{font-size:.8rem;border:1px solid var(--hair);background:var(--panel);border-radius:999px;padding:.45rem .95rem;color:var(--muted);transition:border-color .2s,color .2s,transform .2s}
.sindex a b{color:var(--accent);font-weight:600;margin-right:.45rem;font-variant-numeric:tabular-nums}
.sindex a:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.svcpage section{padding:clamp(2.6rem,5vw,3.8rem) 0}
.rail{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem}
.rail .ghost{font-family:var(--serif);font-size:clamp(2.8rem,4.5vw,4.2rem);line-height:.9;color:color-mix(in srgb,var(--ink) 11%,transparent);font-variant-numeric:tabular-nums}
.rail .kick{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.svcpage h2{margin-bottom:1rem}
.duo{display:grid;gap:1.8rem;margin-top:1.8rem}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr;gap:2.6rem}}
.duo h3{margin:0 0 .75rem;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.duo ul{margin-top:0}
.seccta{margin-top:1.9rem}
.seccta a{color:var(--accent);font-weight:600;font-size:.95rem;border-bottom:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);padding-bottom:2px;transition:border-color .2s}
.seccta a:hover{border-color:var(--accent)}
@media(min-width:1100px){
  .svcpage section{grid-template-columns:200px minmax(0,1fr)}
  .svcpage section>h2{grid-column:2;grid-row:auto;margin-bottom:1rem}
  .svcpage section>.rail{grid-column:1;grid-row:1/span 8;margin-bottom:0}
}

/* end-of-page CTA band */
.endcta{background:var(--dark);color:var(--dark-ink);text-align:center;padding:clamp(3rem,7vw,4.5rem) var(--pad)}
.endcta h2{color:var(--dark-ink);font-size:clamp(1.7rem,3.4vw,2.4rem)}
.endcta h2 em{font-style:italic;color:var(--neon)}
.endcta p{color:#A7B0AB;margin:1rem auto 0;max-width:46ch}
.endcta .btn{display:inline-block;margin-top:1.7rem;background:var(--neon);color:#04201F;font-weight:600;border-radius:999px;padding:.85rem 1.6rem;transition:.2s}
.endcta .btn:hover{filter:brightness(1.12)}
@media(prefers-reduced-motion:no-preference){.fn-cta:active,.endcta .btn:active{transform:scale(.96)}}

/* footer (same as landing) */
footer{padding:2.4rem 0;border-top:1px solid var(--hair)}
.foot-in{max-width:1120px;margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:0.82rem;color:var(--faint)}
.foot-in .tag{font-family:var(--serif);font-style:italic}
.foot-in a:hover{color:var(--ink)}

/* doodle founders peeking into the about page header */
.pheadband{position:relative;overflow:hidden}
.peek{position:absolute;bottom:0;width:clamp(120px,14vw,200px);pointer-events:none;transition:transform .9s cubic-bezier(.2,.9,.25,1.1)}
.peek svg{display:block;width:100%;height:auto;stroke:#14171A;stroke-linecap:round;stroke-linejoin:round}
.peek-l{left:0;transform:translateX(-105%) rotate(-4deg)}
.peek-r{right:0;transform:translateX(105%) rotate(4deg)}
.pheadband.peeked .peek-l{transform:translateX(-16%) rotate(-4deg)}
.pheadband.peeked .peek-r{transform:translateX(16%) rotate(4deg)}
.peek .headtilt{transform-origin:100px 130px;animation:headbob 5.2s ease-in-out infinite}
.peek .headtilt2{transform-origin:105px 130px;animation:headbob 6.1s ease-in-out infinite reverse}
@keyframes headbob{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-3.5deg)}}
@media(max-width:900px){.peek{width:96px;opacity:.9}}
@media(prefers-reduced-motion:reduce){
  .peek{transition:none}
  .pheadband .peek-l{transform:translateX(-16%) rotate(-4deg)}
  .pheadband .peek-r{transform:translateX(16%) rotate(4deg)}
  .peek .headtilt,.peek .headtilt2{animation:none}
}

/* scroll reveal */
.srev{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.srev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.srev{opacity:1;transform:none;transition:none}}