/* ===== Theme tokens ===== */
:root{
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Inter',ui-monospace,monospace;
  --pad:44px;
  --maxw:1140px;
}

/* Light (default) */
:root,
[data-theme="light"]{
  --bg-top:#EFEEEA;
  --bg:#E8E8E4;
  --bg-bottom:#E2E1DB;
  --ink:#1F1F1D;
  --ink-2:#4A4A45;
  --muted:#55554F;
  --muted-2:#7A7A74;
  --hair:#CFCFC8;
  --hair-2:#B5B5AE;
 
  --nav-bg:#1F1F1D;   /* dark pill on light page, like NOUTA */
  --nav-fg:#E8E8E4;
  --nav-fg-muted:#E8E8E4;
  --nav-hair:#1F1F1D;
  --nav-cta-bg:#E8E8E4;
  --nav-cta-fg:#1F1F1D;
 
  --card-dark:#1F1F1D;
  --on-dark:#E8E8E4;
 
  --mark-stroke:#E8E8E4;          /* mark sits on the dark pill */
  --mark-fill:#E8E8E4;
}
 
/* Dark */
[data-theme="dark"]{
  --bg-top:#242422;
  --bg:#222222;
  --bg-bottom:#161614;
  --ink:#ECECE6;
  --ink-2:#C4C4BE;
  --muted:#A6A6A0;
  --muted-2:#86867F;
  --hair:#33332F;
  --hair-2:#44443F;
 
  --nav-bg:rgba(12,12,11,0.85);
  --nav-fg:#ECECE6;
  --nav-fg-muted:#ECECE6;
  --nav-hair:rgba(255,255,255,0.10);
  --nav-cta-bg:#ECECE6;
  --nav-cta-fg:#1C1C1A;
 
  --card-dark:#0F0F0E;
  --on-dark:#ECECE6;
 
  --mark-stroke:#ECECE6;
  --mark-fill:#ECECE6;
}
 
/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:auto;
  background:var(--bg-bottom);
  min-height:100%;
}
body{
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:color .3s ease;
  overflow-x:hidden;
}
/* Fixed full-viewport gradient so the page never shows browser default,
   including the overscroll/bounce areas at the very top and bottom. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 45%,var(--bg-bottom) 100%);
}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4{letter-spacing:-0.025em;line-height:1.06;font-weight:600;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
 
.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.05em;
  color:var(--muted-2);
}
 
/* shared content frame */
.hero,
.services,
.work,
.contact-sec,
.selected-work{
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
}


 
/* ===== Floating pill nav ===== */
.nav-wrap{
  position:sticky;top:0;z-index:30;
  padding:16px var(--pad) 0;
}
.nav{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  height:60px;
  padding:0 14px 0 18px;
  background:var(--nav-bg);
  border:1px solid var(--nav-hair);
  border-radius:16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
}
 
/* brand */
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{display:flex;}
.mark-ring{stroke:var(--mark-stroke);}
.mark-fill{fill:var(--mark-fill);}
.brand-text{
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-0.01em;
  color:var(--nav-fg);white-space:nowrap;
}
.brand-hour{
  background:linear-gradient(90deg,#E8A87C,#C38D9E,#7A9CC6,#88C0A8);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brand-studio{
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--nav-fg-muted);
}
 
/* center links */
.nav-links{display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:16px;}
.nav-links a{color:var(--nav-fg-muted);padding:6px 0;transition:color .2s;}
.nav-links a:hover{color:var(--nav-fg);}
 
/* right actions */
.nav-actions{display:flex;align-items:center;gap:8px;}
.theme-toggle{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--nav-hair);
  background:transparent;color:var(--nav-fg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.theme-toggle:hover{background:rgba(255,255,255,0.08);}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
 
.nav-cta{
  font-family:var(--mono);font-size:12.5px;
  background:var(--nav-cta-bg);color:var(--nav-cta-fg);
  padding:10px 16px;border-radius:10px;white-space:nowrap;transition:.2s;
}
.nav-cta:hover{opacity:.88;}
 
/* hamburger */
.nav-toggle{
  display:none;width:38px;height:38px;border:none;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;
}
.nav-toggle span{display:block;width:22px;height:1.6px;background:var(--nav-fg);transition:.25s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.3px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg);}
 
/* mobile dropdown */
.mobile-menu{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;
  padding:8px 18px 14px;
  background:var(--nav-bg);
  border:1px solid var(--nav-hair);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* When the menu is open, square off the nav's bottom corners so the
   two read as a single pill that extends downward. */
.nav-wrap:has(#mobileMenu:not([hidden])) .nav{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:none;
}
.mobile-menu[hidden]{display:none;}
@media (min-width:721px){.mobile-menu{display:none !important;}}
.mobile-menu a{
  font-family:var(--mono);font-size:15px;color:var(--nav-fg);
  padding:13px 4px;border-bottom:1px solid var(--nav-hair);
}
.mobile-menu a:last-child{border-bottom:none;}
 
/* ===== Hero ===== */
.hero{
  padding:0 var(--pad);
  min-height:calc(100svh - 76px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:48px;
}
.hero-top{display:flex;flex-direction:column;}
.hero-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:26px;
}
.hero-dash{display:inline-block;width:34px;height:1.5px;background:var(--muted-2);}
.hero h1{
  font-size:clamp(46px,10.5vw,148px);
  line-height:0.92;
  letter-spacing:-0.035em;
  font-weight:700;
  margin-bottom:30px;
  max-width:13ch;
}
.lede{font-size:clamp(17px,1.8vw,21px);letter-spacing:-.25px;color:var(--ink-2);max-width:46ch;line-height:1.55;}

/* bottom meta bar */
.hero-bar{
  display:flex;align-items:center;justify-content:end;gap:24px;
  border-top:1px solid var(--hair);
  padding-top:22px;
}
.hero-meta-value{font-size:15px;color:var(--ink-2);}
.hero-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;min-height:46px;letter-spacing:0.02em;transition:.2s;font-family:var(--mono);font-size:16px;}
.btn-primary{background:var(--ink);color:var(--bg);padding:0 22px;border-radius:10px;}
.btn-primary:hover{opacity:.88;}
.btn-ghost{color:var(--ink);border-bottom:1px solid var(--hair-2);padding-bottom:3px;}
.btn-ghost:hover{border-color:var(--ink);}
 
/* ===== Services ===== */
.services{padding:72px var(--pad) 80px;}
.services-head{display:block;margin-bottom:20px;}
.svc{
  display:grid;grid-template-columns:180px 1fr;gap:0 36px;
  border-top:1px solid var(--hair);padding:30px 0;
}
.svc:last-child{border-bottom:1px solid var(--hair);}
.svc-label{font-family:var(--mono);font-size:13px;color:var(--muted-2);}
.svc-body h3{font-size:20px;margin-bottom:9px;}
.svc-body p{font-size:15.5px;color:var(--muted);max-width:58ch;}
 
/* ===== Work ===== */
.selected-work{padding:0 var(--pad);margin-bottom:20px;}
.work{
  padding:0 var(--pad) 88px;
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
}
.work-copy h3{font-size:clamp(30px,4vw,44px);margin-bottom:18px;}
.work-copy p{color:var(--ink-2);font-size:16px;margin-bottom:14px;}
.work-visual{display:flex;align-items:center;justify-content:center;}
.work-img{max-width:220px;width:100%;height:auto;display:block;}
 
/* ===== Contact ===== */
.contact-sec{
  border-top:1px solid var(--hair);
  padding:80px var(--pad);
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;
}
.contact-copy h2{font-size:clamp(32px,4.6vw,52px);max-width:16ch;margin:18px 0 26px;}
.contact-lede{font-size:17px;color:var(--muted);max-width:46ch;margin-bottom:26px;}
.mail{
  font-family:var(--mono);font-size:clamp(16px,2.2vw,22px);
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;display:inline-block;
}
.mail:hover{opacity:.7;}
.copyright{font-family:var(--mono);font-size:12px;color:var(--muted-2);white-space:nowrap;}
 
/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
 
/* ===== Tablet ===== */
@media (max-width:880px){
  :root{--pad:32px;}
  .work{grid-template-columns:1fr;gap:32px;}
  .work-visual{order:-1;}
}
 
/* ===== Mobile ===== */
@media (max-width:720px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:600px){
  :root{--pad:18px;}
  .nav-wrap{padding-top:12px;}
  .nav{height:56px;}
  .brand-text{font-size:15px;}
  .brand-studio{display:none;}
  .hero{min-height:calc(100svh - 68px);padding:0 var(--pad);gap:32px;}
  .hero h1{font-size:clamp(44px,15vw,72px);max-width:none;line-height:1.05;}
  .lede{font-size:16px;}
  .hero-meta{display:none;}
  .hero-bar{flex-direction:column;align-items:flex-start;gap:20px;}
  .hero-actions{width:100%;gap:12px;margin-top:16px;}
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost{flex:1;justify-content:center;text-align:center;}
  .hero-actions .btn-ghost{
    border:1px solid var(--hair-2);
    border-radius:10px;
    padding:0 18px;
  }
  .svc{grid-template-columns:1fr;gap:10px;padding:26px 0;}
  .services{padding-bottom:56px;}
  .work{padding-bottom:56px;}
  .contact-sec{grid-template-columns:1fr;gap:28px;align-items:start;padding:56px var(--pad);}
  .copyright{white-space:normal;}
}
 
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  body,.theme-toggle,.nav-links a{transition:none;}
}