/* =========================================================================
   The Next Beacon — "Signal" (poster). Light + dark, theme-switchable.
   Brand: traced lighthouse-and-sun. One accent: the amber sun.
   Tokens are decoupled (--text / --border / --panel-ink) so the whole
   poster inverts cleanly between themes.
   ========================================================================= */
@font-face { font-family:"Geist"; src:url("/fonts/Geist.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/fonts/GeistMono.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root{
  --paper:#f4efe2; --paper-2:#ebe4d2; --paper-3:#e2dac7;
  --text:#15120c; --text-soft:#3a342a; --muted:#6b6456;
  --amber:#f5ae24; --amber-deep:#b0680c; --teal:#0e3b37; --cream:#f6f1e4;
  --border:#15120c; --line:rgba(21,18,12,.14);
  --panel-ink:#15120c; --panel-ink-fg:#f6f1e4;
  --field-bg:#221d14; --field-line:#3a3428;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace; --ease:cubic-bezier(.2,.85,.25,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0d0f14; --paper-2:#141822; --paper-3:#1a1f2b;
  --text:#f2efe6; --text-soft:#cdd3dc; --muted:#8b93a2;
  --amber:#f5b431; --amber-deep:#ffca5e; --teal:#103f3c; --cream:#f6f1e4;
  --border:rgba(242,239,230,.22); --line:rgba(242,239,230,.12);
  --panel-ink:#171b24; --panel-ink-fg:#f2efe6;
  --field-bg:#1a1f2b; --field-line:#2b3140;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s var(--ease),color .35s var(--ease);}
img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;}
::selection{background-color:#f5ae24;color:#15120c;}
::-moz-selection{background-color:#f5ae24;color:#15120c;}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px;}
h1,h2,h3{margin:0;font-weight:720;letter-spacing:-.035em;line-height:.92;text-wrap:balance;}
p{margin:0;}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,3rem);}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.6rem;border-radius:999px;font-weight:560;font-size:1rem;border:2px solid var(--border);cursor:pointer;transition:transform .15s var(--ease),background .2s,color .2s,border-color .2s;}
.btn svg{width:1.1em;height:1.1em;} .btn:active{transform:translateY(1px);}
.btn-fill{background:var(--text);color:var(--paper);border-color:var(--text);} .btn-fill:hover{background:var(--amber-deep);border-color:var(--amber-deep);color:#fff;}
.btn-out{background:transparent;color:var(--text);} .btn-out:hover{background:var(--text);color:var(--paper);}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--border);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:720;font-size:1.15rem;letter-spacing:-.03em;}
.brand img{width:34px;height:34px;}
.brand .m-dark{display:none;} :root[data-theme="dark"] .brand .m-light{display:none;} :root[data-theme="dark"] .brand .m-dark{display:block;}
.nav-links{display:none;gap:2rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;}
.nav-links a:hover{color:var(--amber-deep);}
.nav-right{display:flex;align-items:center;gap:.7rem;}
.ttoggle{width:44px;height:44px;border:2px solid var(--border);border-radius:12px;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s;}
.ttoggle:hover{border-color:var(--amber-deep);color:var(--amber-deep);}
.ttoggle svg{width:20px;height:20px;} .ttoggle .i-moon{display:none;} :root[data-theme="dark"] .ttoggle .i-sun{display:none;} :root[data-theme="dark"] .ttoggle .i-moon{display:block;}
.menu-btn{width:44px;height:44px;border:2px solid var(--border);border-radius:12px;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;}
.menu-btn svg{width:20px;height:20px;}
.msheet{display:none;flex-direction:column;padding:.5rem clamp(1.2rem,4vw,3rem) 1.3rem;border-bottom:2px solid var(--border);}
.msheet.open{display:flex;} .msheet a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;padding:.9rem 0;border-bottom:1px solid var(--line);}
@media(min-width:900px){.nav-links{display:flex;}.menu-btn{display:none;}}

/* hero */
.hero{position:relative;overflow:hidden;padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(3rem,7vw,5.5rem);}
.hero .sun{position:absolute;z-index:0;right:-16%;top:-30%;width:min(92vw,760px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 55%,var(--amber) 0 58%,rgba(245,174,36,.35) 66%,transparent 74%);animation:sunbreath 5s ease-in-out infinite;}
/* pulsing halo around the disc */
.hero .sun::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 120px 30px rgba(245,174,36,.5);animation:sunglow 5s ease-in-out infinite;}
/* a bright gleam that sweeps around the disc so the light clearly shines */
.hero .sun::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,247,220,.8),rgba(255,247,220,0) 44%);mix-blend-mode:screen;transform-origin:50% 50%;animation:sunshine 13s linear infinite,sungleam 3.6s ease-in-out infinite;}
@keyframes sunbreath{0%,100%{transform:scale(1);opacity:.84;}50%{transform:scale(1.07);opacity:1;}}
@keyframes sundim{0%,100%{opacity:.72;}50%{opacity:1;}}
@keyframes sunglow{0%,100%{opacity:.22;transform:scale(1);}50%{opacity:.92;transform:scale(1.09);}}
@keyframes sunshine{to{transform:rotate(360deg);}}
@keyframes sungleam{0%,100%{opacity:.35;}50%{opacity:.95;}}
:root[data-theme="dark"] .hero .sun{background:radial-gradient(circle at 50% 55%,var(--amber) 0 56%,rgba(245,180,49,.4) 66%,transparent 76%);}
.hero-in{position:relative;z-index:2;}
/* mobile: single column puts the eyebrow/headline over the sun — fade the sun's
   top into the page bg so the text band stays clean and the sun rises below it */
@media (max-width:900px){
  .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:1;background:linear-gradient(180deg,var(--paper),var(--paper) 44%,transparent);pointer-events:none;}
}
.eye{font-family:var(--mono);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-deep);}
.hero h1{font-size:clamp(3.4rem,13vw,9rem);line-height:.86;margin-top:1.2rem;letter-spacing:-.045em;font-weight:760;max-width:14ch;}
.hero h1 .u{position:relative;white-space:nowrap;}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.085em;background:var(--amber-deep);}
.hero-row{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;margin-top:clamp(2rem,4vw,3rem);}
.hero-row p{font-size:clamp(1.1rem,1.9vw,1.35rem);color:var(--text-soft);max-width:34ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;}
.ticker{margin-top:2.5rem;border-block:2px solid var(--border);overflow:hidden;white-space:nowrap;}
.ticker-tr{display:inline-flex;padding:.7rem 0;font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;animation:march 26s linear infinite;}
.ticker-tr b{color:var(--amber-deep);font-weight:500;}
@keyframes march{to{transform:translateX(-50%);}}

/* full-bleed project panels */
.panel{padding-block:clamp(3.5rem,8vw,7rem);}
.panel .wrap{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.panel .num{font-family:var(--mono);font-size:.85rem;letter-spacing:.2em;opacity:.7;}
.panel h2{font-size:clamp(2.6rem,7vw,4.6rem);margin-top:.6rem;letter-spacing:-.04em;}
.panel .desc{font-size:clamp(1.05rem,1.7vw,1.2rem);margin-top:1.2rem;max-width:46ch;opacity:.88;}
.panel .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;}
.panel .meta span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:.32rem .7rem;opacity:.85;}
.panel .shot{display:flex;justify-content:center;}
.panel .device{width:clamp(180px,44vw,240px);aspect-ratio:1290/2796;border-radius:30px;padding:8px;background:#111;box-shadow:0 40px 70px -34px rgba(0,0,0,.6);}
.panel .device img{width:100%;height:100%;object-fit:cover;border-radius:22px;}
.panel.ink{background:var(--panel-ink);color:var(--panel-ink-fg);} .panel.ink .eye{color:var(--amber);}
.panel.amber{background:var(--amber);color:#15120c;} .panel.amber .eye{color:#15120c;}
.panel.teal{background:var(--teal);color:var(--cream);} .panel.teal .eye{color:var(--amber);}
:root[data-theme="dark"] .panel.ink{border-block:1px solid var(--line);}
@media(min-width:860px){.panel .wrap{grid-template-columns:1.1fr .9fr;} .panel.flip .shot{order:-1;}}

/* capabilities */
.caps{padding-block:clamp(3.5rem,8vw,6.5rem);}
.caps h2{font-size:clamp(2.2rem,5.5vw,3.6rem);max-width:16ch;}
.caplist{margin-top:3rem;border-top:2px solid var(--border);}
.caprow{display:grid;grid-template-columns:1fr;gap:.6rem 2rem;padding:1.8rem 0;border-bottom:2px solid var(--border);align-items:baseline;}
.caprow .k{font-family:var(--mono);font-size:.8rem;color:var(--amber-deep);}
.caprow h3{font-size:clamp(1.4rem,3vw,2rem);} .caprow p{color:var(--muted);max-width:52ch;}
@media(min-width:820px){.caprow{grid-template-columns:4rem 1fr 1.1fr;}}

/* process */
.proc{padding-block:clamp(3rem,6vw,5rem);background:var(--paper-2);}
.proc h2{font-size:clamp(2rem,5vw,3rem);}
.pgrid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1.2rem;}
.pcard{border:2px solid var(--border);border-radius:16px;padding:1.6rem;background:var(--paper);}
.pcard .n{font-family:var(--mono);color:var(--amber-deep);font-weight:600;} .pcard h3{margin-top:.5rem;font-size:1.3rem;} .pcard p{color:var(--muted);margin-top:.5rem;font-size:.95rem;}
@media(min-width:720px){.pgrid{grid-template-columns:repeat(4,1fr);}}

/* faq */
.faq-s{padding-block:clamp(3rem,6vw,5rem);}
.faq-s h2{font-size:clamp(2rem,5vw,3rem);}
.faq{margin-top:2.5rem;display:grid;grid-template-columns:1fr;}
.faq details{border-top:2px solid var(--border);} .faq details:last-of-type{border-bottom:2px solid var(--border);}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.3rem 0;font-size:1.08rem;font-weight:560;}
.faq summary::-webkit-details-marker{display:none;}
.faq .plus{width:22px;height:22px;flex:none;color:var(--amber-deep);transition:transform .25s var(--ease);}
.faq details[open] .plus{transform:rotate(45deg);}
.faq p{color:var(--muted);padding:0 0 1.35rem;max-width:64ch;}
@media(min-width:900px){.faq{grid-template-columns:1fr 1fr;gap:0 3.5rem;}}

/* contact (always deep) */
.contact{background:#14100a;color:var(--cream);padding-block:clamp(3.5rem,7vw,6rem);}
:root[data-theme="dark"] .contact{background:#090b10;}
.contact-in{display:grid;grid-template-columns:1fr;gap:2.5rem;}
.contact h2{font-size:clamp(2.4rem,6vw,4rem);}
.contact .eye{color:var(--amber);}
.contact .lead{color:#c9c2b2;margin-top:1.2rem;font-size:1.1rem;max-width:40ch;}
.cdir{margin-top:1.8rem;display:grid;gap:.7rem;} .cdir a{display:inline-flex;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.95rem;color:var(--cream);} .cdir a svg{width:19px;height:19px;color:var(--amber);} .cdir a:hover{color:var(--amber);}
.cdir .note{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8a8271;}
form{display:grid;gap:1rem;}
.fld{display:grid;gap:.4rem;} .fld label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#b7b0a0;} .fld label .req{color:var(--amber);}
.fld input,.fld select,.fld textarea{background:var(--field-bg);border:1.5px solid var(--field-line);border-radius:10px;color:var(--cream);font-family:var(--sans);font-size:1rem;padding:.85rem .95rem;color-scheme:dark;}
.fld textarea{min-height:110px;resize:vertical;} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--amber);}
.fld select option{color:#f6f1e4;background-color:#1a1f2b;}
.two{display:grid;grid-template-columns:1fr;gap:1rem;} @media(min-width:560px){.two{grid-template-columns:1fr 1fr;}}
.btn-amber{background:var(--amber);color:#15120c;border-color:var(--amber);width:100%;justify-content:center;} .btn-amber:hover{background:var(--cream);border-color:var(--cream);}
.fnote{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:#8a8271;text-align:center;}
.fstatus{display:none;padding:.8rem 1rem;border-radius:9px;font-size:.9rem;} .fstatus.show{display:block;} .fstatus.ok{background:rgba(245,174,36,.16);border:1px solid var(--amber);color:#ffdf9c;} .fstatus.err{background:rgba(255,110,90,.14);border:1px solid #ff7a5a;color:#ffb4a2;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media(min-width:900px){.contact-in{grid-template-columns:.85fr 1.15fr;}}

/* footer */
.foot{background:#14100a;color:#b7b0a0;border-top:1px solid #2a2519;padding-block:2.4rem;}
:root[data-theme="dark"] .foot{background:#090b10;border-top-color:#20242e;}
.foot-in{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.78rem;}
.foot-brand{display:flex;align-items:center;gap:.6rem;color:var(--cream);font-weight:600;font-family:var(--sans);} .foot-brand img{width:28px;height:28px;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .ticker-tr,.hero .sun::before{animation:none;}
  /* drop the movement but keep a gentle light breath */
  .hero .sun{animation:sundim 5s ease-in-out infinite;}
  .hero .sun::after{animation:sundim 5s ease-in-out infinite;}
  .reveal{opacity:1;transform:none;transition:none;}
}