:root{
  --bg:#070707;
  --shell:#090909;
  --panel:#1d1d1f;
  --panel-2:#232326;
  --panel-hover:#2a2a2e;
  --line:rgba(255,255,255,.11);
  --text:#f3f1ec;
  --muted:rgba(243,241,236,.62);
  --muted-2:rgba(243,241,236,.44);
  --menu:#313135;
  --menu-active:#45454b;
  --shadow:0 14px 34px rgba(0,0,0,.18);
  --radius:14px;
  --side:clamp(16px,4vw,56px);
  --max:980px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.04),transparent 28rem),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;left:14px;top:14px;z-index:99;padding:10px 14px;background:#fff;color:#000;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.hub-shell{min-height:100vh;padding-bottom:24px}
.hero{position:relative;min-height:clamp(580px,84svh,860px);display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid rgba(255,255,255,.05);background:#080808;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% center;filter:brightness(.90) contrast(1.02) saturate(.94)}
.hero__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.60) 75%,#070707 100%),linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.14) 38%,rgba(0,0,0,.25) 100%)}
.hero__content{position:relative;z-index:2;width:min(var(--max),100%);padding:0 var(--side) clamp(30px,6svh,58px);text-align:center}
.brand-mark{display:block;width:auto;height:18px;margin:0 auto 18px;opacity:.96}
h1{margin:0;font-family:"Cormorant Garamond","Times New Roman",Georgia,serif;font-weight:400;text-transform:uppercase;white-space:nowrap;letter-spacing:.10em;font-size:clamp(2.1rem,7vw,5.4rem);line-height:.94;text-shadow:0 3px 18px rgba(0,0,0,.38)}
.hero__subtitle{margin:15px 0 0;text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;font-size:clamp(.68rem,1vw,.92rem);color:rgba(255,255,255,.72)}
.socials{display:flex;align-items:center;justify-content:center;gap:0;margin:28px auto 0;max-width:420px}
.socials a{position:relative;display:grid;place-items:center;width:60px;height:36px;color:#fff;opacity:.95;transition:opacity .2s ease, transform .2s ease}
.socials a+a:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.16)}
.socials svg{width:24px;height:24px;fill:currentColor}
.socials a:hover{opacity:1;transform:translateY(-1px)}
.tab-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);width:min(var(--max),calc(100% - var(--side)*2));margin:16px auto 0;background:rgba(52,52,56,.94);border:1px solid rgba(255,255,255,.10);border-radius:12px;overflow-x:auto;scrollbar-width:none;box-shadow:none}
.tab-nav::-webkit-scrollbar{display:none}
.tab-nav a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-right:1px solid rgba(255,255,255,.08);font-size:clamp(.78rem,.95vw,.90rem);font-weight:400;color:rgba(255,255,255,.92);white-space:nowrap;transition:background .18s ease,color .18s ease}
.tab-nav a:last-child{border-right:0}
.tab-nav a.is-active,.tab-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.content-stack{width:min(var(--max),100%);margin:0 auto;padding:14px var(--side) 0}
.hub-section{padding:0;scroll-margin-top:56px}
.hub-section[hidden]{display:none !important}
.cards{display:grid;gap:11px}
.hub-card{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:background .18s ease, border-color .18s ease, transform .18s ease}
.hub-card:hover{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border-color:rgba(255,255,255,.15);transform:translateY(-1px)}
.hub-card span{display:block;min-width:0}
.hub-card strong{display:block;margin:0;font-family:"Cormorant Garamond","Times New Roman",Georgia,serif;font-weight:400;font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:.005em;color:#fff}
.hub-card em{display:block;margin-top:4px;font-style:normal;font-size:clamp(.74rem,.95vw,.88rem);line-height:1.3;color:var(--muted)}
.hub-card b{flex:none;font-weight:300;font-size:clamp(1.45rem,2vw,1.9rem);line-height:1;color:rgba(255,255,255,.72)}
.card-logo{display:block;height:20px;width:auto;max-width:180px;margin:0 0 6px}
.about-card{padding:18px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:14px}
.about-brandline{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.78rem;letter-spacing:.03em;color:var(--muted)}
.about-brandline img{display:block;height:18px;width:auto;opacity:.96}
.about-card p{margin:0;color:rgba(255,255,255,.72);font-size:clamp(.84rem,1vw,.96rem);line-height:1.62}
.about-card p+p{margin-top:.88em}
.about-card strong{color:#fff;font-weight:600}
.about-signature{color:#fff !important;font-weight:600;letter-spacing:.02em}
.about-links{margin-top:11px}
.newsletter-bar{position:relative;display:grid;grid-template-columns:132px 1fr 44px;align-items:center;width:min(var(--max),calc(100% - var(--side)*2));height:48px;margin:24px auto 0;background:rgba(250,250,247,.98);color:#111;border:1px solid rgba(0,0,0,.08);border-radius:0;box-shadow:0 12px 28px rgba(0,0,0,.20)}
.newsletter-bar.is-hidden{display:none !important}
.newsletter-brand,.newsletter-action{display:flex;align-items:center;height:100%;padding:0 14px;text-transform:uppercase;white-space:nowrap}
.newsletter-brand{justify-content:flex-start;border-right:1px solid rgba(0,0,0,.11)}
.newsletter-brand img{display:block;height:16px;width:auto}
.newsletter-action{justify-content:center;font-size:clamp(.56rem,.85vw,.72rem);font-weight:600;letter-spacing:.16em;color:#111;text-align:center}
.newsletter-bar button{height:100%;border:0;background:transparent;color:#111;font-size:28px;font-weight:200;cursor:pointer;line-height:1}
.hub-footer{width:min(var(--max),100%);margin:0 auto;padding:13px var(--side) 0;text-align:center;text-transform:uppercase;letter-spacing:.26em;color:rgba(255,255,255,.35);font-size:.62rem}
.hub-footer p{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0}
.hub-footer .footer-logo{display:inline-block;height:14px;width:auto;vertical-align:middle;opacity:.94}
.hub-footer .footer-domain{text-transform:none;letter-spacing:.10em}
.hub-footer .footer-sep{letter-spacing:.1em}
@media (min-width:821px){
  .cards{grid-template-columns:1fr 1fr}
  #start .cards{grid-template-columns:1fr 1fr}
  .hub-card--logo{grid-column:1 / -1}
}
@media (max-width:820px){
  :root{--side:16px}
  .hero{min-height:70svh}
  .hero__media img{object-position:center 18%;filter:brightness(.94) contrast(1.02) saturate(.94)}
  .hero__shade{background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.14) 30%,rgba(0,0,0,.66) 70%,#070707 100%),linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 44%,rgba(0,0,0,.16))}
  .hero__content{padding-bottom:24px}
  .brand-mark{height:16px;margin-bottom:12px}
  h1{font-size:clamp(1.88rem,8vw,2.36rem);letter-spacing:.065em}
  .hero__subtitle{margin-top:12px;font-size:.60rem;letter-spacing:.28em;text-indent:.28em}
  .socials{margin-top:22px;max-width:320px}
  .socials a{width:50px;height:34px}
  .socials svg{width:22px;height:22px}
  .tab-nav{width:calc(100% - 28px);margin:14px auto 0;grid-auto-columns:minmax(84px,auto);background:rgba(50,50,54,.95);border-radius:10px}
  .tab-nav a{min-height:38px;padding:0 12px;font-size:.72rem}
  .content-stack{padding-top:12px}
  .cards{gap:9px}
  .hub-card{min-height:72px;padding:13px 14px;border-radius:12px}
  .hub-card strong{font-size:.94rem}
  .hub-card em{font-size:.67rem;margin-top:3px}
  .hub-card b{font-size:1.35rem}
  .card-logo{height:18px;margin-bottom:5px}
  .about-card{padding:16px;border-radius:12px}
  .about-brandline{font-size:.72rem;margin-bottom:12px}
  .about-brandline img{height:16px}
  .about-card p{font-size:.82rem;line-height:1.56}
  .newsletter-bar{width:calc(100% - 28px);height:44px;grid-template-columns:108px 1fr 34px;margin-top:22px}
  .newsletter-brand,.newsletter-action{padding:0 11px}
  .newsletter-brand img{height:14px}
  .newsletter-action{font-size:.50rem;letter-spacing:.08em}
  .newsletter-bar button{font-size:24px}
  .hub-footer{padding-top:12px;font-size:.48rem;letter-spacing:.22em}
  .hub-footer .footer-logo{height:12px}
}
@media (max-width:420px){
  :root{--side:14px}
  .hero{min-height:68svh}
  .brand-mark{height:15px}
  h1{font-size:clamp(1.74rem,8.3vw,2.1rem);letter-spacing:.055em}
  .socials a{width:46px}
  .tab-nav{width:calc(100% - 28px);grid-auto-columns:minmax(76px,auto)}
  .tab-nav a{min-height:36px;padding:0 11px;font-size:.69rem}
  .hub-card{min-height:68px;padding:12px 13px}
  .hub-card strong{font-size:.90rem}
  .hub-card em{font-size:.64rem}
  .newsletter-bar{grid-template-columns:94px 1fr 32px}
  .newsletter-brand img{height:13px}
  .newsletter-action{font-size:.47rem;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none !important;animation:none !important}}


/* HUB v7 — refined after visual review */
:root{
  --panel:#202023;
  --panel-2:#202023;
  --panel-hover:#29292d;
  --menu:#202023;
  --menu-active:#3a3a3f;
  --line:rgba(255,255,255,.105);
  --radius:8px;
}
.hero__media img{filter:brightness(.98) contrast(1.02) saturate(.95) !important;}
.hero__shade{background:linear-gradient(180deg,rgba(0,0,0,.015) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.52) 75%,#070707 100%),linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.10) 38%,rgba(0,0,0,.18) 100%) !important;}
.tab-nav{background:rgba(32,32,35,.96) !important;border-color:rgba(255,255,255,.105) !important;border-radius:8px !important;}
.tab-nav a{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;font-weight:400 !important;color:rgba(255,255,255,.88) !important;}
.tab-nav a.is-active,.tab-nav a:hover{background:rgba(255,255,255,.125) !important;color:#fff !important;}
.hub-card{background:linear-gradient(135deg,rgba(255,255,255,.058),rgba(255,255,255,.028)) !important;border-color:rgba(255,255,255,.10) !important;border-radius:8px !important;}
.hub-card:hover{background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.038)) !important;border-color:rgba(255,255,255,.16) !important;}
.hub-card strong{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;font-weight:400 !important;letter-spacing:-.01em !important;font-size:clamp(.98rem,1.22vw,1.18rem) !important;}
.hub-card em{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;}
.card-logo{height:17px !important;margin-bottom:6px !important;}
.about-card{border-radius:8px !important;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.028)) !important;border-color:rgba(255,255,255,.10) !important;}
.about-brandline{display:none !important;}
.newsletter-bar{border-radius:8px !important;height:46px !important;background:rgba(250,250,247,.98) !important;}
.newsletter-brand{justify-content:flex-start !important;}
.newsletter-brand img{height:12px !important;width:auto !important;max-width:92px !important;}
.newsletter-action{font-size:clamp(.52rem,.78vw,.66rem) !important;letter-spacing:.135em !important;font-weight:600 !important;}
.newsletter-bar button{border-radius:0 8px 8px 0 !important;}
.hub-footer p{gap:8px !important;}
.hub-footer .footer-brand,.hub-footer .footer-powered,.hub-footer .footer-domain,.hub-footer .footer-sep{font-weight:400 !important;color:rgba(255,255,255,.35) !important;}
.hub-footer .footer-brand{letter-spacing:.26em !important;}
.hub-footer .footer-domain{text-transform:none !important;letter-spacing:.10em !important;}
@media (max-width:820px){
  .hero__media img{filter:brightness(1.02) contrast(1.01) saturate(.95) !important;}
  .hero__shade{background:linear-gradient(180deg,rgba(0,0,0,.00) 0%,rgba(0,0,0,.10) 30%,rgba(0,0,0,.58) 70%,#070707 100%),linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,.06) 44%,rgba(0,0,0,.12)) !important;}
  .tab-nav{border-radius:7px !important;background:rgba(31,31,34,.96) !important;}
  .hub-card,.about-card,.newsletter-bar{border-radius:7px !important;}
  .newsletter-bar{height:43px !important;grid-template-columns:92px 1fr 32px !important;}
  .newsletter-brand img{height:11px !important;max-width:82px !important;}
  .newsletter-action{font-size:.48rem !important;letter-spacing:.065em !important;}
  .newsletter-bar button{border-radius:0 7px 7px 0 !important;}
}
@media (max-width:420px){
  .newsletter-bar{grid-template-columns:84px 1fr 30px !important;}
  .newsletter-brand img{height:10px !important;max-width:76px !important;}
  .newsletter-action{font-size:.455rem !important;letter-spacing:.045em !important;}
}


/* HUB v8 — fine alignment polish */
:root{
  --panel:#202023;
  --menu:#202023;
}

.hero{
  min-height:clamp(550px,80svh,820px) !important;
}

.hero__content{
  transform:translateY(-5%) !important;
}

.tab-nav{
  margin-top:8px !important;
  background:rgba(32,32,35,.96) !important;
}

.hub-card{
  background:linear-gradient(135deg,rgba(255,255,255,.058),rgba(255,255,255,.028)) !important;
}

.tab-nav a.is-active,
.tab-nav a:hover{
  background:rgba(255,255,255,.13) !important;
}

.content-stack{
  padding-top:11px !important;
}

.newsletter-bar{
  align-items:center !important;
  grid-template-columns:96px 1fr 34px !important;
}

.newsletter-brand,
.newsletter-action,
.newsletter-bar button{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
}

.newsletter-brand{
  justify-content:flex-start !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.newsletter-brand img{
  display:block !important;
  height:10.5px !important;
  width:auto !important;
}

.newsletter-action{
  justify-content:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
}

.newsletter-bar button{
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  font-size:22px !important;
  transform:translateY(-1px) !important;
}

.about-card p{
  font-size:clamp(.82rem,.98vw,.94rem) !important;
  line-height:1.54 !important;
}

.about-card p+p{
  margin-top:.78em !important;
}

@media (max-width:820px){
  .hero{
    min-height:65svh !important;
  }

  .hero__content{
    transform:translateY(-5%) !important;
  }

  .tab-nav{
    margin-top:6px !important;
    background:rgba(32,32,35,.96) !important;
  }

  .content-stack{
    padding-top:10px !important;
  }

  .newsletter-bar{
    grid-template-columns:82px 1fr 30px !important;
  }

  .newsletter-brand img{
    height:9.5px !important;
  }

  .newsletter-action{
    font-size:.45rem !important;
    letter-spacing:.045em !important;
  }

  .newsletter-bar button{
    font-size:21px !important;
  }
}

@media (max-width:420px){
  .newsletter-bar{
    grid-template-columns:78px 1fr 28px !important;
  }

  .newsletter-brand img{
    height:9px !important;
  }

  .newsletter-action{
    font-size:.43rem !important;
    letter-spacing:.035em !important;
  }
}


/* HUB v9 — revert lift, larger newsletter logo, menu same as box color */
.hero__content{
  transform:none !important;
}

.tab-nav{
  background:linear-gradient(135deg,rgba(255,255,255,.058),rgba(255,255,255,.028)) !important;
  border-color:rgba(255,255,255,.10) !important;
}

.tab-nav a{
  color:rgba(255,255,255,.90) !important;
}

.tab-nav a.is-active,
.tab-nav a:hover{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
}

.newsletter-brand img{
  height:12px !important;
  width:auto !important;
  max-width:92px !important;
}

@media (max-width:820px){
  .hero__content{transform:none !important;}
  .tab-nav{
    background:linear-gradient(135deg,rgba(255,255,255,.058),rgba(255,255,255,.028)) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
  .newsletter-brand img{
    height:11px !important;
    max-width:82px !important;
  }
}

@media (max-width:420px){
  .newsletter-brand img{
    height:10px !important;
    max-width:76px !important;
  }
}


/* HUB v10 — remove line above menu, keep social dividers subtle */
.hero{
  border-bottom:0 !important;
}

.socials a+a:before{
  background:rgba(255,255,255,.12) !important;
}

@media (max-width:820px){
  .socials a+a:before{
    background:rgba(255,255,255,.11) !important;
  }
}


/* HUB v11 — slightly wider side margins for menu, cards and newsletter */
:root{
  --hub-mobile-side:18px;
}

@media (max-width:820px){
  .tab-nav,
  .newsletter-bar{
    width:calc(100% - 36px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .content-stack{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media (max-width:420px){
  .tab-nav,
  .newsletter-bar{
    width:calc(100% - 36px) !important;
  }

  .content-stack{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media (max-width:360px){
  .tab-nav,
  .newsletter-bar{
    width:calc(100% - 32px) !important;
  }

  .content-stack{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* HUB v12 — final CTA copy and subtle mobile hero lift */
@media (max-width:820px){
  .hero__media img{
    filter:brightness(1.05) contrast(1.01) saturate(.95) !important;
  }
}


/* HUB v13 — final project structure */
.hub-card--logo{
  grid-column:auto !important;
}


/* HUB v14 — coffee support and Naffy conversation link */
.about-links .hub-card{
  min-height:68px;
}