/* ===========================================================================
   layout.css — custom cursor, header & nav, mobile menu, hero, section frame,
   footer
   =========================================================================== */

/* custom cursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:400;border-radius:999px;display:none}
body.has-cursor .cursor-dot,body.has-cursor .cursor-ring{display:flex;align-items:center;justify-content:center}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor .tcol li,body.has-cursor .evt-row{cursor:none}
.cursor-dot{width:6px;height:6px;background:var(--terracotta);transform:translate(-50%,-50%);transition:opacity .2s}
.cursor-ring{width:34px;height:34px;border:1px solid var(--line-2);transform:translate(-50%,-50%);transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),background .25s,border-color .25s,border-radius .25s,padding .25s}
.cursor-ring .clabel{font-family:var(--mono);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--bone);opacity:0;white-space:nowrap;transition:opacity .2s}
body.hovering .cursor-ring{width:60px;height:60px;background:rgba(192,86,59,0.12);border-color:var(--terracotta)}
body.hovering .cursor-dot{opacity:0}
body.labeling .cursor-ring{width:auto;height:auto;padding:0.7rem 1.05rem;background:var(--terracotta);border-color:var(--terracotta)}
body.labeling .cursor-ring .clabel{opacity:1}
/* stick: ring wraps a button (size/radius set inline by JS) */
body.sticking .cursor-ring{border-width:1.5px;border-color:var(--terracotta);background:rgba(192,86,59,0.07)}
body.sticking .cursor-dot{opacity:0}
/* cert-peek: ring morphs into a rounded outline that frames the certificate card */
body.cert-peek .cursor-ring{border-width:1.5px;border-color:var(--terracotta);background:transparent}
body.cert-peek .cursor-dot{opacity:0}
/* frame: ring expands to outline a large container (Figma embed). Ring is JS-sized;
   CSS only sets the border style. Dot hides so the giant ring reads cleanly. */
body.framing .cursor-ring{border-width:1.5px;border-color:var(--terracotta);background:rgba(192,86,59,0.03);border-radius:4px}
body.framing .cursor-dot{opacity:0}
/* uline: over a text link the ring flies to its baseline and becomes the underline
   (width set inline by JS to match the link; it glides between links) */
body.uline .cursor-ring{height:2px;border-radius:2px;background:var(--terracotta);border-color:transparent}
body.uline .cursor-ring .clabel{display:none}
body.uline .cursor-dot{opacity:0}
/* the cursor IS the underline now → suppress the links' native hover underline */
body.uline .nav a:hover::after,
body.uline .hero-index a:hover::after,
body.uline .case-index a:hover::after,
body.uline .socials a:hover::after{width:0}

/* header */
.head{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .4s,border-color .4s,transform .5s cubic-bezier(.7,0,.2,1),opacity .4s;border-bottom:1px solid transparent}
.head.scrolled{background:rgba(244,241,234,0.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--mono);font-size:0.8rem;letter-spacing:0.06em;display:flex;align-items:center;gap:0.6rem;color:var(--espresso)}
.logo b{font-weight:500}
.mark{width:9px;height:9px;border:1.5px solid var(--terracotta);display:inline-block;transform:rotate(45deg);transition:transform .5s}
.logo:hover .mark{transform:rotate(225deg)}
.nav{display:flex;align-items:center;gap:1.8rem}
.nav a{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);position:relative;padding:2px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--terracotta);transition:width .3s}
.nav a:hover::after{width:100%}
.status{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta)}
@media (prefers-reduced-motion:no-preference){.dot{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:22px;height:1.5px;background:var(--espresso);transition:.3s}
.menu{position:fixed;inset:0;z-index:29;background:var(--bone);display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:var(--pad);transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu.open{transform:translateY(0);visibility:visible}
.menu a{font-family:var(--display);font-size:clamp(2.2rem,8vw,3.4rem);font-weight:300;color:var(--espresso)}
.menu .mono{margin-top:1rem}

/* hero */
.hero{padding-top:clamp(8rem,16vh,11rem);padding-bottom:clamp(3.5rem,8vh,6rem);position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1000px){.hero-grid{grid-template-columns:1fr 210px;gap:4rem;align-items:start}}
.eyebrow{display:flex;align-items:center;gap:0.7rem;margin-bottom:clamp(1.4rem,4vh,2.2rem)}
.eyebrow .bar{width:34px;height:1px;background:var(--line-2)}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(2.5rem,7.5vw,6rem);line-height:1.0;letter-spacing:-0.02em;color:var(--espresso);max-width:15ch}
.hero h1 em{font-style:italic;color:var(--terracotta);font-weight:300}
.hero-cta{margin-top:clamp(1.8rem,4.5vh,2.6rem);display:flex;flex-wrap:wrap;align-items:center;gap:0.9rem 1.2rem}
.cta{font-family:var(--mono);font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:0.55rem;border-radius:999px;padding:0.85rem 1.45rem;transition:background .35s,color .35s,border-color .35s,transform .35s}
.cta .arrow{display:inline-block;transition:transform .3s}
.cta-primary{background:var(--espresso);color:var(--bone);border:1px solid var(--espresso)}
.cta-primary:hover{background:var(--terracotta);border-color:var(--terracotta);transform:translateY(-2px)}
.cta-primary:hover .arrow{transform:translateX(5px)}
.cta-ghost{color:var(--espresso);border:1px solid var(--line-2)}
.cta-ghost:hover{border-color:var(--terracotta);color:var(--terracotta);transform:translateY(-2px)}
.hero-meta{margin-top:clamp(2.5rem,6vh,4rem);display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--line);padding-top:1.4rem}
.hero-meta div{display:flex;flex-direction:column;gap:0.35rem}
.hero-meta .k{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.hero-meta .v{font-family:var(--mono);font-size:0.85rem;color:var(--espresso)}
.hero-index{display:none}
@media(min-width:1000px){.hero-index{display:flex;flex-direction:column;gap:0.55rem;padding-top:0.4rem}}
.hero-index .ilabel{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.5rem}
.hero-index a{font-family:var(--mono);font-size:0.78rem;color:var(--espresso);display:flex;gap:0.7rem;align-items:baseline;padding:0.18rem 0;position:relative;width:fit-content;transition:color .25s}
.hero-index a .n{color:var(--muted)}
.hero-index a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--terracotta);transition:width .3s}
.hero-index a:hover{color:var(--terracotta)}
.hero-index a:hover::after{width:100%}
.hero-now{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1rem;font-family:var(--mono);font-size:0.72rem;color:var(--muted);line-height:1.9}
.hero-now .dot{display:inline-block;margin-right:0.45rem;vertical-align:middle}

/* section frame */
.section{padding-top:clamp(4rem,10vh,8rem);padding-bottom:clamp(4rem,10vh,8rem);position:relative;z-index:2}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--line-2);padding-top:1.2rem;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.sec-head .label{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--espresso)}
.sec-head .count{font-family:var(--mono);font-size:0.74rem;color:var(--muted)}

/* footer */
.foot{border-top:1px solid var(--line);padding:2rem 0;position:relative;z-index:2}
.foot-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot .mono{font-size:0.68rem}