/* ============================================================
   SKY MEDIA — shared stylesheet
   Bright light-blue / white sky at the top, deepening into a
   deep blue and then night as you scroll. Soft, premium clouds.
   A warm sun that becomes a moon at the footer.
   ============================================================ */

:root {
  /* Bright sky ramp (top -> bottom of page) */
  --c0: #f2f9ff;  /* brightest, near-white blue */
  --c1: #d8ecff;  /* bright light blue */
  --c2: #c4e2ff;
  --c3: #a3d0f7;
  --c4: #5f9ae6;  /* mid transition */
  --c5: #23538f;  /* deep blue */
  --night:   #10305c;
  --night-2: #081d3b;

  /* Warm accent (sun) — used sparingly */
  --sun:   #ffd79a;
  --sun-2: #f4a35c;

  /* Ink */
  --ink:      #0c2340;   /* headings on light */
  --ink-body: #395574;   /* body on light */
  --paper:    #ffffff;
  --on-dark:      #ffffff;
  --on-dark-soft: #cfe0f7;

  /* Type */
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--body); color: var(--ink-body);
  background: var(--night-2); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 140px); position: relative; }

/* Seamless bands: each bottom color == next top color */
.band-hero    { background: linear-gradient(180deg, var(--c0) 0%, var(--c1) 100%); }
.band-arg     { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); }
.band-service { background: linear-gradient(180deg, var(--c2) 0%, var(--c3) 100%); }
.band-proof   { background: linear-gradient(180deg, var(--c3) 0%, var(--c5) 26%, var(--night) 100%); }
.band-contact { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }

.band-about-hero { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); }
.band-story      { background: linear-gradient(180deg, var(--c2) 0%, var(--c3) 100%); }
.band-personal   { background: linear-gradient(180deg, var(--c3) 0%, var(--night) 130px, var(--night-2) 100%); }
.section.band-personal { padding-top: 170px; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #2f6bbf; margin: 0 0 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--sun-2), var(--sun)); display: inline-block; }
.on-dark .eyebrow { color: var(--sun); }

h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
h1 { font-size: clamp(44px, 8vw, 92px); }
h2 { font-size: clamp(30px, 4.6vw, 54px); }
h3 { font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -0.01em; }

.lede { font-size: clamp(17px, 1.7vw, 21px); max-width: 44ch; margin: 24px 0 0; }
.on-dark .lede { color: var(--on-dark-soft); }
p { margin: 0 0 18px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--body); font-weight: 600; font-size: 15.5px; padding: 14px 24px; border-radius: 999px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; border: 0; }
.btn-sun { background: linear-gradient(135deg, var(--sun) 0%, var(--sun-2) 100%); color: #3a2410; box-shadow: 0 10px 30px -10px rgba(244,163,92,.7); }
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(244,163,92,.85); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(12,35,64,.28); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-ghost { color: var(--on-dark); border-color: rgba(255,255,255,.4); }
.on-dark .btn-ghost:hover { border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease; }
.nav.scrolled { background: rgba(242,249,255,.85); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(12,35,64,.08); }
.brand { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 9px; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--sun), var(--sun-2)); box-shadow: 0 0 14px 2px rgba(244,163,92,.55); }
.brand-mark { height: 30px; width: auto; display: block; }
.nav .brand-mark { filter: drop-shadow(0 1px 3px rgba(12,35,64,.22)); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500; opacity: .82; }
.nav-links a:hover { opacity: 1; }
.nav-links .btn { padding: 10px 18px; font-size: 14.5px; }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; padding-top: 96px; }
.hero h1 { max-width: 15ch; }
.hero h1 .x { background: linear-gradient(120deg, #ef8a2e 0%, #d3660f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sky-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.sun { position: absolute; right: 9%; top: 24%; width: clamp(120px, 19vw, 230px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff6e6 0%, var(--sun) 42%, var(--sun-2) 100%); box-shadow: 0 0 90px 30px rgba(255,215,154,.5), 0 0 170px 70px rgba(244,163,92,.22); }

/* Premium soft clouds (feathered radial puffs) */
.cloud {
  position: absolute; aspect-ratio: 3 / 1.35;
  background:
    radial-gradient(closest-side, #fff, transparent) 8% 72% / 44% 62% no-repeat,
    radial-gradient(closest-side, #fff, transparent) 38% 30% / 52% 88% no-repeat,
    radial-gradient(closest-side, #fff, transparent) 70% 60% / 48% 66% no-repeat,
    radial-gradient(closest-side, #fff, transparent) 50% 82% / 74% 48% no-repeat;
  filter: blur(3px) drop-shadow(0 18px 28px rgba(86,128,190,.20));
}
.cloud.c1 { width: 270px; top: 29%; right: 25%; opacity: .96; animation: float1 26s ease-in-out infinite; }
.cloud.c2 { width: 175px; top: 54%; right: 12%; opacity: .8;  animation: float2 32s ease-in-out infinite; }
.cloud.c3 { width: 205px; top: 18%; left: 33%; opacity: .9;  animation: float3 29s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-28px,9px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(22px,-11px)} }
@keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,7px)} }
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; } }

/* ---------- Argument (contrast) ---------- */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.card { background: rgba(255,255,255,.72); border: 1px solid rgba(12,35,64,.09); border-radius: 20px; padding: 34px; backdrop-filter: blur(4px); }
.card .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-body); opacity: .75; }
.card.own { background: rgba(255,255,255,.94); border-color: rgba(244,163,92,.4); box-shadow: 0 20px 50px -24px rgba(23,63,121,.4); }
.card h3 { margin: 8px 0 12px; }
.card p { margin: 0; font-size: 16px; }
.arg-close { max-width: 64ch; margin: 40px 0 0; font-size: clamp(17px, 1.9vw, 22px); color: var(--ink); font-family: var(--display); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.arg-close b { color: #bf5a0d; font-weight: 700; }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
.svc { background: rgba(255,255,255,.9); border: 1px solid rgba(12,35,64,.08); border-radius: 22px; padding: 38px; }
.svc .num { font-family: var(--mono); font-size: 13px; color: var(--sun-2); letter-spacing: .08em; }
.svc h3 { margin: 14px 0 14px; }
.svc p { margin: 0; color: var(--ink-body); font-size: 16.5px; }

/* ---------- Proof / case studies ---------- */
.proof .wrap { position: relative; z-index: 2; }
.cases { display: grid; gap: 20px; margin-top: 52px; }
.case { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: clamp(26px, 3vw, 40px); }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.logo-chip { display: inline-flex; align-items: center; gap: 10px; background: transparent; border-radius: 0; padding: 0; box-shadow: none; }
.logo-chip img { height: 46px; width: auto; display: block; border-radius: 11px; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.logo-chip .wordmark { display: none; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.case-role { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
.case-lede { color: var(--on-dark-soft); font-size: 17px; margin: 0 0 30px; max-width: 62ch; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px 34px; }
.kpi { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.kpi .n { font-family: var(--mono); font-weight: 700; font-size: clamp(22px, 2.7vw, 32px); color: var(--sun); line-height: 1; letter-spacing: -.02em; }
.kpi .l { color: var(--on-dark-soft); font-size: 13.5px; margin-top: 9px; }
.proof-note { color: var(--on-dark-soft); opacity: .7; font-size: 14px; margin-top: 26px; font-family: var(--mono); letter-spacing: .04em; }

/* ---------- Receipts (about) ---------- */
.receipts { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16); }
.receipts span { font-family: var(--mono); color: var(--on-dark-soft); font-size: 14.5px; letter-spacing: .03em; }
.receipts b { color: var(--sun); font-weight: 700; }

/* ---------- About ---------- */
.about-hero .wrap { padding-top: 132px; display: grid; grid-template-columns: 1.4fr .9fr; gap: 48px; align-items: center; }
.headshot { width: 100%; max-width: 320px; aspect-ratio: 1; border-radius: 24px; justify-self: end; background: linear-gradient(150deg, var(--c1) 0%, var(--c4) 100%); display: grid; place-items: center; border: 1px solid rgba(12,35,64,.12); box-shadow: 0 30px 70px -30px rgba(23,63,121,.5); overflow: hidden; }
.headshot img { width: 100%; height: 100%; object-fit: cover; }
.headshot .mono { font-family: var(--display); font-weight: 700; font-size: 64px; color: #fff; text-shadow: 0 4px 20px rgba(23,63,121,.5); }
.story { max-width: 62ch; }
.story p { color: var(--ink-body); font-size: 17.5px; margin: 0 0 22px; }
.story p:first-of-type { font-size: clamp(20px,2.2vw,26px); color: var(--ink); font-family: var(--display); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.personal .wrap { position: relative; z-index: 2; }
.personal p { color: var(--on-dark-soft); max-width: 58ch; font-size: 17.5px; }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact h2 { max-width: 18ch; margin: 0 auto; }
.contact .lede { margin: 24px auto 0; text-align: center; }
.contact .btn-row { justify-content: center; }
.moon { position: absolute; right: 12%; top: 16%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fdf6ea, #cdd8ea 70%); box-shadow: 0 0 50px 12px rgba(205,216,234,.3); z-index: 1; }

/* ---------- Footer ---------- */
.footer { background: var(--night-2); color: var(--on-dark-soft); padding: 46px var(--gutter); }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-inline: 0; }
.footer .brand { color: #fff; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-size: 14.5px; opacity: .8; }
.footer-links a:hover { opacity: 1; color: var(--sun); }
.footer small { display: block; width: 100%; opacity: .5; font-size: 13px; margin-top: 8px; font-family: var(--mono); }

/* ---------- Reveal + focus ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sun-2); outline-offset: 3px; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .contrast, .svc-grid { grid-template-columns: 1fr; }
  .about-hero .wrap { grid-template-columns: 1fr; }
  .headshot { justify-self: start; }
  .nav-links { gap: 16px; }
  .nav-links a:not(.btn) { display: none; }
  .cloud.c3 { display: none; }
  .cloud.c1 { right: 6%; width: 200px; }
}


/* ===================== PHOTO BACKGROUND + GLASS ===================== */
html,body{background:transparent;}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url('images/bg.jpg') center/cover no-repeat;}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(8,20,48,.04), rgba(8,20,48,.16));}
.band-hero,.band-arg,.band-service,.band-proof,.band-contact,.band-about-hero,.band-story,.band-personal{background:transparent !important;}
.sky-art,.moon{display:none !important;}
.section{padding-block:clamp(40px,6vw,72px);}
.glass-panel{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.42));-webkit-backdrop-filter:blur(22px) saturate(155%);backdrop-filter:blur(22px) saturate(155%);border:1px solid rgba(255,255,255,.55);border-radius:28px;box-shadow:0 28px 70px -26px rgba(6,18,48,.55), inset 0 1px 0 rgba(255,255,255,.75);padding:clamp(28px,3.6vw,52px);}
.hero .glass-panel{max-width:660px;}
.contact .glass-panel{max-width:840px;margin-inline:auto;text-align:center;}
.about-hero .glass-panel{display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:center;}
@media(max-width:820px){.about-hero .glass-panel{grid-template-columns:1fr;}}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--ink) !important;}
.on-dark .eyebrow{color:#2f6bbf !important;}
.on-dark .lede,.on-dark p{color:#33507a !important;}
.case-lede,.case-role,.kpi .l,.proof-note,.personal p,.receipts span{color:#3a5680 !important;}
.kpi .n,.receipts b{color:#c06a12 !important;}
.card,.svc,.case{background:rgba(255,255,255,.34) !important;border:1px solid rgba(255,255,255,.55) !important;backdrop-filter:blur(4px);box-shadow:none !important;}
.card.own{background:rgba(255,255,255,.48) !important;}
.logo-chip{background:transparent !important;}
.nav{background:rgba(255,255,255,.5) !important;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.4), 0 10px 30px -18px rgba(6,18,48,.5);}
.nav.scrolled{background:rgba(255,255,255,.62) !important;}
.footer{background:rgba(8,20,45,.5) !important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}

/* ===================== RESPONSIVE TUNING (mobile + desktop) ===================== */
@media (max-width: 820px){
  .nav{ padding:13px var(--gutter); }
  .nav-links a:not(.btn){ display:inline-block; }        /* keep About reachable on mobile */
  .nav-links a[href$="#proof"]{ display:none; }          /* hide only the in-page Work link */
  .brand{ font-size:18px; }
  .brand-mark{ height:28px; }
  .nav-links{ gap:14px; }
  .nav-links a{ font-size:14px; }
  .nav-links .btn{ padding:9px 15px; font-size:13.5px; }

  .section{ padding-block:clamp(34px,7vw,56px); }
  .glass-panel{ padding:24px 20px; border-radius:20px; }
  .hero .wrap{ padding-top:88px; }
  .lede{ max-width:100%; }
  .btn-row{ gap:10px; }
  .kpis{ grid-template-columns:1fr 1fr; gap:22px 24px; }
  .kpi .n{ font-size:clamp(22px,6.2vw,30px); }
  .case-head{ gap:12px; }
}
@media (max-width: 460px){
  .glass-panel{ padding:20px 16px; border-radius:18px; }
  .kpis{ grid-template-columns:1fr; }
  h1{ font-size:clamp(36px,9.5vw,48px); }
  h2{ font-size:clamp(25px,7vw,34px); }
  .brand{ font-size:16px; gap:7px; }
  .brand-mark{ height:25px; }
  .nav-links{ gap:10px; }
  .nav-links a:not(.btn){ font-size:13px; }
  .nav-links .btn{ padding:8px 13px; font-size:13px; }
  .contrast, .svc-grid{ gap:14px; }
  .footer .wrap{ gap:12px; }
}