/* ==========================================================================
   Lomboz Studio · site.css
   Limewash, ink and one shutter blue. Hard shadows follow Bodrum's sun
   (see site.js: --sx / --sy are recalculated from the real solar position).
   ========================================================================== */

/* Fonts are self-hosted (no request to Google, see gizlilik.html). Files are
   Google Fonts' own variable woff2 subsets; Turkish needs both latin and latin-ext.
   Licences: assets/fonts/OFL-*.txt */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F3F5F2;          /* limewash */
  --bg-2: #E7EAE5;        /* wall in shade */
  --surface: #FAFBF9;
  --line: #C9CFC7;
  --line-soft: #DCE0DA;
  --field-line: #76838C;
  --ink: #10202B;         /* sea at night */
  --ink-2: #3F4E58;
  --ink-3: #55636C;
  --accent: #2140C4;      /* painted shutter blue */
  --accent-hover: #1A339E;
  --accent-soft: #D3DAF3;
  --on-accent: #F6F7F4;
  --shade: #C1CDD9;       /* a shadow on whitewash, lit by the sky */
  --night: #10202B;
  --night-2: #1A2E3B;
  --night-line: #2E4351;
  --on-night: #ECF0ED;
  --on-night-2: #B3C0C8;
  --accent-night: #9DB0FF;
  --error: #A8261B;
  --focus: #2140C4;

  /* hard-shadow vector, overwritten by the sun in site.js */
  --sx: 5px;
  --sy: 6px;

  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 2px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1240px;
  --gutter: 1rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C161D;
    --bg-2: #122029;
    --surface: #152630;
    --line: #2C3F4B;
    --line-soft: #1E303B;
    --field-line: #71858F;
    --ink: #E6ECE9;
    --ink-2: #B2BFC6;
    --ink-3: #9DABB3;
    --accent: #9DB0FF;
    --accent-hover: #BCC9FF;
    --accent-soft: #22335A;
    --on-accent: #0C161D;
    --shade: #03080C;
    --night: #13232D;
    --night-2: #1B2F3C;
    --night-line: #30475A;
    --error: #FF9E91;
    --focus: #9DB0FF;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.6rem);
  font-stretch: 87%;
  letter-spacing: -.017em;
  line-height: 1;
}
h3 {
  font-size: 1.28rem;
  font-stretch: 94%;
  line-height: 1.2;
  letter-spacing: -.008em;
}
strong { font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-night :focus-visible { outline-color: var(--accent-night); }
.on-night .form-card :focus-visible { outline-color: var(--focus); }

.nw { white-space: nowrap; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }

/* the signature: a hard, sun-cast shadow */
.hard {
  box-shadow: calc(var(--sx) * var(--k, 1) * var(--m, 1)) calc(var(--sy) * var(--k, 1) * var(--m, 1)) 0 0 var(--shade);
  transition: box-shadow 1.4s var(--ease);
}
/* phones: a shorter throw, so a low morning or evening sun keeps its shadow inside the 16px gutter */
@media (max-width: 599px) { :root { --m: .7; } }

/* ---------- buttons & links ---------- */
.btn {
  --k: .7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.25rem;
  padding: .85rem 1.45rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: calc(var(--sx) * var(--k)) calc(var(--sy) * var(--k)) 0 0 var(--shade);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translate(calc(var(--sx) * -.2), calc(var(--sy) * -.2));
  box-shadow: calc(var(--sx) * .95) calc(var(--sy) * .95) 0 0 var(--shade);
}
.btn-primary:active {
  transform: translate(calc(var(--sx) * .7), calc(var(--sy) * .7));
  box-shadow: 0 0 0 0 var(--shade);
}
.btn-quiet {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.btn-quiet:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn-quiet:active { transform: translateY(1px); }
.btn-sm { min-height: 2.75rem; padding: .6rem 1rem; font-size: .95rem; }

.arrow {
  position: relative;
  display: inline-block;
  width: 1.1em;
  height: 1.5px;
  background: currentColor;
  vertical-align: middle;
  transition: transform .3s var(--ease);
  flex: none;
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: .42em; height: .42em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
}
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  flex: none;
}
.logo { height: 21px; width: auto; display: block; }
.logo .i { fill: currentColor; }
.logo .s { fill: none; stroke: currentColor; stroke-width: 5; }
.logo .m { fill: none; stroke: var(--logo-muted, var(--ink-3)); stroke-width: 5; }
.logo .mf { fill: var(--logo-muted, var(--ink-3)); }
.logo .g { fill: var(--logo-accent, var(--accent)); }

.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  list-style: none;
}
.nav-list a {
  display: inline-block;
  padding: .6rem 0;
  font-size: .96rem;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .35rem) / 0 1.5px no-repeat;
  transition: background-size .3s var(--ease);
}
.nav-list a:hover { background-size: 100% 1.5px; }
.nav-cta { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.lang {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.lang:hover { border-color: var(--ink); }
.menu-btn {
  display: none;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 600 .95rem/1 var(--font-body);
  cursor: pointer;
}

@media (max-width: 1079px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav {
    display: none;
    position: fixed;
    inset: 4.25rem 0 0 0;
    z-index: 49;
    margin: 0;
    padding: 1.5rem var(--gutter) 3rem;
    background: var(--bg);
    border-top: 1px solid var(--line);
    overflow-y: auto;
  }
  .site-header[data-menu="open"] .nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line-soft); }
  .nav-list a {
    display: block;
    padding: .9rem 0;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-stretch: 85%;
    font-weight: 650;
    background: none;
  }
  .nav-cta { display: flex; margin-top: 2rem; }
  .nav-cta .btn { width: 100%; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 639px) {
  .header-actions .btn { display: none; }
}
@media (max-width: 380px) {
  .header-inner { gap: .5rem; }
  .logo { height: 18px; }
}
@media (min-width: 1080px) {
  .nav + .header-actions { margin-left: 1.25rem; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.25rem, 1.25rem + 3.5vw, 4.75rem) clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.hero h1 {
  font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
  font-stretch: 86%;
  font-weight: 720;
  line-height: .98;
  letter-spacing: -.012em;
}
@media (min-width: 900px) { .hero h1 .l2 { display: block; } }
.hero-grid {
  display: grid;
  gap: 2.25rem;
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}
.lede {
  font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}
.micro {
  margin: 1.25rem 0 0;
  font-size: .92rem;
  color: var(--ink-3);
  max-width: 30rem;
}
.hero-figure { margin: 0; }
.hero-figure .frame { --k: 1.4; }
@media (min-width: 900px) { .hero-figure .frame { --k: 2.2; } }
.frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure .frame { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .hero-figure .frame { aspect-ratio: 3 / 2; } }

.sun-note {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-top: calc(1rem + var(--sy) * 2.2);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 34rem;
}
.sun-swatch {
  --k: .8;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .15rem;
  background: var(--surface);
  border: 1.5px solid var(--ink);
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .hero-copy { padding-top: .5rem; }
}

/* ---------- season strip ---------- */
.season {
  background: var(--bg-2);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.season-inner { display: grid; gap: 1.75rem; }
.season h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-stretch: 88%;
  margin-bottom: .6rem;
}
.season p { margin: 0; color: var(--ink-2); max-width: 36rem; }
.cal { position: relative; padding-top: 1.9rem; }
.cal-bands {
  position: relative;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  height: 3.5rem;
}
.band {
  display: flex;
  align-items: center;
  padding: 0 .7rem;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.2;
  border-right: 2px solid var(--bg-2);
}
.band--build { grid-column: 1 / 5; background: var(--accent); color: var(--on-accent); }
.band--early { grid-column: 5 / 9; background: var(--accent-soft); color: var(--ink); }
.band--season { grid-column: 9 / 15; background: var(--surface); color: var(--ink); border-right: 0; box-shadow: inset 0 0 0 1.5px var(--line); }
.cal-months {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  list-style: none;
  margin-top: .5rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.cal-months li { padding-left: .15rem; white-space: nowrap; }
.cal-months small { display: block; font-weight: 500; font-size: .68rem; }
.cal-today {
  position: absolute;
  top: -.7rem;
  left: var(--pos, 4.8%);
  width: 3px;
  height: .7rem;
  background: var(--ink);
}
.cal-today span {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: .15rem .4rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .band { padding: 0 .4rem; font-size: .76rem; }
  .cal-months { font-size: .62rem; }
  .cal-months li:nth-child(even) { visibility: hidden; }
}
@media (max-width: 400px) {
  .band { padding: 0 .3rem; font-size: .68rem; }
}
@media (min-width: 960px) {
  .season-inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: end;
    gap: 3.5rem;
  }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section-y); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head h2 + p,
.section-intro {
  margin-top: 1.25rem;
  font-size: 1.12rem;
  color: var(--ink-2);
  max-width: 40rem;
}
.small-print {
  margin: 2.5rem 0 0;
  font-size: .86rem;
  color: var(--ink-3);
  max-width: 48rem;
}

/* ---------- problems ---------- */
.problems-grid { display: grid; gap: 2.5rem; }
.toll {
  --k: 1.6;
  align-self: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface);
  border: 1.5px solid var(--ink);
}
.toll-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 2.5rem + 7vw, 7.5rem);
  font-stretch: 75%;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.toll-unit {
  margin: .4rem 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-stretch: 85%;
  font-weight: 650;
}
.toll-cap { margin: 0; font-size: .98rem; color: var(--ink-2); }
.problem-list { list-style: none; display: grid; gap: 0; }
.problem-list li {
  padding: 1.75rem 0;
  border-top: 1.5px solid var(--ink);
}
.problem-list li:first-child { padding-top: 1.25rem; }
.problem-list h3 { margin-bottom: .65rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.problem-list p { margin: 0; color: var(--ink-2); max-width: 38rem; }
@media (min-width: 960px) {
  .problems-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
  .toll { position: sticky; top: 6.5rem; }
}

/* ---------- work ---------- */
.work { background: var(--surface); border-block: 1px solid var(--line-soft); }
.work-grid { display: grid; gap: clamp(2.75rem, 2rem + 3vw, 4.5rem) 2.5rem; }
.work-card { position: relative; display: grid; gap: 1.5rem; align-content: start; }
.work-media {
  --k: 1.3;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--demo-bg);
  color: var(--demo-fg);
  transition: box-shadow 1.4s var(--ease), transform .4s var(--ease);
}
.work-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.work-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .9rem;
  padding: clamp(1.1rem, 1rem + 1.5vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  font-stretch: 80%;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
}
.work-fallback::before {
  content: "";
  width: 3.5rem;
  height: 6px;
  background: var(--demo-accent);
}
/* shown until the real screenshot exists (or if it fails): the demo's own colours
   and a faint porthole ring, so the frame never looks broken */
.work-fallback {
  background:
    radial-gradient(circle at 80% 36%,
      transparent 0 21%,
      color-mix(in srgb, var(--demo-fg) 16%, transparent) 21% 23.5%,
      transparent 23.5%),
    var(--demo-bg);
}
.wf-name { display: block; }
.wf-kind {
  display: block;
  margin-top: -.35rem;
  font-family: var(--font-body);
  font-size: clamp(.85rem, .8rem + .3vw, 1rem);
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  opacity: .85;
}
.work-card[data-demo="hotel"] { --demo-bg: #1D2944; --demo-fg: #E9DCC4; --demo-accent: #C8337A; }
.work-card[data-demo="restaurant"] { --demo-bg: #A9502F; --demo-fg: #F5ECDD; --demo-accent: #7C7E3A; }
.work-card[data-demo="boat"] { --demo-bg: #0F5E93; --demo-fg: #F2FAFB; --demo-accent: #F4C542; }
.work-card:hover .work-media { transform: translate(calc(var(--sx) * -.25), calc(var(--sy) * -.25)); --k: 1.8; }
.work-body h3 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); font-stretch: 86%; }
.work-place { margin: .35rem 0 .8rem; font-weight: 600; color: var(--ink-3); }
.work-body > p:not(.badge):not(.work-place) { color: var(--ink-2); max-width: 34rem; }
.work-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work-link { position: static; }
@media (min-width: 800px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card--feature {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 2.5rem;
    align-items: end;
  }
  .work-card--feature .work-media { aspect-ratio: 16 / 9.5; }
  .work-card:nth-child(3) { margin-top: clamp(0rem, 6vw, 5rem); }
}

/* ---------- services (bento) ---------- */
.bento { display: grid; gap: 1rem; }
.cell {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-top: 1.5px solid var(--ink);
}
.cell h3 { margin-bottom: .75rem; }
.cell p { margin: 0; color: var(--ink-2); }
.cell--tint { background: var(--bg-2); border-top-color: transparent; }
.cell--box { background: var(--surface); border: 1.5px solid var(--line); }
.cell--night { background: var(--night); color: var(--on-night); border-top-color: transparent; }
.cell--night p { color: var(--on-night-2); }
.cell--plain { padding-inline: 0; }
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  align-items: baseline;
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 3vw, 4.25rem);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.langs .opt { color: transparent; -webkit-text-stroke: 1.5px var(--ink-3); }
.langs small {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-3);
  -webkit-text-stroke: 0;
}
/* two columns: the first two cells run full width, the other six pair up, so no row is left half empty */
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .cell--c1, .cell--c2 { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
  .cell--c1 { grid-column: span 5; }
  .cell--c2 { grid-column: span 7; }
  .cell--c3, .cell--c4, .cell--c5,
  .cell--c6, .cell--c7, .cell--c8 { grid-column: span 4; }
  .cell--plain { padding-right: 1rem; }
}

/* ---------- pricing ---------- */
.pricing { background: var(--bg-2); }
.plans { display: grid; gap: 1.5rem; align-items: start; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--surface);
  border: 1.5px solid var(--line);
}
.plan h3 { font-size: 1.6rem; font-stretch: 86%; }
.plan-for { margin: .6rem 0 1.5rem; color: var(--ink-2); min-height: 3.2em; }
.price-block {
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--line);
}
.price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-num { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.1rem); letter-spacing: -.02em; }
.price-suffix { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.1rem); font-weight: 450; letter-spacing: -.02em; }
.price-from { display: block; margin-bottom: .35rem; font-family: var(--font-body); font-size: .9rem; font-weight: 600; font-stretch: 100%; color: var(--ink-3); }
/* what the package costs, counted in nights that come to you instead of the platform */
.payback { margin: .9rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.payback strong { color: var(--ink); }
.includes { list-style: none; display: grid; gap: .7rem; margin-bottom: 1.75rem; }
.includes li { position: relative; padding-left: 1.4rem; font-size: .98rem; line-height: 1.45; }
.includes li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 7px; height: 7px;
  background: var(--accent);
}
.turnaround {
  margin: auto 0 0;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--line);
  font-size: .92rem;
  color: var(--ink-2);
}
.turnaround strong { display: block; color: var(--ink); }
.plan--featured {
  --k: 1.7;
  background: var(--night);
  color: var(--on-night);
  border-color: var(--night);
}
.plan--featured .plan-for,
.plan--featured .turnaround { color: var(--on-night-2); }
.plan--featured .turnaround strong { color: var(--on-night); }
.plan--featured .price-block { border-color: var(--night-line); }
.plan--featured .price-from,
.plan--featured .payback { color: var(--on-night-2); }
.plan--featured .payback strong { color: var(--on-night); }
.plan--featured .includes li::before { background: var(--accent-night); }
.plan--featured .turnaround { border-color: var(--night-line); }
/* in dark mode the night card sits close to the page colour, so the recommended plan gets a blue edge */
@media (prefers-color-scheme: dark) { .plan--featured { border-color: var(--accent); } }
.plan-tag {
  align-self: flex-start;
  margin: 0 0 1rem;
  padding: .25rem .6rem;
  background: var(--accent-night);
  color: #0C161D;
  font-size: .8rem;
  font-weight: 700;
}
@media (min-width: 1000px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
  .plan-for { min-height: 4.8em; } /* three lines, so the prices line up across the cards */
  .plan--featured { margin-top: -1.25rem; }
}

.care {
  display: grid;
  gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
  background: var(--surface);
  border: 1.5px solid var(--ink);
}
.care h3 { font-size: 1.6rem; font-stretch: 86%; }
.care-price {
  margin: .75rem 0 .5rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1;
}
.care-line { margin: 0; color: var(--ink-2); }
.care .includes { margin: 0; }
@media (min-width: 900px) {
  .care { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .care .includes { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
.addons { display: grid; gap: 1.25rem 3rem; margin-top: 2.25rem; }
.addons p { margin: 0; padding-top: 1rem; border-top: 1.5px solid var(--ink); color: var(--ink-2); }
.addons strong { color: var(--ink); }
@media (min-width: 800px) { .addons { grid-template-columns: 7fr 5fr; } }

/* ---------- process ---------- */
.steps { list-style: none; display: grid; gap: 0; position: relative; }
.step { position: relative; padding: 0 0 2.5rem 2.75rem; }
.step::before {
  content: "";
  position: absolute;
  left: 7px; top: .6rem; bottom: -.4rem;
  width: 1.5px;
  background: var(--ink);
}
.step:last-child::before { display: none; }
.step-node {
  --k: .45;
  position: absolute;
  left: 0; top: .3rem;
  width: 16px; height: 16px;
  background: var(--accent);
}
.step-time { margin: 0 0 .5rem; font-size: .9rem; font-weight: 650; color: var(--accent); }
.step h3 { margin-bottom: .7rem; font-size: 1.45rem; font-stretch: 88%; }
.step p:last-child { margin: 0; color: var(--ink-2); }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; }
  .step { padding: 2.75rem 0 0; }
  .step::before { left: 0; right: -2.25rem; top: 7px; bottom: auto; width: auto; height: 1.5px; }
  .step:last-child::before { display: block; right: 0; }
  .step-node { top: 0; }
}

/* ---------- why ---------- */
.why-grid { display: grid; gap: 2.5rem; }
.why-photo { margin: 0; }
.why-photo .frame { --k: 1.8; aspect-ratio: 4 / 5; }
.why-list { list-style: none; display: grid; gap: 2rem 2.5rem; }
.why-list h3 { margin-bottom: .6rem; }
.why-list p { margin: 0; color: var(--ink-2); }
.closing {
  margin: 2.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  font-stretch: 90%;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 40rem;
}
@media (min-width: 700px) { .why-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
  .why-grid .section-head { margin-bottom: 3rem; }
}

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq-grid { display: grid; gap: 2rem; }
.faq-grid .section-head { margin-bottom: 0; }
.faq-list { border-bottom: 1.5px solid var(--ink); }
.faq-list details { border-top: 1.5px solid var(--ink); }
.faq-list summary {
  position: relative;
  display: block;
  padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  font-stretch: 92%;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  text-wrap: balance;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list summary:hover { color: var(--accent); }
.faq-body { padding: 0 0 1.6rem; max-width: 44rem; color: var(--ink-2); }
.faq-body p { margin: 0; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .faq-grid .section-head { position: sticky; top: 6.5rem; align-self: start; }
}

/* ---------- about ---------- */
.about { background: var(--bg-2); }
.about-grid { display: grid; gap: 2.5rem; }
.portrait {
  --k: 1.6;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 22rem;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (max-width: 899px) { .portrait { max-width: 17rem; } }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait-mark { width: 40%; height: auto; margin-bottom: 2.5rem; }
.portrait-note {
  position: absolute;
  left: 1.25rem; right: 1.25rem; bottom: 1.1rem;
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.portrait-note b { color: var(--ink); font-weight: 650; }
.portrait-mark .ring { fill: none; stroke: var(--ink); stroke-width: 10; }
.portrait-mark .glass { fill: var(--accent); }
.about-text h2 { margin-bottom: 1.75rem; }
.about-text p { max-width: 38rem; color: var(--ink-2); font-size: 1.1rem; }
.about-text p:first-of-type { color: var(--ink); }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 6.5rem); align-items: center; }
}

/* ---------- contact (evening) ---------- */
.contact {
  background: var(--night);
  color: var(--on-night);
  --logo-muted: var(--on-night-2);
  --logo-accent: var(--accent-night);
}
.contact h2 { color: var(--on-night); }
.contact-grid { display: grid; gap: 3rem; }
.contact-copy p { color: var(--on-night-2); max-width: 32rem; font-size: 1.08rem; }
.contact-copy h2 + p { margin-top: 1.5rem; }
.contact-copy .btn { margin-top: .75rem; }
.contact .btn-quiet { border-color: var(--on-night-2); color: var(--on-night); }
.direct {
  display: grid;
  gap: .9rem;
  margin: 2.25rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--night-line);
}
.direct div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.direct dt { font-size: .9rem; color: var(--on-night-2); }
.direct dd { margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.direct a { text-decoration: underline; text-decoration-color: var(--night-line); }
.direct a:hover { text-decoration-color: currentColor; }

.form-card {
  --shade: var(--accent-night);
  --k: 1.5;
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  background: var(--surface);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) { .form-card { --shade: #3549A6; } }
.form-grid { display: grid; gap: 1.35rem; }
.field { display: grid; gap: .45rem; align-content: start; }
.field label { font-weight: 600; font-size: .98rem; }
.field .req { color: var(--accent); font-weight: 700; }
.hint { margin: 0; font-size: .86rem; color: var(--ink-3); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 55%, calc(100% - .95rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--ink);
}
.field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.error { margin: 0; font-size: .88rem; font-weight: 600; color: var(--error); }
.form-foot { display: grid; gap: 1.1rem; margin-top: .25rem; }
.legend-note, .privacy { margin: 0; font-size: .88rem; color: var(--ink-3); }
.privacy a { color: var(--ink); }
.form-card .btn-primary { width: 100%; --shade: var(--night); }
@media (prefers-color-scheme: dark) { .form-card .btn-primary { --shade: #03080C; } }
.form-card .btn-primary[aria-busy="true"] { opacity: .75; cursor: progress; }
.form-status {
  margin: 0;
  padding: .9rem 1rem;
  border: 1.5px solid var(--error);
  background: color-mix(in srgb, var(--error) 9%, var(--surface));
  font-size: .95rem;
  font-weight: 500;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; column-gap: 1.35rem; }
  .field--full { grid-column: 1 / -1; }
  @supports (grid-template-rows: subgrid) {
    .form-grid { row-gap: 0; }
    .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: .45rem; }
    .field-msg { padding-bottom: 1.1rem; }
  }
}
.field-msg { display: grid; gap: .35rem; align-content: start; }
@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
  .contact-copy { position: sticky; top: 6.5rem; }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--night);
  color: var(--on-night-2);
  border-top: 1px solid var(--night-line);
  padding-block: 3.5rem 2.5rem;
  font-size: .94rem;
  --logo-muted: var(--on-night-2);
  --logo-accent: var(--accent-night);
}
.site-footer .brand { color: var(--on-night); }
.footer-grid { display: grid; gap: 2rem; }
.footer-lines p { margin: 0 0 .5rem; max-width: 40rem; }
.footer-lines p:first-child { color: var(--on-night); font-weight: 600; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--night-line);
}
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; }
.footer-links a, .to-top { display: inline-block; padding: .5rem 0; color: var(--on-night); }
.site-footer .copy { margin: 0; padding: .5rem 0; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: auto 1fr; gap: 4rem; align-items: start; }
}

/* ---------- small pages (thank-you) ---------- */
.simple-main {
  min-height: calc(100dvh - 10rem);
  display: grid;
  align-items: center;
  padding-block: 4rem 6rem;
}
.simple-main h1 {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
  font-stretch: 80%;
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.025em;
  max-width: 16ch;
  margin-bottom: 1.5rem;
}
.simple-main p { font-size: 1.12rem; color: var(--ink-2); max-width: 36rem; }
.simple-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: 2rem; }
.header-actions--solo { margin-left: auto; }
.site-footer--slim { padding-block: 1.5rem; }
.site-footer--slim .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.done-mark { --k: 1.2; width: 64px; height: 64px; margin-bottom: 2rem; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--ink); }
.done-mark svg { width: 34px; height: 34px; }
.done-mark .ring { fill: none; stroke: var(--ink); stroke-width: 10; }
.done-mark .glass { fill: var(--accent); }

/* ---------- legal pages (privacy notice) ---------- */
.legal-main { padding-block: 3.5rem 6rem; }
.legal-header { max-width: 42rem; margin-bottom: 3rem; }
.legal-header h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  font-stretch: 80%; font-weight: 750; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .85rem;
}
.legal-header .updated { color: var(--ink-3); margin: 0; }
.legal-body { max-width: 42rem; }
.legal-body h2 {
  font-family: var(--font-display); font-stretch: 84%; font-weight: 720;
  font-size: 1.3rem; letter-spacing: -.01em; margin: 2.4rem 0 .9rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-2); margin: 0 0 1.1rem; max-width: none; }
.legal-body ul, .legal-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; color: var(--ink-2); }
.legal-body li { margin-bottom: .4rem; }
.legal-body li::marker { color: var(--ink-3); }
.legal-body a { color: var(--accent); text-decoration-thickness: 1px; }
.legal-body strong { color: var(--ink); }
.legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; font-size: .95rem; }
.legal-body th, .legal-body td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-body th { color: var(--ink-3); font-weight: 600; }

/* ---------- motion ---------- */
/* The one thing that moves on its own is the sun: the hard shadows ease to their
   new angle when site.js updates --sx / --sy. Sections do not animate in; the page
   is readable the moment it arrives. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .btn-primary:hover, .work-card:hover .work-media { transform: none; }
}

@media print {
  .site-header, .skip, .menu-btn, .sun-note { display: none !important; }
  .hard { box-shadow: none !important; }
}