/* CASTILLOWORKS SITE 1-A : THE SPECTRUM
   One light, six wavelengths. Gallery-white field, ink type,
   refracted color as the only decoration.
   Radius system: surfaces 18px, interactive pill. Theme: light, locked. */

@font-face{font-family:'Cabinet Grotesk';src:url(/assets/fonts/cabinetgrotesk-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url(/assets/fonts/cabinetgrotesk-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url(/assets/fonts/cabinetgrotesk-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/generalsans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/generalsans-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/generalsans-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --field:#f7f7f4;
  --card:#ffffff;
  --ink:#17161b;
  --dim:#585760;
  --faint:#8b8a93;
  --line:#e6e5e0;
  --iron:#d92f27;
  --gc:#e07000;
  --nn:#0f9d52;
  --bro:#155fd8;
  --prod:#7434d8;
  --cfmmw:#cf1f7a;
  --spectrum:linear-gradient(90deg,#d92f27,#e07000,#0f9d52,#155fd8,#7434d8,#cf1f7a);
  --c:var(--ink);
  --r:18px;
  --ease:cubic-bezier(.16,1,.3,1);
}
.t-iron{--c:var(--iron)} .t-gc{--c:var(--gc)} .t-nn{--c:var(--nn)}
.t-bro{--c:var(--bro)} .t-prod{--c:var(--prod)} .t-cfmmw{--c:var(--cfmmw)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--field);color:var(--ink);
  font:400 1.02rem/1.68 'General Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--c);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Cabinet Grotesk',sans-serif;line-height:1.08;letter-spacing:-.01em}
h1 em,h2 em,blockquote em{font-style:italic;color:var(--c);line-height:1.12}
button{font:inherit;cursor:pointer}

#light{position:fixed;inset:0;z-index:0;pointer-events:none}
#pbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--spectrum);transform-origin:0 50%;transform:scaleX(0);z-index:40}
main,footer{position:relative;z-index:1}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:30;background:rgba(247,247,244,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:800 1.02rem 'Cabinet Grotesk',sans-serif;letter-spacing:.06em}
.brand svg{width:26px;height:26px;fill:var(--c)}
.brand .lite{color:var(--faint);font-weight:700}
.navlinks{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.navlinks a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--dim);transition:color .25s}
.navlinks a:hover{color:var(--c)}
.btn{display:inline-block;background:var(--ink);color:#fff !important;text-decoration:none;font-weight:600;font-size:.95rem;padding:12px 26px;border-radius:999px;border:1px solid var(--ink);transition:transform .25s var(--ease),background .25s,border-color .25s;cursor:pointer}
.btn:hover{background:var(--c);border-color:var(--c);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;color:var(--ink) !important;border:1px solid #c9c8c2}
.btn.ghost:hover{background:transparent;color:var(--c) !important;border-color:var(--c)}

/* ---------- hero ---------- */
.hero{min-height:82dvh;display:flex;flex-direction:column;justify-content:center;padding-top:56px}
.hero .wrap{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center;width:100%}
.kick{font-weight:600;font-size:.95rem;color:var(--c);margin-bottom:16px}
.hero h1{font-weight:800;font-size:clamp(2.5rem,5.4vw,4.2rem);margin-bottom:22px;max-width:16ch;text-shadow:calc(var(--dx,0)*1px) 0 0 rgba(217,47,39,.28),calc(var(--dx,0)*-1px) 0 0 rgba(21,95,216,.28)}
.hero h1 em{padding-bottom:.06em;display:inline-block}
.wordmark{font-size:clamp(3.2rem,8.6vw,6.6rem) !important;max-width:none !important;letter-spacing:-.02em}
.lead{font-size:1.12rem;color:var(--dim);max-width:54ch;margin-bottom:30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-mark{position:relative;display:flex;justify-content:center}
.hero-mark svg{width:min(300px,56vw);height:auto;overflow:visible}
.portrait{position:relative}
.portrait img{border-radius:var(--r);box-shadow:0 24px 60px -24px rgba(23,22,27,.35)}
.portrait figcaption{font-size:.88rem;color:var(--faint);margin-top:12px}

/* refraction echo behind hero marks */
.refract{position:relative}
.refract .echo{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none}
.refract .echo svg{position:absolute;width:min(300px,56vw);height:auto;opacity:.16}
.refract > svg{position:relative;z-index:1}

/* ---------- ticker tape ---------- */
.tape{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;margin-top:52px;background:rgba(255,255,255,.5)}
.tape-track{display:flex;width:max-content}
.tape-set{display:flex;list-style:none;align-items:center;white-space:nowrap;padding:13px 0}
.tape-set li{display:flex;align-items:center;font-weight:500;font-size:.92rem;color:var(--dim)}
.tape-set li::after{content:"";width:7px;height:7px;margin:0 26px;background:var(--spectrum);transform:rotate(45deg);border-radius:1px;flex:none}
.tape-set a{text-decoration:none}
@media (prefers-reduced-motion:no-preference){
  .tape-track{animation:tapeMove 38s linear infinite}
  @keyframes tapeMove{to{transform:translateX(-50%)}}
}

/* ---------- manifesto ---------- */
.manifesto{padding:130px 0 110px}
.manifesto p{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.1vw,2.4rem);line-height:1.3;max-width:26ch;letter-spacing:-.01em}
.manifesto .w{opacity:.14;transition:opacity .5s ease}
.manifesto .w.lit{opacity:1}
.manifesto em{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic;padding-bottom:.08em}

/* ---------- company waves (hub) ---------- */
.wave{padding:96px 0}
.wave .wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.wave.flip .wrap{grid-template-columns:5fr 7fr}
.wave.flip .w-txt{order:2}
.wave.flip .w-viz{order:1}
.w-txt .whatis{font-weight:600;font-size:.95rem;color:var(--c);margin-bottom:12px}
.w-txt h3{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;margin-bottom:16px}
.w-txt h3 a{text-decoration:none;transition:color .3s}
.w-txt h3 a:hover{color:var(--c)}
.w-txt .dimtxt{color:var(--dim)}
.w-txt .lightline{margin-top:18px;padding-left:18px;border-left:3px solid var(--c);color:var(--dim);font-size:.97rem;max-width:52ch}
.go{display:inline-flex;align-items:center;gap:9px;margin-top:24px;text-decoration:none;font-weight:600;color:var(--ink);transition:color .25s,gap .25s}
.go svg{width:19px;height:19px;transition:transform .25s var(--ease)}
.go:hover{color:var(--c);gap:13px}
.w-viz{display:flex;justify-content:center}
.w-viz .mark{width:min(240px,48vw);padding:44px;border-radius:var(--r);background:color-mix(in srgb,var(--c) 6%,#fff);box-shadow:0 22px 55px -28px color-mix(in srgb,var(--c) 45%,transparent)}
.w-viz .mark svg{width:100%;height:auto}
.wave.full{background:color-mix(in srgb,var(--c) 5%,var(--field));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wave.full .wrap{display:block;text-align:center;max-width:820px}
.wave.full .w-viz{margin-bottom:30px}
.wave.full .w-viz .mark{background:transparent;box-shadow:none;padding:0;width:min(190px,40vw)}
.wave.full .w-txt .lightline{margin:18px auto 0;border-left:none;padding-left:0;border-top:3px solid var(--c);padding-top:16px;display:inline-block}
.wave.full .dimtxt{max-width:56ch;margin:0 auto}

/* ---------- directory bento ---------- */
.sect{padding:110px 0}
.sect h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:800;max-width:24ch}
.sect h2 em{padding-bottom:.06em;display:inline-block}
.sub{color:var(--dim);max-width:62ch;margin-top:18px}
.dir{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:44px}
.dcard{grid-column:span 2;display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r);background:color-mix(in srgb,var(--c) 6%,#fff);border:1px solid color-mix(in srgb,var(--c) 14%,var(--line));text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s;position:relative;overflow:hidden}
.dcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);opacity:0;transition:opacity .3s}
.dcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px color-mix(in srgb,var(--c) 55%,transparent)}
.dcard:hover::before{opacity:1}
.dcard.big{grid-column:span 3}
.dcard.wide{grid-column:span 6;flex-direction:row;align-items:center;gap:24px}
.dcard.wide .darr{margin-top:0;margin-left:auto}
.dcard .dtxt{display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){.dcard.wide{flex-direction:column;align-items:flex-start}.dcard.wide .darr{margin-left:0;align-self:flex-end}}
.dcard .mark{width:52px}
.dcard .mark svg{width:100%;height:auto}
.dcard h3{font-size:1.25rem;font-weight:800}
.dcard p{color:var(--dim);font-size:.95rem}
.dcard .darr{margin-top:auto;display:flex;justify-content:flex-end}
.dcard .darr svg{width:20px;height:20px;stroke:var(--c);transition:transform .3s var(--ease)}
.dcard:hover .darr svg{transform:translateX(5px)}

/* ---------- measured board ---------- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;position:relative;overflow:hidden;box-shadow:0 16px 40px -30px rgba(23,22,27,.25)}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--spectrum)}
.od{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);font-variant-numeric:tabular-nums;letter-spacing:.01em;min-height:1.3em}
.tile span{display:block;margin-top:8px;color:var(--faint);font-size:.9rem;font-weight:500}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:44px 0 26px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.stat b{display:block;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:2rem;color:var(--c);font-variant-numeric:tabular-nums}
.stat span{color:var(--faint);font-size:.9rem;font-weight:500}

/* ---------- cards / tiers / facts ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:44px}
.card,.tier,.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.card::before,.tier::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--c)}
.card:hover,.tier:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px color-mix(in srgb,var(--c) 40%,transparent)}
.tag,.fact .k{font-weight:600;font-size:.9rem;color:var(--c);margin-bottom:10px}
.card h3,.tier h3,.fact h3{font-size:1.3rem;font-weight:800;margin-bottom:12px}
.card p,.tier p,.fact p{color:var(--dim);font-size:.97rem}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.price{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:1.5rem;color:var(--c);margin-bottom:12px}
.stamp{position:absolute;top:22px;right:24px;font-size:.8rem;font-weight:600;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,#fff);padding:4px 12px;border-radius:999px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:10px}
.dimtxt{color:var(--dim)}

/* ---------- route ---------- */
.route{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:44px;position:relative}
.rstop{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.rstop .pin{width:38px;height:38px;margin-bottom:16px}
.rstop .pin svg{width:100%;height:auto}
.rstop h3{font-size:1.12rem;font-weight:800;margin-bottom:8px}
.rstop p{color:var(--dim);font-size:.94rem}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 26px;transition:border-color .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.faq summary{cursor:pointer;font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:1.08rem;padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;color:var(--c);font-size:1.4rem;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--dim)}

/* ---------- builder ---------- */
.builder{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;max-width:860px;margin-top:40px;box-shadow:0 20px 50px -34px rgba(23,22,27,.3)}
.bgroup{margin-bottom:22px}
.bgroup::before{content:attr(data-label);display:block;font-weight:600;font-size:.88rem;color:var(--faint);margin-bottom:10px}
.chip{background:var(--field);border:1px solid var(--line);border-radius:999px;padding:9px 20px;margin:0 8px 8px 0;font-size:.93rem;font-weight:500;color:var(--dim);transition:all .22s}
.chip:hover{border-color:var(--c);color:var(--c)}
.chip.on{background:var(--c);border-color:var(--c);color:#fff}
.bsummary{border-top:1px solid var(--line);padding:18px 0;color:var(--dim);font-size:.94rem;min-height:2.4em}
.bsummary span::before{content:"Your selection: ";font-weight:600;color:var(--ink)}

/* ---------- band ---------- */
.band{padding:120px 0;border-top:1px solid var(--line)}
.band blockquote{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.22;max-width:24ch}
.band .after{margin-top:22px;color:var(--dim);max-width:60ch}

/* ---------- legal ---------- */
.legal{padding:110px 0;border-top:1px solid var(--line)}
.legal h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;margin-bottom:34px}
.legal h3{font-size:1.12rem;font-weight:700;margin:30px 0 10px;color:var(--c)}
.legal p{color:var(--dim);max-width:76ch;margin-bottom:14px}
.legal a{color:var(--ink)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:44px}
.lgrid a{background:color-mix(in srgb,var(--c) 5%,#fff);border:1px solid color-mix(in srgb,var(--c) 14%,var(--line));border-radius:var(--r);padding:26px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.lgrid a:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px color-mix(in srgb,var(--c) 50%,transparent)}
.lgrid h3{font-size:1.1rem;font-weight:800;margin-bottom:8px;color:var(--c)}
.lgrid p{color:var(--dim);font-size:.93rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--card);padding:70px 0 40px;margin-top:40px}
footer::before{content:"";display:block;height:3px;background:var(--spectrum);margin:-70px 0 66px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.fbrand p{color:var(--dim);font-size:.95rem;margin-top:16px;max-width:34ch}
footer h4{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:1rem;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{text-decoration:none;color:var(--dim);font-size:.95rem;transition:color .25s}
footer li a:hover{color:var(--c)}
.fbase{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:50px;padding-top:26px;color:var(--faint);font-size:.88rem}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rv.on{opacity:1;transform:none;filter:none}
html.flat .rv,html.nojs .rv{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap,.wave .wrap,.wave.flip .wrap{grid-template-columns:1fr;gap:36px}
  .wave.flip .w-txt{order:1}
  .wave.flip .w-viz{order:2}
  .w-viz .mark{width:min(180px,44vw)}
  .board,.stats{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero-mark{order:2}
  .hero-mark svg{width:min(200px,50vw)}
  .refract .echo svg{width:min(200px,50vw)}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .board,.stats{grid-template-columns:1fr 1fr}
  .dir{grid-template-columns:1fr}
  .dcard,.dcard.big{grid-column:auto}
  .fgrid{grid-template-columns:1fr}
  .hero{padding-top:36px;min-height:72dvh}
  .navlinks{gap:16px}
}
html.flat .hero{min-height:auto;padding:80px 0 40px}
html.flat #light,html.flat #pbar{display:none}