/* colors */
/* ==========================================================================
   NAKED · Color tokens
   Anchored on the logo's electric cobalt blue (#0A56F0). Naked is a clean,
   high-contrast brand: blue + ink + white + cool tints, with a cyan water
   splash accent used sparingly. No cream. No rainbow.
   ========================================================================== */
:root {
  /* — Brand blue scale — */
  --blue-50:  #eef3fe;
  --blue-100: #dbe6fd;
  --blue-200: #b8ccfb;
  --blue-300: #8eaaf8;
  --blue-400: #4f7df4;
  --blue-500: #0a56f0;  /* core brand blue — sampled from logo */
  --blue-600: #0a47cc;
  --blue-700: #0a3aa6;
  --blue-800: #0c3284;
  --blue-900: #0d2c6b;

  /* — Ink / neutral scale (cool, slightly blue-tinted) — */
  --ink-900: #0a1124;  /* near-black navy — headlines, ink */
  --ink-800: #161d33;
  --ink-700: #2b3142;  /* body strong */
  --ink-600: #3c4356;
  --ink-500: #5b6275;  /* muted */
  --ink-400: #858ca0;  /* muted soft */
  --ink-300: #b6bcc9;
  --ink-200: #d9dde6;
  --ink-100: #e9ecf2;
  --ink-50:  #f4f6fa;
  --white:   #ffffff;

  /* — Water splash accent (sparingly: badges, illustration highlights) — */
  --cyan-300: #7fe3ff;
  --cyan-400: #2fcdf5;
  --cyan-500: #16c0ee;

  /* ——— Semantic aliases ——— */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-press:  var(--blue-700);
  --color-on-primary:     var(--white);

  --color-accent:         var(--cyan-500);

  /* Surfaces */
  --surface-canvas:   var(--white);     /* default page floor — bright white */
  --surface-soft:     #f5f7fb;          /* footer / CTA band — cool off-white */
  --surface-tint:     var(--blue-50);   /* pale-blue feature surfaces */
  --surface-tint-2:   var(--blue-100);  /* stronger blue tint */
  --surface-card:     var(--white);
  --surface-dark:     var(--ink-900);   /* dark feature cards / footer-alt */
  --surface-dark-2:   var(--ink-800);
  --hairline:         #e6e9f1;
  --hairline-strong:  #d4d9e4;

  /* Text */
  --text-ink:        var(--ink-900);
  --text-strong:     var(--ink-700);
  --text-body:       var(--ink-600);
  --text-muted:      var(--ink-500);
  --text-muted-soft: var(--ink-400);
  --text-on-dark:    var(--white);
  --text-on-primary: var(--white);
  --text-link:       var(--blue-500);

  /* Feature-card fills (the Naked rhythm: blue → ink → sky → tint → white) */
  --card-blue:   var(--blue-500);   /* white text */
  --card-ink:    var(--ink-900);    /* white text */
  --card-sky:    #d6e6ff;           /* dark text */
  --card-tint:   var(--blue-50);    /* dark text */
  --card-white:  var(--white);      /* dark text, hairline */

  /* Semantic states */
  --color-success: #16b364;
  --color-warning: #f5a524;
  --color-error:   #f0463a;
}

/* typography */
/* ==========================================================================
   NAKED · Typography tokens
   One family: Hanken Grotesk (substitute for the custom logo face).
   Display = weight 800 with tight negative tracking (echoes the heavy
   geometric wordmark). Body = 400/500. Bold + confident, never timid.
   ========================================================================== */
:root {
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Display scale (Hanken 800, negative tracking) */
  --display-xl-size: 72px;
  --display-xl-lh: 1.0; /* @kind font */
  --display-xl-ls: -2.5px;
  --display-lg-size: 56px;
  --display-lg-lh: 1.04; /* @kind font */
  --display-lg-ls: -1.8px;
  --display-md-size: 40px;
  --display-md-lh: 1.08; /* @kind font */
  --display-md-ls: -1.2px;
  --display-sm-size: 32px;
  --display-sm-lh: 1.12; /* @kind font */
  --display-sm-ls: -0.8px;

  /* Titles (semibold/bold) */
  --title-lg-size: 24px;
  --title-lg-lh: 1.28; /* @kind font */
  --title-lg-ls: -0.4px;
  --title-md-size: 18px;
  --title-md-lh: 1.4; /* @kind font */
  --title-md-ls: -0.2px;
  --title-sm-size: 16px;
  --title-sm-lh: 1.4; /* @kind font */
  --title-sm-ls: 0; /* @kind font */

  /* Body */
  --body-lg-size: 18px;
  --body-lg-lh: 1.6; /* @kind font */
  --body-md-size: 16px;
  --body-md-lh: 1.6; /* @kind font */
  --body-sm-size: 14px;
  --body-sm-lh: 1.55; /* @kind font */

  /* Detail */
  --caption-size: 13px;
  --caption-lh: 1.4; /* @kind font */
  --overline-size: 12px;
  --overline-lh: 1.4; /* @kind font */
  --overline-ls: 1.6px;
  --button-size: 15px;
  --button-lh: 1.0; /* @kind font */
  --nav-size: 15px;
  --nav-lh: 1.4; /* @kind font */
}

/* spacing */
/* ==========================================================================
   NAKED · Spacing tokens · base unit 4px
   ========================================================================== */
:root {
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-3xl: 64px;
  --space-section: 96px;   /* rhythm between major editorial bands */

  --container-max: 1200px;
  --container-pad: 24px;
}

/* radius */
/* ==========================================================================
   NAKED · Radius + elevation
   Geometric-but-friendly corners. Primary CTAs are PILL (confident, playful).
   Depth comes from color contrast + hairlines, not heavy shadows.
   ========================================================================== */
:root {
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* inputs, small cards */
  --radius-lg:   16px;   /* content / testimonial / pricing cards */
  --radius-xl:   24px;   /* saturated feature cards */
  --radius-2xl:  32px;   /* hero artifact, big bands */
  --radius-pill: 9999px; /* buttons, tabs, badges */
  --radius-full: 50%;

  /* Elevation — intentionally restrained */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(10,17,36,0.06);
  --shadow-md:  0 6px 20px rgba(10,17,36,0.08);
  --shadow-lg:  0 18px 48px rgba(10,17,36,0.12);
  --shadow-blue: 0 12px 32px rgba(10,86,240,0.28); /* blue glow under CTAs */
}

/* base */
/* ==========================================================================
   NAKED · Base / reset + helpful utility classes
   Sets the white canvas, default ink type, and a few text-style helpers that
   map to the typography tokens.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-ink);
  font-weight: var(--fw-extra);
  margin: 0;
}

a { color: var(--text-link); text-decoration: none; }

/* — Type helpers — */
.nk-display-xl { font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--display-xl-size); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); color: var(--text-ink); }
.nk-display-lg { font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--display-lg-size); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); color: var(--text-ink); }
.nk-display-md { font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--display-md-size); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); color: var(--text-ink); }
.nk-display-sm { font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: var(--display-sm-size); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); color: var(--text-ink); }
.nk-title-lg { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--title-lg-size); line-height: var(--title-lg-lh); letter-spacing: var(--title-lg-ls); color: var(--text-ink); }
.nk-title-md { font-weight: var(--fw-semibold); font-size: var(--title-md-size); line-height: var(--title-md-lh); color: var(--text-ink); }
.nk-body { font-size: var(--body-md-size); line-height: var(--body-md-lh); color: var(--text-body); }
.nk-overline { font-size: var(--overline-size); line-height: var(--overline-lh);
  letter-spacing: var(--overline-ls); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--text-muted); }

/* — Container — */
.nk-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

/* page */

  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--surface-canvas); }
  a { color: var(--blue-500); text-decoration: none; }
  a:hover { color: var(--ink-900); }
  section[id] { scroll-margin-top: 84px; }
  .nk-navlink:hover { color: var(--blue-500) !important; }

  /* ===== Rotating hero word ===== */
  .rot { position: relative; display: inline-block; color: var(--blue-500); text-align: left; vertical-align: bottom; }
  .rot-sizer { visibility: hidden; }
  .rot-word { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: rotcycle 18.2s infinite both; }
  .rot-word:nth-child(2) { animation-delay: -0.35s; }
  .rot-word:nth-child(3) { animation-delay: 2.25s; }
  .rot-word:nth-child(4) { animation-delay: 4.85s; }
  .rot-word:nth-child(5) { animation-delay: 7.45s; }
  .rot-word:nth-child(6) { animation-delay: 10.05s; }
  .rot-word:nth-child(7) { animation-delay: 12.65s; }
  .rot-word:nth-child(8) { animation-delay: 15.25s; }
  @keyframes rotcycle {
    0%    { opacity: 0; transform: translateY(0.2em); }
    2%    { opacity: 1; transform: translateY(0); }
    13.3% { opacity: 1; transform: translateY(0); }
    15%   { opacity: 0; transform: translateY(-0.2em); }
    100%  { opacity: 0; transform: translateY(0.2em); }
  }

  /* ===== Subtle animations ===== */
  .anim-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .anim-ready .reveal.in { opacity: 1; transform: none; }
  .anim-ready .reveal.d1 { transition-delay: .1s; }
  .anim-ready .reveal.d2 { transition-delay: .2s; }
  .anim-ready .reveal.d3 { transition-delay: .3s; }
  .lift { transition: transform .16s ease, box-shadow .16s ease; }
  .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .email-card:hover { transform: translateY(-2px); }
  @media (prefers-reduced-motion: reduce) {
    .anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .lift, .lift:hover, .email-card:hover { transform: none !important; transition: none !important; }
    .rot-word { animation: none !important; }
    .rot-word:nth-child(2) { opacity: 1 !important; }
  }

  .dd { position: relative; }
  .dd-menu { display: none; position: absolute; top: 100%; left: -28px; padding-top: 16px; z-index: 40; }
  .dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block; }
  .dd:hover .dd-caret { transform: rotate(180deg); }
  .dd-caret { transition: transform .16s ease; }
  .dd-item:hover { background: var(--surface-soft); }
  .menu-btn { display: none; }
  .mobile-menu { display: none; }

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr !important; gap: 34px !important; text-align: center; }
    .hero-side { max-width: 520px; margin: 0 auto !important; }
    .hero-sec .lead { margin-left: auto !important; margin-right: auto !important; }
    .hero-chips { justify-content: center !important; }
    .hero-cta { justify-content: center !important; }
    .locale-line { justify-content: center !important; }
  }

  @media (max-width: 900px) {
    .brand-tag { display: none !important; }
    .grid-3 { grid-template-columns: 1fr 1fr !important; }
    .valet-band { padding: 48px 32px !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  }

  @media (max-width: 780px) {
    .nav-links { display: none !important; }
    .nav-book { display: none !important; }
    .menu-btn { display: inline-flex !important; }
    .mobile-menu.open { display: flex !important; }
  }

  @media (max-width: 640px) {
    .nav-links { display: none !important; }
    .nav-book { display: none !important; }
    .menu-btn { display: inline-flex !important; }
    .mobile-menu.open { display: flex !important; }

    .grid-3 { grid-template-columns: 1fr !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .valet-band { padding: 40px 20px !important; border-radius: var(--radius-xl) !important; }
    .brand-tag { display: none !important; }
    .email-card { padding: 16px 18px !important; gap: 12px !important; }
    .email-icon { width: 44px !important; height: 44px !important; }
    .email-text-big { font-size: 16px !important; }

    .hero-sec { padding-top: 34px !important; padding-bottom: 34px !important; }
    .hero-h1 { font-size: 40px !important; letter-spacing: -1.4px !important; }
    .locale-line { font-size: 13px !important; letter-spacing: 1.4px !important; }
    .hero-side { padding: 24px !important; }
    .lead { font-size: 17px !important; }

    .h2-big { font-size: 31px !important; letter-spacing: -0.9px !important; }
    .h3-mid { font-size: 27px !important; }

    .sec-v { padding-top: 56px !important; padding-bottom: 56px !important; }
    .about-sec { padding-top: 56px !important; }
    .ruthless-sec { padding-top: 40px !important; padding-bottom: 56px !important; }
    .contact-sec { padding-bottom: 64px !important; }

    .cta-wrap { margin-top: 56px !important; margin-bottom: 56px !important; }
    .cta-inner { padding: 48px 24px !important; }
    .footer-inner { padding-top: 48px !important; }
  }

.nk-btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; letter-spacing:-0.2px; line-height:1; border-radius:var(--radius-pill); white-space:nowrap; text-decoration:none; cursor:pointer; transition: transform .12s ease, filter .15s ease, background .15s ease; }
.nk-btn:active { transform: scale(0.97); }
.nk-btn-md { font-size:15px; padding:0 22px; height:46px; gap:9px; }
.nk-btn-lg { font-size:16px; padding:0 30px; height:56px; gap:10px; }
.nk-btn-primary, .nk-btn-primary:hover { background:var(--color-primary); color:var(--color-on-primary); border:2px solid var(--color-primary); }
.nk-btn-primary:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.nk-btn-oncolor, .nk-btn-oncolor:hover { background:#fff; color:var(--ink-900); border:2px solid #fff; }
.nk-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; letter-spacing:-0.1px; padding:7px 13px; border-radius:var(--radius-pill); }
.nk-badge-accent { background:#dff7ff; color:#0b6c87; }
.nk-badge-blue { background:var(--blue-50); color:var(--blue-700); }
.nav-toggle { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.menu-btn .ico-close { display:none; }
.nav-toggle:checked ~ .nav-bar .menu-btn .ico-open { display:none; }
.nav-toggle:checked ~ .nav-bar .menu-btn .ico-close { display:block; }
.nav-toggle:focus-visible ~ .nav-bar .menu-btn { outline:2px solid var(--blue-500); outline-offset:2px; }
@media (max-width: 780px) { .nav-toggle:checked ~ .mobile-menu { display:flex !important; } }