/* v19: small-screen fixes + homepage-style finish for inner pages, menu, contact, footer */
:root{--serif:var(--font);--mono:var(--font)}
html{-webkit-text-size-adjust:100%}
img,svg,canvas,video{max-width:100%}
body{overflow-x:hidden}

/* ---------- Menu (all pages) ---------- */
body .menu{background:radial-gradient(90% 60% at 85% 0%,#0a0dbd 0%,var(--night) 55%,var(--deep) 100%);gap:clamp(24px,5vw,64px);padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
body .menu::after{content:"";position:absolute;right:-20%;bottom:-25%;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(166,221,153,.18),transparent 62%);pointer-events:none}
body .menu>ul{list-style:none;margin:0;padding:0;position:relative;z-index:1}
body .menu>ul a{font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,8.4vw,4.2rem);letter-spacing:-.025em;line-height:1.1;padding:.2em 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center}
body .menu>ul a::after{content:"\2192";font-family:var(--font);font-size:.5em;opacity:0;transform:translateX(-10px);transition:.35s var(--ease)}
body .menu>ul a:hover::after,body .menu>ul a[aria-current="page"]::after{opacity:1;transform:none}
body .menu>ul a[aria-current="page"]{font-style:italic;color:var(--green-lite)}
body .menu aside{position:relative;z-index:1;display:grid;gap:10px;align-self:end}
body .menu aside h2{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-lite);margin:10px 0 0}
body .menu aside ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
body .menu aside ul a{display:flex;align-items:center;gap:12px;font-family:var(--font);font-size:1rem;font-weight:500;letter-spacing:0;line-height:1.25;padding:12px 16px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-wrap:anywhere;transform:none}
body .menu aside ul a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);color:#fff}
body .menu aside ul a::after{display:none}
body .menu .reach-pin{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:.95rem;line-height:1.5}
.menu>ul li,.menu aside>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.menu-open .menu>ul li,.menu-open .menu aside>*{opacity:1;transform:none}
.menu-open .menu>ul li:nth-child(1){transition-delay:.18s}.menu-open .menu>ul li:nth-child(2){transition-delay:.23s}.menu-open .menu>ul li:nth-child(3){transition-delay:.28s}.menu-open .menu>ul li:nth-child(4){transition-delay:.33s}.menu-open .menu>ul li:nth-child(5){transition-delay:.38s}.menu-open .menu>ul li:nth-child(6){transition-delay:.43s}.menu-open .menu>ul li:nth-child(7){transition-delay:.48s}.menu-open .menu aside>*{transition-delay:.5s}
@media (max-width:820px){body .menu{grid-template-columns:1fr;align-content:start}body .menu>ul a{font-size:clamp(1.7rem,8vw,2.3rem)}}
@media (max-height:700px) and (max-width:820px){body .menu>ul a{padding:.1em 0;font-size:1.6rem}}

/* ---------- Footer (all pages) ---------- */
body .foot{overflow:hidden}
body .foot-word{line-height:.86;margin:clamp(16px,3vw,40px) 0 0;font-size:clamp(5rem,26vw,24rem);overflow:hidden;padding-bottom:.06em}
@media (max-width:520px){body .foot-grid{gap:32px}body .foot-base .container{flex-direction:column}}

/* ---------- Inner-page hero ---------- */
body:not(.is-home) .phero{margin:0;border-radius:0 0 clamp(26px,5vw,56px) clamp(26px,5vw,56px);min-height:clamp(440px,74svh,720px)}
body:not(.is-home) .phero::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;z-index:-1;background:radial-gradient(60% 60% at 50% 100%,rgba(166,221,153,.28),transparent 70%);pointer-events:none}
body:not(.is-home) .phero .label{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-lite);display:flex;gap:.9rem}
body:not(.is-home) .phero .label::before{display:none}
body:not(.is-home) .phero .label::after{content:"";height:1px;width:clamp(40px,12vw,120px);background:linear-gradient(90deg,var(--green-lite),transparent)}
body:not(.is-home) .phero h1{font-family:var(--serif);font-weight:320;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.4rem,8.6vw,5.4rem);max-width:15ch;overflow-wrap:break-word}
body:not(.is-home) .phero .lead{font-family:var(--serif);font-weight:340;font-size:clamp(1.1rem,3.6vw,1.5rem);line-height:1.4;max-width:34ch}
em.ac{font-style:italic;font-weight:300;color:var(--green-ink)}
.phero em.ac,.dark em.ac,.cta em.ac,.sec--night em.ac{color:var(--green-lite)}

/* ---------- Text blocks ---------- */
body:not(.is-home) .sec{padding-block:clamp(56px,9vw,128px)}
body:not(.is-home) .sec .label{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
body:not(.is-home) .sec .label::before{display:none}
body:not(.is-home) .sec .label::after{content:"";height:1px;flex:0 1 clamp(40px,14vw,140px);background:currentColor;opacity:.4}
body:not(.is-home) .sec.dark .label{color:var(--green-lite)}
body:not(.is-home) .sec h2{font-family:var(--serif);font-weight:340;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.9rem,6.2vw,3.6rem);text-wrap:balance}
body:not(.is-home) .sec .lead,body:not(.is-home) .sec .prose{font-family:var(--serif);font-weight:350;font-size:clamp(1.1rem,3.4vw,1.4rem);line-height:1.5;color:var(--ink)}
body:not(.is-home) .sec .lead b{display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);margin-bottom:.5rem}
body:not(.is-home) .sec .lead+.lead{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
body:not(.is-home) .prose{list-style:none;padding:0;margin:0}
body:not(.is-home) .prose li{padding:1rem 0 1rem 2rem;border-bottom:1px solid var(--line);position:relative}
body:not(.is-home) .prose li::before{content:"";position:absolute;left:0;top:1.55rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(95,160,82,.18)}
body:not(.is-home) blockquote.big{font-family:var(--serif);font-weight:320;line-height:1.1;font-size:clamp(1.9rem,7vw,4rem);padding-left:clamp(14px,3vw,32px);border-left:3px solid var(--green)}
body:not(.is-home) blockquote.big cite,body:not(.is-home) blockquote.big cite span{display:block;margin-top:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:1!important;color:var(--green-ink)}
body:not(.is-home) .sec--mist{background:linear-gradient(180deg,var(--mist),#f7f8fd)}

/* ---------- Cards, facts, steps ---------- */
body:not(.is-home) .stat{border-radius:22px;background:#fff;box-shadow:0 1px 0 var(--line),0 18px 40px -26px rgba(1,3,149,.35);padding:clamp(16px,3vw,28px)}
body:not(.is-home) .stat .v{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,9vw,4.4rem);letter-spacing:-.04em;color:var(--blue);line-height:1}
body:not(.is-home) .stat dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
body:not(.is-home) .trust{gap:14px}
body:not(.is-home) .trust li{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,30px);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
body:not(.is-home) .trust li::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--green),var(--green-lite))}
body:not(.is-home) .trust li:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(1,3,149,.45)}
body:not(.is-home) .trust h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:-.015em}
body:not(.is-home) .spec div{border-bottom:1px solid var(--line);padding:1rem 0}
body:not(.is-home) .spec dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
body:not(.is-home) .spec dd{font-family:var(--serif);font-weight:340;font-size:clamp(1.3rem,4.6vw,2rem);letter-spacing:-.02em;color:var(--ink)}
body:not(.is-home) .spec small{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em}
body:not(.is-home) .step{border-bottom:1px solid var(--line);padding-block:clamp(18px,3vw,34px)}
body:not(.is-home) .step h3{font-family:var(--serif);font-weight:340;font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:-.025em}
body:not(.is-home) .person{border-radius:26px;background:#fff;padding:clamp(16px,3vw,26px);box-shadow:0 22px 50px -32px rgba(1,3,149,.4)}
body:not(.is-home) .person h3{font-family:var(--serif);font-weight:380}
body:not(.is-home) .photo{border-radius:clamp(18px,3vw,32px);overflow:hidden}
body:not(.is-home) .cta h2{font-family:var(--serif);font-weight:320;font-size:clamp(2.2rem,8vw,4.6rem);letter-spacing:-.035em;line-height:1.02}

/* ---------- Contact ---------- */
.contact-grid{grid-template-columns:1.25fr .85fr}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr!important}}
body .tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px;margin:0 -4px 18px;scrollbar-width:none}
body .tabs::-webkit-scrollbar{display:none}
body .tabs button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;border-radius:999px}
body .form{border-radius:28px;box-shadow:0 30px 60px -36px rgba(1,3,149,.5)}
body .contact-card{position:relative;overflow:hidden;color:#fff;border-radius:30px;background:radial-gradient(120% 80% at 100% 0%,#0a0dbd,var(--night) 60%,var(--deep));padding:clamp(22px,4vw,36px);box-shadow:0 34px 70px -38px rgba(0,1,56,.8)}
body .contact-card::after{content:"";position:absolute;right:-30%;bottom:-30%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(166,221,153,.25),transparent 65%);pointer-events:none}
body .contact-card h2{font-family:var(--serif);font-weight:320;font-size:clamp(1.7rem,6vw,2.4rem);letter-spacing:-.03em;color:#fff;margin:0 0 1.2rem}
body .contact-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative;z-index:1}
body .contact-card .cc-row{border:0;padding:0}
body .contact-card .cc-row>a,body .contact-card .cc-static{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:transform .35s var(--ease),background .35s}
body .contact-card .cc-row>a:hover{background:rgba(255,255,255,.16);transform:translateX(6px)}
body .contact-card .cc-row span{min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:1.02rem;color:#fff}
body .contact-card .cc-row small{display:block;font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-lite);margin-bottom:2px}
body .contact-card .ic{flex:0 0 auto}

/* ---------- Reveal ---------- */
.r19on .r19{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r19on .r19.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r19on .r19,.menu>ul li,.menu aside>*{opacity:1;transform:none;transition:none}}

/* Desktop design on every screen: the page is laid out 1280px wide and scaled down on phones/tablets
   (viewport meta in tools/build.py). These two rules stop the hero stretching on tall, narrow screens. */
.h-hero{height:min(100svh,max(640px,62.5vw))}
.h-slot--hero{bottom:max(-9vh,-80px)}

/* Menu on short windows: start below the header and scroll, so "Home" is never hidden behind the header bar */
body .menu{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;align-content:start;padding-top:calc(var(--hdr,76px) + 28px)}
@media (min-height:861px){body .menu{align-content:center}}
@media (max-height:860px) and (min-width:821px){body .menu>ul a{font-size:clamp(1.5rem,5.4vh,3rem);padding:.1em 0}}

/* Menu on short desktop windows: the list was centred taller than the screen, so "Home" slid up behind the header.
   Start below the header (never above it), shrink links with screen height, and let the menu scroll if still too tall. */
body .menu{align-content:start;align-content:safe center;padding-top:calc(var(--hdr,76px) + 28px);overflow-y:auto}
body .menu>ul a{font-size:clamp(1.5rem,min(8.4vw,6.4vh),4.2rem)}
body .menu aside{align-self:center}
@media (max-height:760px){body .menu>ul a{padding:.12em 0}}
