@import url("https://use.typekit.net/gyo2wfo.css");

@font-face {
  font-family: "GT-Super-Display";
  font-weight: 200;
  src: url("assets/fonts/GT-Super-Display-Light.woff") format("woff");
  font-display: swap;
}

:root{
  --bg:#0b0b0b;
  --fg:#e9e9e9;
  --muted:#bdbdbd;
  --accent:#b6ffd9;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  position:relative;
  background: var(--bg);
  color:var(--fg);
  font-family: degular, Inter, ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:18px;
  line-height:1.6;
}

/* Global link color */
a{color:#7CB4EC}

.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 32px; z-index:10;
  background:linear-gradient(to bottom, rgba(11,11,11,0.9), rgba(11,11,11,0));
  opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
body.header-visible .site-header{opacity:1; transform:translateY(0); pointer-events:auto}
tags.brand{font-family:degular, system-ui, -apple-system; font-weight:600; letter-spacing:0.2px; font-size:20px}
.nav{display:none}
.signup-btn{background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700; font-family:degular, system-ui, -apple-system; font-size:16px}
.signup-btn:hover{background:#7CB4EC; color:#000}

.page-bg{opacity:0.5; position:absolute; top:0; left:0; width:100%; height:100svh; object-fit:cover; z-index:0; pointer-events:none}

.hero{position:relative; z-index:1; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 24px}
#clock{position:absolute; inset:auto; z-index:0; filter: blur(0.2px)}
.dial-wrapper{position:absolute; inset:0; margin:auto; width:30vw; min-width:300px; aspect-ratio:1/1; z-index:0; opacity:0.95; border-radius:1000px; overflow:hidden}
.dial-wrapper img{position: absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none}
.dial-wrapper img.color{opacity:0.75;}
.dial-wrapper img.dial{opacity:0.5;}
.dial-wrapper img.overlay{mix-blend-mode:soft-light; opacity:0.35}
.dial-wrapper img.overlay.indices{opacity:1}
.dial-wrapper img.overlay.markers-hour{opacity:0.28}
.dial-wrapper img.overlay.markers-minute{opacity:0.18}

/* Hide overlay layers on desktop */
@media (min-width: 900px){
  .dial-wrapper img.overlay{display:none}
}
.dial-wrapper .hands{position:absolute; inset:0}
.dial-wrapper .hands .hm-group{position:absolute; inset:0; opacity:0.4}
.dial-wrapper .hands img{transform-origin:50% 50%;}
/* Ensure <picture> wrappers don't break positioning */
.dial-wrapper .hands picture{position:absolute; inset:0}
.dial-wrapper .hands picture > img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
/* Ensure mobile hand images use same blend behavior */
@media (max-width: 600px){
  .dial-wrapper .hands picture,
  .dial-wrapper .hands picture > img{mix-blend-mode:screen}
}
.dial-wrapper .dial{mix-blend-mode:soft-light}
.dial-wrapper .hands{mix-blend-mode:screen; width:100%; height:100%}
.dial-wrapper img{border-radius:100%}
.dial-wrapper .sweep-seconds{position:absolute; inset:0; animation: tick 60000ms steps(480, end) infinite; opacity:0.6}
@keyframes tick{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
.hero-text{position:relative; z-index:2; text-align:center;}
.hero h1{font-family:"Degular", Georgia, serif; font-weight:200; letter-spacing:-0.02em; font-size:clamp(40px, 8vw, 160px); line-height:0.92; margin:0}

/* Hue rotate animation for color texture */
.hue-animate{animation:hueAnimate 10s linear infinite}
@keyframes hueAnimate{from{filter:hue-rotate(200deg)} to{filter:hue-rotate(560deg)}}
.hero-text{position:relative; z-index:2; text-align:center; padding:20px;}
.hero h1{font-family:"Degular", sans-serif; font-weight:200; text-transform:uppercase; letter-spacing:-0.02em; font-size:clamp(40px, 8vw, 176px); line-height:0.9; margin:0 0 12px; max-width:20ch; margin-left:auto; margin-right:auto}
.hero p{font-size:clamp(18px, 2.2vw, 24px); color:var(--muted); margin:0 0 20px}
.cta{display:inline-block; background:var(--fg); color:var(--bg); padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600}
.cta:hover{background:#7CB4EC; color:#000}

.section{padding:72px 20px; max-width:1100px; margin:0 auto}
.section h2{font-size:clamp(28px, 3.2vw, 44px); margin:0 0 16px}
.bullets{margin:0; padding-left:18px; color:var(--muted); font-size:18px}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px}
.card{display:block; border:1px solid rgba(255,255,255,0.12); padding:14px 16px; border-radius:10px; text-decoration:none; color:var(--fg); background:rgba(255,255,255,0.03)}
.card:hover{border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.06)}
.note{color:var(--muted); margin-top:10px}

/* Learn grid */
.section-learn{max-width:1200px}
.learn-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.section-learn{max-width:1200px}
@media (max-width: 900px){
  .learn-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 600px){
  .learn-grid{grid-template-columns:1fr}
}
/* Mobile hero layout & height */
@media (max-width: 600px){
  .hero{min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; overflow:visible}
  .dial-wrapper{position:relative; width:80vw; min-width:0; max-width:520px; margin:0 auto 16px}
  .hero-text{padding:0}
  .hero h1{margin:0 0 16px}
  .page-bg{display:none}
}
.learn-item{border:1px solid rgba(255,255,255,0.12); border-radius:14px; background:rgba(255,255,255,0.03); padding:16px}
.learn-item img{width:40px; height:40px; margin-bottom:10px; opacity:0.9}
.learn-item h3{font-size:18px; margin:0 0 6px}
.learn-item p{color:var(--muted); margin:0}

/* Work grid */
.section-work{max-width:1280px}
.work-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width: 700px){
  .work-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width: 1200px){
  .work-grid{grid-template-columns:repeat(4, 1fr)}
}
.work-card{position:relative; display:block; border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); text-decoration:none; color:var(--fg)}
.work-card img{display:block; width:100%; height:220px; object-fit:cover; background:rgba(255,255,255,0.03)}
.work-card .work-meta{display:block; padding:14px 16px}
.work-card .title{font-weight:600; font-size:20px; line-height:1.15; margin:0}
.work-card .tags{color:var(--muted); font-size:16px; margin-top:2px; line-height:1.4; letter-spacing:0.04em}
.work-card:hover{border-color:rgba(255,255,255,0.24); transform:translateY(-1px)}

/* Statement blurb */
.statement{max-width:980px; text-align:center}
.statement p{font-size:clamp(20px, 2.8vw, 32px); color:var(--fg); margin:0}

/* Split feature sections */
.feature{max-width:1280px}
.split{display:grid; grid-template-columns: 1fr; gap:20px; align-items:start}
.split.reverse .media{order:0}
.split.reverse .copy{order:0}
.feature .media{margin-bottom:6px}
.feature .media img{display:block; width:100%; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03)}
.feature .copy h2{font-size:clamp(26px, 2.8vw, 40px); margin:0 0 12px}
.feature .copy p{color:var(--muted); margin:0 0 12px; font-size:clamp(18px, 2.1vw, 22px)}
.feature .copy .bullets{padding-left:18px}

@media (max-width: 900px){
  .split, .split.reverse{grid-template-columns:1fr}
  .split.reverse .media{order:0}
  .split.reverse .copy{order:0}
}

.contact a{color:#7CB4EC}
/* Align callout copy left and match section widths */
.contact.callout{max-width:1280px; margin:0 auto}
.contact .callout-inner{text-align:left}

.site-footer{padding:30px 20px; color:var(--muted); text-align:center; border-top:none}

/* Booking callout */
.callout{padding:0 20px}
.callout-inner{background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:28px; max-width:1280px; margin:0 auto}
.callout .lead{color:var(--muted); margin:6px 0 18px}
.callout .badge{display:inline-block; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:rgba(255,255,255,0.12); color:var(--fg); padding:6px 10px; border-radius:999px; margin-bottom:10px}
.single-plan{border:1px solid rgba(255,255,255,0.12); border-radius:14px; background:rgba(255,255,255,0.03); padding:18px}
.single-plan .meta{color:var(--muted); margin:0 0 10px}
.single-plan ul{margin:0 14px 14px 18px}

/* Notify form */
.notify{display:grid; grid-template-columns:1fr 1fr 1.2fr auto; gap:12px; align-items:end}
.notify .input{width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:var(--fg); padding:16px 18px; border-radius:8px; outline:none; font-size:22px; font-family:Degular, Inter, ui-sans-serif, -apple-system, system-ui}
.notify .input::placeholder{color:rgba(233,233,233,0.35); font-family:Degular, Inter, ui-sans-serif, -apple-system, system-ui}
.notify .field label{display:block; font-size:18px; color:var(--fg); opacity:0.9; margin:0 0 8px 2px; font-family:Degular, Inter, ui-sans-serif, -apple-system, system-ui}
.notify .cta{padding:12px 16px; font-size:16px; font-weight:700; border-radius:8px}
.notify .cta{appearance:none; -webkit-appearance:none; border:0; box-shadow:none; align-self:end; height:56px}
.notify .field{min-width:0}
.notify .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.notify-status{margin-left:8px; color:var(--muted)}

@media (max-width: 900px){
  .notify{grid-template-columns:1fr 1fr;}
  .notify .cta{grid-column:1 / -1;}
}
@media (max-width: 560px){
  .notify{grid-template-columns:1fr;}
}