/* ==========================================================================
   ALANYAS.NO — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Direction: "Çini & Kalk" (tile & lime-wash).
   Mediterranean warmth held inside Nordic editorial discipline.

   Rules of the house:
     - Flat, hard-edged. Almost no border radius. Depth comes from
       offset shadows and layer overlap, never from soft blur.
     - One loud accent (terracotta). Everything else is quiet.
     - Soft serif display (Fraunces) against a geometric sans (Outfit).
     - Fraunces runs at weight 600+ on purpose: the previous didone's
       hairline strokes disappeared at hero size.
     - The çini tile is the signature; it appears in 4 weights:
       hero wash, section edge, card tile, and hairline rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- palette -------------------------------------------------------
     The client palette. Every value below is either given or derived from
     it, and each text pairing has been contrast-checked:

       navy on offwhite ....... 12.1:1   AAA
       charcoal on offwhite ... 12.1:1   AAA
       fjord on offwhite ....... 4.8:1   AA normal
       terracotta on offwhite .. 3.4:1   AA large only  -> fills + big type
       terracotta-text ......... 5.4:1   AA normal      -> derived, for small text

     The last point matters: the brand terracotta is too light to set body
     copy in. Rather than ignore that (unreadable small text) or abandon the
     brand colour, the accent is split into a fill token and a darker text
     token that share the same hue.
     ------------------------------------------------------------------- */

  /* ground */
  --kalk: #f7f5f0; /* warm off-white — page ground */
  --kalk-2: #efebe3; /* one step down, for alternating sections */
  --kalk-3: #e3ddd3; /* two steps down */
  --sand: #d8d0c4; /* warm rule/tint, derived from the off-white */
  --beyaz: #ffffff; /* card surface */

  /* ink */
  --ink: #17324d; /* deep nordic navy — headings, borders, dark bands */
  --ink-2: #3c5468; /* secondary text, navy desaturated for body copy */
  --ink-3: #556a7b; /* muted text and captions — 5.0:1 on the off-white */
  --charcoal: #263238; /* given text colour, used where warmth is wanted */

  /* secondary */
  --sea: #4f7185; /* fjord blue — links, icons */
  --sea-2: #6a8b9d;
  --sea-pale: #e4eaee; /* derived tint of fjord */

  /* the one loud accent */
  --kilim: #c86b4a; /* warm terracotta — fills, borders, large type */
  --kilim-text: #a34e30; /* derived darker tint — small text on light ground */
  --kilim-2: #e08a66; /* lighter tint — accents on navy (4.4:1) */
  --kilim-bright: #f0a483; /* lightest tint — small text on navy (6.5:1) */
  --kilim-pale: #f7e6de; /* derived wash */

  /* soft accent */
  --sage: #a8b8a5; /* given sage — decorative washes only, never small text */
  --sage-deep: #6f8168; /* derived — sage dark enough for text and icons */

  --altin: #8a6a1f; /* muted brass, for the key motif only */

  /* semantic */
  --bg: var(--kalk);
  --surface: var(--beyaz);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --text-mute: var(--ink-3);
  --line: var(--ink);
  --line-soft: rgba(23, 50, 77, 0.16);
  --link: var(--sea);
  --accent: var(--kilim);
  --accent-text: var(--kilim-text); /* for accent-coloured small text */
  --focus: var(--kilim);

  /* --- type ---------------------------------------------------------- */
  /*
    Editorial pairing: a high-contrast display serif against a warm geometric
    sans. The serif carries the premium-property register; the sans carries
    every piece of interface text, where legibility matters more than
    character.
  */
  --f-display: 'DM Serif Display', 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
  --f-body: 'Manrope', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  /* No third typeface: figures use the body face with tabular numerals. */
  --f-mono: var(--f-body);

  /*
    Fluid scale, sized for a 55-75+ Norwegian readership.

    Two rules drive the numbers:
      - body copy never drops below 17px, and sits at 18px on desktop. The
        previous 16px floor is the single most common readability complaint
        from this age group.
      - supporting text (card copy, captions, descriptions) is 17px, not a
        smaller tier: on this site it carries most of the actual content, so a
        "small" size meant most of the reading happened below the brief.
        Labels, badges and button text are the only 15px type.
  */
  --t-h1: clamp(2.15rem, 4.6vw, 3.9rem);
  --t-h2: clamp(1.8rem, 3.3vw, 2.85rem);
  --t-h3: clamp(1.3rem, 2vw, 1.65rem);
  --t-h4: clamp(1.12rem, 1.4vw, 1.28rem);
  --t-lead: clamp(1.125rem, 1.5vw, 1.3rem);
  --t-body: clamp(1.0625rem, 0.5vw + 0.95rem, 1.125rem); /* 17px -> 18px */
  --t-small: 1.0625rem; /* 17px — supporting text */
  --t-micro: 0.9375rem; /* 15px — labels, badges, meta */

  /* The display serif wants tighter leading than the previous face. */
  --lh-heading: 1.08;
  --lh-body: 1.66;
  --ls-display: -0.02em;
  --ls-label: 0.08em;

  /*
    Touch targets. The brief asks for 48px minimum; anything interactive is
    set from this token so it cannot drift below it.
  */
  --tap-min: 48px;
  --btn-pad-y: 1rem;
  --btn-pad-x: 1.75rem;

  /* --- space --------------------------------------------------------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --gutter: clamp(1.15rem, 5vw, 4rem);
  --maxw: 1280px;
  --measure: 62ch;

  /* --- form ---------------------------------------------------------- */
  --r: 2px; /* the house radius. barely there. */
  --r-lg: 3px;
  --bw: 1.5px;
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 0 1px 2px rgba(18, 35, 58, 0.06), 0 12px 32px -12px rgba(18, 35, 58, 0.18);
  --shadow-lift: 0 2px 4px rgba(18, 35, 58, 0.07), 0 26px 54px -18px rgba(18, 35, 58, 0.26);

  /* --- motion -------------------------------------------------------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-mid: 340ms;
  --d-slow: 620ms;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* clip (unlike hidden) does not create a scroll container, so the sticky
     header keeps working while decorative bleed can never widen the page */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Author display rules (the empty state sets display: grid, for one) beat the
   browser's own [hidden] style, so hidden elements stayed visible. */
[hidden] {
  display: none !important;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--accent-text);
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* visible, on-brand focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r);
}

::selection {
  background: var(--kilim);
  color: var(--beyaz);
}

/* --------------------------------------------------------------------------
   3. ATMOSPHERE — grain + çini
   -------------------------------------------------------------------------- */

/* Film grain. Keeps large flat areas from feeling like flat design. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The çini tile — an 8-point star inside a lattice, drawn as data URI.
   Used as a repeating background at several opacities. */
.cini {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2312233a' stroke-width='1.1'%3E%3Cpath d='M60 6 74 26 98 22 94 46 114 60 94 74 98 98 74 94 60 114 46 94 22 98 26 74 6 60 26 46 22 22 46 26Z'/%3E%3Cpath d='M60 30 66 54 90 60 66 66 60 90 54 66 30 60 54 54Z'/%3E%3Ccircle cx='60' cy='60' r='7'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='120' cy='0' r='7'/%3E%3Ccircle cx='0' cy='120' r='7'/%3E%3Ccircle cx='120' cy='120' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 900px;
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--ink {
  background: var(--ink);
  color: var(--kalk);
}

.section--kalk2 {
  background: var(--kalk-2);
}

.section--sea {
  background: var(--sea);
  color: var(--kalk);
}

/* çini edge: a hairline band of tile between sections */
.cini-edge {
  height: 72px;
  background-size: 72px 72px;
  opacity: 0.32;
  border-block: var(--bw) solid var(--line);
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display,
h1,
h2,
h3 {
  font-family: var(--f-display);
  /*
    DM Serif Display has one weight by design. Its stroke contrast is far
    lower than the didone it replaces, so it reads solid at large sizes
    without needing a heavier cut - the reason it was chosen here.
  */
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: inherit;
  text-wrap: balance;
}

h4,
h5,
h6 {
  font-family: var(--f-body);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: inherit;
}

.hero-type {
  font-family: var(--f-display);
  /*
    Sized for the column it now sits in, not the viewport.

    The old scale reached 96px, which suited a full-width headline. In a
    half-width column that either wraps to four lines or overflows, so the
    scale is capped lower and allowed to breathe with the column width.
  */
  font-size: clamp(2.5rem, 2.6vw + 1.4rem, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 400;
}

.h1 {
  font-size: var(--t-h1);
}

.h2 {
  font-size: var(--t-h2);
}

.h3 {
  font-size: var(--t-h3);
  line-height: 1.2;
}

.h4 {
  font-size: var(--t-h4);
}

/* The italic serif fragment used inside headings for warmth */
.fancy {
  font-style: italic;
  font-weight: 500;
  /* Large display type: the brand terracotta clears 3:1 at this size. */
  color: var(--kilim);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--text-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose p {
  max-width: var(--measure);
  color: var(--text-soft);
  text-wrap: pretty;
}

.prose p + p {
  margin-top: var(--s4);
}

.prose strong {
  color: var(--ink);
  font-weight: 650;
}

/* Letterspaced small-caps label — used constantly for section eyebrows */
.label {
  font-family: var(--f-body);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  /* --accent-text, not --accent: this is 11px uppercase, which needs 4.5:1. */
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  line-height: 1;
}

.label--mute {
  color: var(--text-mute);
}

/* On the navy bands the accent must go lighter, not darker. */
.label--kalk {
  color: var(--kilim-bright);
}

/* the small rule that often precedes a label */
.label::before {
  content: '';
  width: 26px;
  height: var(--bw);
  background: currentColor;
  flex: none;
}

.label--bare::before {
  display: none;
}

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--text-mute);
}

.small {
  font-size: var(--t-small);
}

/* Section header block: eyebrow, title, optional lead */
.sec-head {
  display: grid;
  gap: var(--s4);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  max-width: 46rem;
}

.sec-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--s5);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 56.25em) {
  /*
    A split section header reads better as two blocks side by side:
    the heading block (eyebrow above title) on the left, and the supporting
    lead paragraph on the right. The eyebrow and title live in the same div,
    so they are placed explicitly and the lead is pinned to column 2, row 1.
    Without the explicit rows the lead would drop into an implicit row and a
    bottom-aligned column would ride up into the heading's line box.
  */
  .sec-head--split {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: var(--s4);
  }

  .sec-head--split > .label,
  .sec-head--split > h2 {
    grid-column: 1;
  }

  .sec-head--split > .label {
    grid-row: 1;
  }

  .sec-head--split > h2 {
    grid-row: 2;
  }

  .sec-head--split > .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 46ch;
  }

  /* A lead that is the only child in its column should start at the top. */
  .sec-head--split > .lead:only-child {
    grid-row: 1;
  }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  /*
    One filled colour per job. WhatsApp green (.btn--wa) is the primary action
    everywhere, because every flow on this site ends in a WhatsApp chat. The
    plain .btn is navy for the few filled actions that are not a chat (admin
    save, login); public pages use .btn--ghost or .btn--quiet for everything
    else, so a page never offers two competing "loud" buttons.
  */
  --btn-bg: var(--ink);
  --btn-fg: var(--beyaz);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  /* 48px floor from --tap-min, so no button can fall below a comfortable
     touch target for an older user. */
  min-height: var(--tap-min);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--btn-bd);
  border-radius: var(--r);
  font-family: var(--f-body);
  font-size: 0.9375rem; /* 15px, uppercase */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition:
    background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}

/* Flat, like the rest of the system: hover deepens the fill, nothing jumps. */
.btn:hover {
  color: var(--btn-fg);
  --btn-bg: #0e2236;
  --btn-bd: #0e2236;
}

.btn:active {
  filter: brightness(0.92);
}

.btn--lg {
  min-height: 56px;
  padding: 1.15rem 2.1rem;
  font-size: 1rem;
}

.btn--wide {
  width: 100%;
}

/* The primary action: WhatsApp. */
.btn--wa {
  /* Deepened from #1f8a4c: white on that green measured 4.4:1. Still
     unmistakably WhatsApp green. 5.8:1 with white. */
  --btn-bg: #177440;
  --btn-bd: #177440;
}

.btn--wa:hover {
  --btn-bg: #0f5f33;
  --btn-bd: #0f5f33;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
}

.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--kalk);
}

.btn--light {
  --btn-bg: var(--kalk);
  --btn-fg: var(--ink);
  --btn-bd: var(--kalk);
}

/* Without its own hover the base rule would turn it navy-on-navy. */
.btn--light:hover {
  --btn-bg: var(--beyaz);
  --btn-bd: var(--beyaz);
}

.btn--kalkline {
  --btn-bg: transparent;
  --btn-fg: var(--kalk);
  --btn-bd: rgba(247, 245, 240, 0.45);
}

.btn--kalkline:hover {
  --btn-bg: var(--kalk);
  --btn-fg: var(--ink);
  --btn-bd: var(--kalk);
}

.btn--sm {
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  font-size: 0.875rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
}

/* inline text link with an animated underscore */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  /* Inline links still need a comfortable target for an older reader. */
  min-height: 44px;
  color: var(--sea);
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
  border-bottom: var(--bw) solid currentColor;
  padding-bottom: 1px;
  transition: color var(--d-fast) var(--e-out), gap var(--d-fast) var(--e-out);
}

.tlink:hover {
  color: var(--accent-text);
  gap: var(--s3);
}

.tlink::after {
  content: '→';
  transition: transform var(--d-fast) var(--e-out);
}

.tlink:hover::after {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   6b. EDITORIAL COMPOSITIONS
   --------------------------------------------------------------------------
   The brief called for large architectural photography. Until real photos
   exist, these generated compositions stand in - and they must look
   deliberate rather than like a missing image.

   Each one layers three things:
     - a quiet çini tile at low opacity (the brand signature)
     - an architectural line grid, suggesting structure and windows
     - a soft directional light gradient, warm ivory into navy or terracotta

   They are pure CSS: no image requests, no layout shift, and an <img> can
   replace any of them later by swapping one class for a real photo.
   -------------------------------------------------------------------------- */

.comp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Layered rather than a single flat gradient, so the plane has depth the
     way a photograph of a building does. */
  background:
    radial-gradient(ellipse 70% 52% at 76% 8%, rgba(79, 113, 133, 0.4), transparent 66%),
    linear-gradient(158deg, #22445f 0%, var(--ink) 46%, #0b1a2b 100%);
}

/* çini, kept quiet so it reads as texture rather than pattern */
.comp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f7f5f0' stroke-width='1'%3E%3Cpath d='M60 6 74 26 98 22 94 46 114 60 94 74 98 98 74 94 60 114 46 94 22 98 26 74 6 60 26 46 22 22 46 26Z'/%3E%3Cpath d='M60 30 66 54 90 60 66 66 60 90 54 66 30 60 54 54Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 92px 92px;
  opacity: 0.1;
  mix-blend-mode: screen;
}

/* architectural grid: tall vertical bays with a single floor line */
.comp::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(to right, rgba(247, 245, 240, 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 245, 240, 0.08) 1px, transparent 1px);
  background-size: 96px 100%, 100% 128px;
  mask-image: linear-gradient(200deg, #000 8%, rgba(0, 0, 0, 0.25) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(200deg, #000 8%, rgba(0, 0, 0, 0.25) 62%, transparent 100%);
}

/* the light itself: a warm highlight from the upper left */
.comp__light {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 58% 46% at 18% 4%, rgba(247, 245, 240, 0.32), transparent 64%),
    radial-gradient(ellipse 46% 40% at 96% 98%, rgba(200, 107, 74, 0.2), transparent 68%);
  pointer-events: none;
}

/*
  The accent. The brief allows terracotta only about 5% of the surface, so this
  is a narrow vertical plane - a sunlit wall edge - rather than a large shape.
  An earlier version used a broad rotated rectangle, which read as a flat blob
  instead of architecture and blew the colour ratio.
*/
.comp--accent .comp__light::after {
  content: '';
  position: absolute;
  right: 14%;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 5vw, 4.5rem);
  background: linear-gradient(
    to bottom,
    rgba(200, 107, 74, 0.55),
    rgba(200, 107, 74, 0.22) 58%,
    rgba(200, 107, 74, 0) 100%
  );
  transform: skewX(-10deg);
}

/* A second, warmer sliver for depth. Together the two read as light falling
   across a facade rather than as decoration. */
.comp--accent .comp__light::before {
  content: '';
  position: absolute;
  right: 6%;
  top: 12%;
  bottom: 26%;
  width: clamp(0.75rem, 1.6vw, 1.4rem);
  background: linear-gradient(
    to bottom,
    rgba(247, 245, 240, 0.3),
    rgba(247, 245, 240, 0.04)
  );
  transform: skewX(-10deg);
}

/* warmer variant for the "life in Alanya" register */
.comp--warm {
  background: linear-gradient(158deg, #d98a63 0%, var(--kilim) 46%, #8e3f24 100%);
}

.comp--warm::after {
  background-size: 120px 100%, 100% 148px;
}

/* pale variant, for sections that must stay light and airy */
.comp--pale {
  background: linear-gradient(158deg, #fbf9f5 0%, var(--kalk-2) 55%, var(--sand) 100%);
}

.comp--pale::before {
  mix-blend-mode: multiply;
  opacity: 0.16;
}

.comp--pale::after {
  background-image:
    linear-gradient(to right, rgba(23, 50, 77, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 50, 77, 0.06) 1px, transparent 1px);
}

.comp--pale .comp__light {
  background:
    radial-gradient(ellipse 56% 44% at 16% 6%, rgba(255, 255, 255, 0.95), transparent 62%),
    /* A pool of shade in the lower right, so the plane has depth rather than
       reading as an empty frame. */
    radial-gradient(ellipse 62% 50% at 88% 94%, rgba(23, 50, 77, 0.16), transparent 70%);
}

/*
  A window reveal: one large pale rectangle with a hard shadow, set off-axis.
  This is the geometric move that makes the pale plane read as architecture
  instead of a blank placeholder.
*/
.comp--pale .comp__caption::after {
  content: '';
  position: absolute;
  right: clamp(-9rem, -8vw, -4rem);
  bottom: clamp(2rem, 6vw, 5rem);
  width: clamp(5rem, 14vw, 11rem);
  height: clamp(7rem, 20vw, 15rem);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(216, 208, 196, 0.5));
  box-shadow:
    -10px 12px 0 rgba(23, 50, 77, 0.07),
    -22px 26px 0 rgba(23, 50, 77, 0.04);
}

/* sage wash, used sparingly per the palette ratio */
.comp--sage {
  background: linear-gradient(158deg, #c3cfbf 0%, var(--sage) 48%, #7d8f79 100%);
}

.comp--sage::after {
  background-size: 132px 100%, 100% 160px;
}

/* A caption that sits on the composition, bottom-left, the way a magazine
   credits a photograph. */
.comp__caption {
  position: absolute;
  z-index: 4;
  left: clamp(1.25rem, 3vw, 2.25rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /*
    A caption sits on either a navy or a terracotta composition. Rather than
    pick a text colour that survives both - none does at 13px - it carries its
    own ground: a soft navy scrim that guarantees contrast regardless of what
    is behind it. Same approach a magazine uses for a photo credit.
  */
  color: var(--kalk);
  padding: 0.5em 0.85em;
  background: rgba(11, 26, 43, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 2px;
}

/* On the pale composition the scrim would be the loudest thing on screen, so
   that variant goes dark-on-light with no plate at all. */
.comp--pale .comp__caption {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink);
  padding-left: 0;
}

.comp__caption::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   6c. GENERATED TILE (fallback imagery)
   --------------------------------------------------------------------------
   Used wherever a photograph would sit: property cards, the admin table
   thumbnails and the image previews in the listing form.

   display:block is deliberate. This class is applied to <span> in the admin
   panel, and an inline span ignores width/height, so the element silently
   painted nothing at all - a defect that is invisible in the markup and only
   shows up on screen.
   -------------------------------------------------------------------------- */
.tile {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, var(--ink) 0%, #16293f 55%, #0b1728 100%);
}

.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f7f5f0' stroke-width='1.1'%3E%3Cpath d='M60 6 74 26 98 22 94 46 114 60 94 74 98 98 74 94 60 114 46 94 22 98 26 74 6 60 26 46 22 22 46 26Z'/%3E%3Cpath d='M60 30 66 54 90 60 66 66 60 90 54 66 30 60 54 54Z'/%3E%3Ccircle cx='60' cy='60' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 86px 86px;
  opacity: 0.34;
  mix-blend-mode: overlay;
}

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 28% 18%, rgba(247, 245, 240, 0.2), transparent 62%);
}

.tile--warm {
  background: linear-gradient(150deg, var(--kilim) 0%, #8e3f24 60%, #4a1a0c 100%);
}

.tile--sand {
  background: linear-gradient(150deg, var(--sand) 0%, #a8926d 55%, var(--ink) 100%);
}

.tile--sea {
  background: linear-gradient(150deg, var(--sea-2) 0%, var(--sea) 50%, #0e3a4a 100%);
}

.tile--altin {
  background: linear-gradient(150deg, var(--altin) 0%, #7d5a17 55%, #2c2008 100%);
}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(247, 245, 240, 0.9);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out);
}

.site-header[data-stuck='true'] {
  border-bottom-color: var(--line);
  background: rgba(247, 245, 240, 0.97);
}

/* thin progress bar showing scroll position */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1.5px;
  height: var(--bw);
  background: var(--kilim);
  width: 0%;
  transition: width 80ms linear;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 84px;
}

/* --- logo: keyhole mark + wordmark --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--kilim);
  transition: transform var(--d-mid) var(--e-out);
}

.brand:hover .brand__mark {
  transform: rotate(-14deg);
}

.brand__word {
  font-family: var(--f-display);
  font-size: 1.4rem;
  white-space: nowrap;
  font-weight: 650;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 28;
  letter-spacing: -0.015em;
  line-height: 1;
}

.brand__word i {
  font-style: italic;
  font-weight: 400;
}

.brand__sub {
  display: block;
  font-family: var(--f-body);
  font-size: 0.75rem; /* was 9.4px, below any legible minimum */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-top: 3px;
}

/* --- desktop nav --- */
.nav {
  display: none;
  align-items: center;
  gap: var(--s1);
}

@media (min-width: 65em) {
  .nav {
    display: flex;
  }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6em 0.75em;
  /* 16px, up from 15px: the brief asks for navigation at 16px+ for this
     readership. */
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r);
  position: relative;
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0.7em;
  right: 0.7em;
  bottom: 0.32em;
  height: var(--bw);
  background: var(--kilim);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--e-out);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.nav__caret {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform var(--d-fast) var(--e-out);
}

.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret {
  transform: rotate(180deg);
}

/* --- mega dropdown --- */
.nav__item {
  position: relative;
}

.mega {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  translate: -50% 0;
  width: min(760px, 92vw);
  background: var(--beyaz);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--s6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--d-fast) var(--e-out),
    transform var(--d-fast) var(--e-out),
    visibility var(--d-fast);
}

.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.mega__col-title {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-mute);
  padding-bottom: var(--s3);
  border-bottom: var(--bw) solid var(--line-soft);
  margin-bottom: var(--s3);
}

.mega__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5em 0;
  font-size: var(--t-small);
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out), padding-left var(--d-fast) var(--e-out);
}

.mega__link:hover {
  color: var(--kilim);
  padding-left: 0.35em;
}

.mega__foot {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--bw) solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* --- header actions --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  min-width: 0;
}

/* On narrow phones the burger plus the floating WhatsApp button are enough.
   Keeping a third action here forced the header wider than the viewport. */
@media (max-width: 26.875em) {
  .header-wa {
    display: none;
  }
}

.header-phone {
  display: none;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 80em) {
  .header-phone {
    display: block;
  }
}

/* --- language switcher --- */
.langswitch {
  display: inline-flex;
  align-items: center;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  flex: none;
  background: transparent;
}

.langswitch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 44px;
  padding: 0.5em 0.6em;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.langswitch__opt + .langswitch__opt {
  border-left: var(--bw) solid var(--ink);
}

.langswitch__opt:hover {
  background: var(--kilim);
  color: var(--beyaz);
}

/* the current edition reads as a filled tab, not a link */
.langswitch__opt[aria-current='true'] {
  background: var(--ink);
  color: var(--kalk);
  cursor: default;
  pointer-events: none;
}

/* On the dark drawer footer the switcher must invert to stay legible. */
.drawer__foot .langswitch {
  border-color: rgba(247, 245, 240, 0.45);
}

.drawer__foot .langswitch__opt {
  color: var(--kalk);
}

.drawer__foot .langswitch__opt + .langswitch__opt {
  border-left-color: rgba(247, 245, 240, 0.45);
}

.drawer__foot .langswitch__opt[aria-current='true'] {
  background: var(--kalk);
  color: var(--ink);
}

/* The site footer sits on the dark ink background too. */
.site-footer .langswitch {
  border-color: rgba(247, 245, 240, 0.4);
}

.site-footer .langswitch__opt {
  color: var(--kalk);
}

.site-footer .langswitch__opt + .langswitch__opt {
  border-left-color: rgba(247, 245, 240, 0.4);
}

.site-footer .langswitch__opt:hover {
  background: var(--kilim);
  color: var(--beyaz);
}

.site-footer .langswitch__opt[aria-current='true'] {
  background: var(--kalk);
  color: var(--ink);
}

/* Drawer footer row that pairs the label with the switcher. */
.drawer__langrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  margin-bottom: var(--s5);
}

/* The footer copy of the switcher sits under the brand, so give it air. */
.site-footer .langswitch {
  margin-top: var(--s2);
}

/* --- burger --- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: transparent;
}

@media (min-width: 65em) {
  .burger {
    display: none;
  }
}

.burger span {
  display: block;
  height: 1.8px;
  background: var(--ink);
  transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast);
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(5.8px) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-5.8px) rotate(-45deg);
}

/* --- mobile drawer --- */
.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  z-index: 490;
  background: var(--kalk);
  padding-top: 74px;
  display: grid;
  grid-template-rows: 1fr auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-out), visibility var(--d-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer[data-open='true'] {
  transform: translateY(0);
  visibility: visible;
}

.drawer__body {
  padding: var(--s6) var(--gutter) var(--s7);
}

.drawer__group + .drawer__group {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--bw) solid var(--line-soft);
}

.drawer__title {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--kilim);
  margin-bottom: var(--s4);
}

.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0.62em 0;
  font-family: var(--f-display);
  font-size: 1.38rem;
  font-weight: 600;
  font-variation-settings: 'SOFT' var(--display-soft), 'WONK' var(--display-wonk),
    'opsz' 32;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--bw) solid var(--line-soft);
  transition: color var(--d-fast) var(--e-out), padding-left var(--d-fast) var(--e-out);
}

.drawer__link:hover {
  color: var(--kilim);
  padding-left: 0.4em;
}

.drawer__link small {
  font-family: var(--f-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.drawer__foot {
  padding: var(--s5) var(--gutter) var(--s7);
  background: var(--ink);
  color: var(--kalk);
}

/* --------------------------------------------------------------------------
   8. HERO — editorial cover
   --------------------------------------------------------------------------
   Composition, not a card stack: one large image plane, the headline set
   beneath it on the ivory ground, and a single action. No paragraph sits on
   top of the image, which is what keeps it reading as a magazine cover
   rather than a marketing banner.

   On desktop the text block lifts to overlap the image's lower-left corner -
   the asymmetric move the brief asks for.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--bg);
  padding-block: clamp(1rem, 2.4vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* portrait on phones, like a cover */
}

@media (max-width: 48.6875em) {
  .comp--accent .comp__light::after {
    right: 6%;
    width: clamp(0.75rem, 3vw, 1.25rem);
  }

  .comp--accent .comp__light::before {
    display: none;
  }
}

/*
  At desktop the plate becomes portrait (4/5) and stands beside the text rather
  than above it. A portrait photograph next to a deep text block gives the hero
  a composed, editorial proportion; a 21/9 banner above two lines of copy did
  not, because the two halves were wildly different shapes.
*/
@media (min-width: 62.5em) {
  .hero__cover {
    aspect-ratio: 4 / 5;
  }
}

/* Mobile-first: cover above, text below. The desktop row is set in the
   min-width: 1000px block further down. */
.hero__layout {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.25rem);
}

.hero__cover-wrap {
  min-width: 0;
}

@media (min-width: 62.5em) {
  /*
    The overlap, and the reason it changed.

    A matched 4/5 image against a 21/9 image is what makes this work: at 5/6
    the text plate runs deep, so the full-width fact row below it sits under
    the whole photo. At 21/9 the plate was barely two lines tall, leaving a
    large dead band beside it - the photograph was wide and the words were
    short, and no amount of column tweaking fixes that.

    The text is one full-width block. Facts are a row beneath it rather than a
    second column, which is what removes the gap in the middle-right.
  */
  .hero__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: end;
    gap: clamp(2.5rem, 5vw, 5rem);
    margin-top: clamp(-5rem, -6vw, -2.5rem);
    position: relative;
    z-index: 5;
  }

  .hero__panel {
    padding: 0;
  }

  .hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4) var(--s6);
    margin-top: clamp(2rem, 3.5vw, 3rem);
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    /* Spans both columns: a full-width band under the text and the photo. */
    grid-column: 1 / -1;
  }

  .hero__count {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  }
}

.hero__copy {
  display: grid;
  /*
    No uniform gap. A single gap value is wrong next to display type: at ~96px
    with line-height 0.98 the glyphs sit inside a much taller line box, so a
    22px gap reads as roughly 34px on screen and the headline looks detached
    from its lead. Spacing is set per relationship instead.
  */
  gap: 0;
  justify-items: start;
}

.hero__copy .label {
  margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem);
}

/* Two classes, not one: .hero__type is also the <h1>, and the base
   .hero__type rule later in the file was overriding a single-class selector. */
.hero__copy .hero__type {
  margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
}

.hero__lead {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.hero__type {
  /*
    No character limit.

    A ch-based max-width looks controlled in one language and ragged in
    another: 12ch flattered the Norwegian "Du eier i / Alanya. Vi tar / oss av
    resten." but broke the English into "You own in / Alanya. We / take care /
    of the rest.", because the words are longer while the character count is
    similar. The column width now comes from the layout, and the line breaks
    come from clauses (see the markup), so both editions break at the same
    meaningful points.
  */
  max-width: none;
  margin: 0;
  text-wrap: balance;
}

.hero__type-a,
.hero__type-b {
  display: block;
}

.hero__type-b {
  font-style: italic;
  color: var(--kilim);
}

/*
  No white-space: nowrap here. It was tried and it overflowed the viewport:
  in a half-width column a display headline simply cannot fit on one line, so
  forcing it produced text running off the right edge. The break between
  clauses is structural (separate blocks) and each clause wraps inside its
  column, which is the safe combination.
*/

.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--text-soft);
  max-width: 40ch;
  text-wrap: pretty;
}

/* Supporting facts, set as a quiet two-column list rather than pill chips. */
.hero__facts {
  display: grid;
  gap: var(--s3) var(--s5);
  width: 100%;
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-small);
}

@media (min-width: 35em) {
  .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero__facts li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s3);
  align-items: start;
  color: var(--text-soft);
  line-height: 1.5;
}

.hero__facts svg {
  width: 17px;
  height: 17px;
  color: var(--sea);
  margin-top: 0.22em;
  flex: none;
}

/* The single action, plus a quiet secondary. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  margin-top: var(--s3);
}

@media (max-width: 30em) {
  .hero__actions {
    width: 100%;
  }

  .hero__actions > * {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   9. COVERAGE LINE (was a scrolling marquee)
   -------------------------------------------------------------------------- */
.coverage {
  background: var(--ink);
  color: rgba(247, 245, 240, 0.88);
  padding-block: 1rem;
  font-size: var(--t-small);
}

.coverage p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
}

.coverage strong {
  color: var(--kalk);
  font-weight: 700;
  margin-right: 0.35rem;
}

.coverage [aria-hidden] {
  color: var(--kilim-2);
}

/* --------------------------------------------------------------------------
   10. SERVICE LEDGER (the signature list)
   --------------------------------------------------------------------------
   Explicit grid, not nesting: the icon, title and description must be
   independent grid items so that on phones the row can collapse to a compact
   three-column layout. Nesting the description inside the title container made
   the row's height depend on whichever cell was tallest, which opened huge
   gaps on narrow screens.
   -------------------------------------------------------------------------- */
.ledger {
  border-top: var(--bw) solid var(--line);
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'title'
    'desc';
  align-items: center;
  column-gap: var(--s4);
  row-gap: var(--s3);
  padding: clamp(1.25rem, 2.4vw, 1.85rem) 0;
  border-bottom: var(--bw) solid var(--line-soft);
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: background-color var(--d-mid) var(--e-out), padding-inline var(--d-mid) var(--e-out);
}

/* Tablet and up: add the icon column and let the description sit alongside. */
@media (min-width: 38.75em) {
  .ledger__row {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas:
      'icon title'
      'icon desc';
    column-gap: var(--s4);
    row-gap: var(--s2);
  }
}

/* Desktop: a single row with the arrow at the far right. */
@media (min-width: 56.25em) {
  .ledger__row {
    grid-template-columns: 3rem minmax(0, 1.3fr) minmax(0, 1fr) 2.5rem;
    grid-template-areas: 'icon title desc go';
    column-gap: var(--s5);
    row-gap: 0;
    align-items: center;
  }
}

/* The terracotta curtain that slides in on hover. */
.ledger__row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--kilim);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--e-out);
  z-index: -1;
}

.ledger__row:hover::before {
  transform: scaleX(1);
}

.ledger__row:hover {
  color: var(--beyaz);
  padding-inline: clamp(0.75rem, 1.6vw, 1.25rem);
}

.ledger__row:hover .ledger__num,
.ledger__row:hover .ledger__desc {
  color: rgba(255, 253, 248, 0.85);
}

.ledger__row:hover .ledger__icon {
  color: var(--beyaz);
  border-color: rgba(255, 253, 248, 0.55);
}

.ledger__row:hover .ledger__title small {
  color: rgba(255, 253, 248, 0.72);
}

.ledger__num {
  grid-area: num;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  min-width: 0;
  transition: color var(--d-mid) var(--e-out);
  align-self: center;
}

.ledger__icon {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--line-soft);
  border-radius: var(--r);
  color: var(--sea);
  align-self: center;
  transition: color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
}

.ledger__icon svg {
  width: 21px;
  height: 21px;
}

/* Below the tablet breakpoint the row is a compact two-column layout and the
   icon has no column of its own, so it is hidden rather than orphaned onto a
   row of its own. The number and title carry the row identity there. */
@media (max-width: 38.6875em) {
  .ledger__icon {
    display: none;
  }
}

.ledger__title {
  grid-area: title;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' var(--display-soft), 'WONK' var(--display-wonk),
    'opsz' 48;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: inherit;
  min-width: 0;
  overflow-wrap: break-word;
}

.ledger__title small {
  display: block;
  font-family: var(--f-body);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-mute);
  margin-top: 0.4em;
  transition: color var(--d-mid) var(--e-out);
}

.ledger__desc {
  grid-area: desc;
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: 1.6;
  max-width: 44ch;
  min-width: 0;
  overflow-wrap: break-word;
  transition: color var(--d-mid) var(--e-out);
}

.ledger__go {
  grid-area: go;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--beyaz);
  color: var(--kilim);
  align-self: center;
  transition: transform var(--d-mid) var(--e-out);
}

@media (min-width: 56.25em) {
  .ledger__go {
    display: grid;
  }
}

.ledger__go svg {
  width: 17px;
  height: 17px;
}

.ledger__row:hover .ledger__go {
  transform: translateX(5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.85rem);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62.5em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  display: grid;
  gap: var(--s4);
  align-content: start;
  position: relative;
  transition:
    transform var(--d-mid) var(--e-out),
    box-shadow var(--d-mid) var(--e-out);
}

.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hard-sm);
}

.card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  color: var(--kilim);
  background: var(--kalk);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card__num {
  position: absolute;
  top: clamp(1.35rem, 2.2vw, 1.85rem);
  right: clamp(1.35rem, 2.2vw, 1.85rem);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  color: var(--text-mute);
}

.card h3 {
  font-size: var(--t-h3);
}

.card p {
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: 1.62;
}

/* --- feature bullet list with sea-coloured markers --- */
.ticks {
  display: grid;
  gap: var(--s3);
}

.ticks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s3);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-soft);
}

.ticks svg {
  width: 16px;
  height: 16px;
  margin-top: 0.34em;
  color: var(--sea);
  flex: none;
}

.ticks strong {
  color: var(--ink);
  font-weight: 650;
}

/* --- detail rows: title over description --- */
.deets {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 45em) {
  .deets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s6);
  }
}

.deet {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: var(--bw) solid var(--line-soft);
}

.deet h4 {
  font-size: var(--t-h4);
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.deet h4 svg {
  width: 18px;
  height: 18px;
  color: var(--sea);
  flex: none;
  translate: 0 2px;
}

.deet p {
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   12. PROPERTY CARDS
   -------------------------------------------------------------------------- */
/*
  Property card, restyled to the editorial brief: minimal decoration, no
  heavy border, no offset shadow. The image is the object; the metadata sits
  under it on plain white with generous padding, and the price is the largest
  thing in the block. Hover lifts the image rather than the whole card.
*/
.prop {
  background: var(--surface);
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: box-shadow var(--d-mid) var(--e-out);
}

.prop:hover {
  box-shadow: 0 18px 44px -22px rgba(23, 50, 77, 0.42);
}

.prop__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 0;
}

.prop__media .tile {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  transition: transform var(--d-slow) var(--e-out);
}

.prop:hover .prop__media .tile {
  transform: scale(1.05);
}

.prop__badges {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  z-index: 2;
}

.badge {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.42em 0.68em;
  border-radius: var(--r);
  background: var(--beyaz);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  line-height: 1;
}

.badge--salg {
  /* White on the brand terracotta is 3.7:1. The darker tint clears 4.5:1
     while staying the same terracotta hue. */
  background: var(--kilim-text);
  color: var(--beyaz);
  border-color: var(--kilim-text);
}

.badge--solgt {
  background: var(--ink);
  color: var(--kalk);
  border-color: var(--ink);
}

.badge--kommende {
  background: var(--altin);
  color: var(--beyaz);
  border-color: var(--altin);
}

.badge--ref {
  /*
    Solid navy, and the text is the off-white token. Previously this used a
    translucent navy with 82% alpha, which after the palette change composited
    to nearly the same colour as the text sitting on it: contrast measured
    1.09:1, i.e. invisible. Reference codes matter on a listing card, so this
    is now opaque and unambiguous.
  */
  background: var(--ink);
  color: var(--kalk);
  border-color: var(--ink);
  backdrop-filter: blur(4px);
}

.prop__body {
  /* Extra room beneath, per the brief's card spec. */
  padding: clamp(1.25rem, 2vw, 1.6rem) clamp(0.25rem, 0.5vw, 0.4rem) clamp(1.5rem, 2.4vw, 2rem);
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.prop__area {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent-text); /* 11px uppercase needs the AA-safe tint */
}

.prop__area svg {
  width: 13px;
  height: 13px;
}

.prop__title {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.prop__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-block: var(--s3);
  border-block: 1px solid var(--line-soft);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text-soft);
}

.prop__facts li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.prop__facts svg {
  width: 14px;
  height: 14px;
  color: var(--sea);
  flex: none;
}

.prop__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.prop__price b {
  font-family: var(--f-display);
  /* The price is the first thing a buyer looks for. */
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.prop__price span {
  font-size: var(--t-micro);
  /* not uppercase: that turns the unit m² into M² */
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prop__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.tag {
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 0.34em 0.6em;
  background: var(--kalk-2);
  color: var(--ink-2);
  border-radius: 2px;
  line-height: 1.4;
}

.prop--sold .tile {
  filter: grayscale(0.85) brightness(0.72);
}

/* --------------------------------------------------------------------------
   13. FILTER BAR
   -------------------------------------------------------------------------- */
.filters {
  display: grid;
  gap: var(--s4);
  padding: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--s6);
}

@media (min-width: 48.75em) {
  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

.field {
  display: grid;
  gap: var(--s2);
  min-width: 0;
  /* stretched by its row, it would otherwise share the extra height out
     between label and input, making inputs in one row different heights */
  align-content: start;
}

/* Sentence case at reading size: a form label is something to read, not an
   eyebrow, and uppercase tracking is the hardest text to read at 70. */
.field > label {
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72em 0.8em;
  background: var(--kalk);
  border: var(--bw) solid var(--line-soft);
  border-radius: var(--r);
  font-size: var(--t-small);
  font-weight: 550;
  color: var(--ink);
  appearance: none;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2312233a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 11px;
  padding-right: 2.1em;
  cursor: pointer;
}

.field input:hover,
.field select:hover {
  border-color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--kilim);
  background: var(--beyaz);
}

/* result count + reset */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: var(--bw) solid var(--line-soft);
}

.results-bar p {
  font-size: var(--t-small);
  color: var(--text-soft);
}

.results-bar b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  padding: clamp(2.5rem, 5vw, 4rem) var(--s5);
  text-align: center;
  border: var(--bw) dashed var(--line-soft);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--s4);
  justify-items: center;
  background: var(--surface);
}

.empty-state svg {
  width: 40px;
  height: 40px;
  color: var(--sea);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   14. STEPS / PROCESS
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  border-top: var(--bw) solid var(--line);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4) var(--s5);
  padding-block: clamp(1.15rem, 2.2vw, 1.6rem);
  border-bottom: var(--bw) solid var(--line-soft);
  align-items: baseline;
}

@media (min-width: 47.5em) {
  .step {
    grid-template-columns: 4.5rem minmax(0, 0.85fr) minmax(0, 1.3fr);
    align-items: center;
  }
}

.step::before {
  content: '0' counter(step);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  color: var(--kilim);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.step h4 {
  font-size: var(--t-h4);
}

.step p {
  font-size: var(--t-small);
  color: var(--text-soft);
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq {
  border-top: var(--bw) solid var(--line);
}

.faq__item {
  border-bottom: var(--bw) solid var(--line-soft);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: clamp(1.05rem, 2vw, 1.4rem) 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' var(--display-soft), 'WONK' var(--display-wonk),
    'opsz' 24;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--d-fast) var(--e-out);
}

.faq__q:hover {
  color: var(--kilim);
}

.faq__mark {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 0.22em;
}

.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast) var(--e-out);
}

.faq__mark::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--bw);
  translate: 0 -50%;
}

.faq__mark::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: var(--bw);
  translate: -50% 0;
}

.faq__item[data-open='true'] .faq__mark::after {
  transform: scaleY(0);
  opacity: 0;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-mid) var(--e-out);
}

.faq__item[data-open='true'] .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  padding-bottom: clamp(1.05rem, 2vw, 1.5rem);
  max-width: var(--measure);
  font-size: var(--t-small);
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   16. NOTICE / CALLOUT
   -------------------------------------------------------------------------- */
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  padding: clamp(1.05rem, 2vw, 1.4rem);
  background: var(--kilim-pale);
  border: var(--bw) solid var(--kilim);
  border-radius: var(--r-lg);
  align-items: start;
}

.notice svg {
  width: 20px;
  height: 20px;
  color: var(--kilim-text);
  flex: none;
  margin-top: 0.15em;
}

.notice p {
  font-size: var(--t-small);
  color: var(--kilim-text);
  line-height: 1.6;
}

.notice--sea {
  background: var(--sea-pale);
  border-color: var(--sea);
}

.notice--sea svg {
  color: var(--sea);
}

.notice--sea p {
  color: var(--ink);
}

/*
  Inline links inside a callout sit on a tinted panel, not the page ground.
  Fjord blue measures 4.3:1 against the pale teal tint — just under AA — so
  links take the accent-text token here, which clears it at 4.7:1 while still
  reading as a link next to the navy body copy.
*/
.notice a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--kalk);
  border-block: var(--bw) solid var(--ink);
}

.cta-band__cini {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-size: 130px 130px;
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  align-items: center;
}

@media (min-width: 56.25em) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }
}

.cta-band h2 {
  font-size: var(--t-h2);
}

.cta-band h2 em {
  font-style: italic;
  color: var(--kilim-2);
}

/* Body copy inside the navy band was set with a hardcoded rgba(); move it to
   the off-white token so it tracks the palette. */
.cta-band p {
  color: rgba(247, 245, 240, 0.78);
}

.cta-band p {
  color: rgba(247, 245, 240, 0.86);
  max-width: 46ch;
  margin-top: var(--s4);
}

/* --------------------------------------------------------------------------
   18. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  z-index: 400;
  right: clamp(0.9rem, 3vw, 1.75rem);
  bottom: clamp(0.9rem, 3vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.78em 1.15em 0.78em 0.9em;
  background: #177440; /* matches .btn--wa, for 4.5:1 white text */
  color: #fff;
  border: var(--bw) solid #0f5330;
  border-radius: 100px;
  font-size: var(--t-small);
  font-weight: 650;
  text-decoration: none;
  box-shadow: var(--shadow-hard-sm);
  transform: translateY(140%);
  transition: transform var(--d-slow) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.wa-float[data-visible='true'] {
  transform: translateY(0);
}

.wa-float:hover {
  background: #1d8b4c;
  color: #fff;
}

.wa-float svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.wa-float__text {
  display: none;
}

@media (min-width: 32.5em) {
  .wa-float__text {
    display: block;
  }
}

/* pulsing ring to draw the eye, once */
.wa-float::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 100px;
  border: 2px solid #177440;
  opacity: 0;
  animation: waPulse 4.5s ease-out infinite;
  pointer-events: none;
}

@keyframes waPulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  35%,
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--kalk);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  position: relative;
}

.site-footer a {
  color: rgba(247, 245, 240, 0.86);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.site-footer a:hover {
  color: var(--kilim-bright);
}

.footer__cini {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  opacity: 0.5;
  background-size: 40px 40px;
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 47.5em) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

@media (min-width: 66.25em) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  }
}

.footer__brand .brand {
  color: var(--kalk);
}

.footer__brand .brand__word {
  color: var(--kalk);
}

.footer__brand .brand__sub {
  color: rgba(247, 245, 240, 0.78);
}

.footer__brand .brand__mark {
  color: var(--kilim-2);
}

.footer__blurb {
  margin-top: var(--s5);
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.8);
  max-width: 34ch;
  line-height: 1.65;
}

.footer__title {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--kilim-bright);
  margin-bottom: var(--s4);
}

.footer__list {
  display: grid;
  gap: var(--s1);
  font-size: var(--t-small);
}

.footer__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer__hours {
  display: grid;
  gap: var(--s3);
  font-size: var(--t-small);
}

.footer__hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--bw) solid rgba(247, 245, 240, 0.14);
}

.footer__hours dt,
.footer__hours span:first-child {
  color: rgba(247, 245, 240, 0.78);
}

.footer__bar {
  border-top: var(--bw) solid rgba(247, 245, 240, 0.16);
  padding-block: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-micro);
  color: rgba(247, 245, 240, 0.78);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
}

/* Inline footer links still need a comfortable target for older readers. */
.footer__legal a,
.footer__bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   20. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--kalk-2);
  border-bottom: var(--bw) solid var(--line);
}

.page-head__cini {
  position: absolute;
  inset: auto -4% -40% auto;
  width: min(460px, 44vw);
  height: min(460px, 44vw);
  opacity: 0.07;
  pointer-events: none;
}

.page-head__inner {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4rem);
  display: grid;
  gap: var(--s4);
  max-width: 54rem;
}

/* breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  font-size: var(--t-micro);
  color: var(--text-mute);
  margin-bottom: var(--s1);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
}

.crumbs a:hover {
  color: var(--accent-text);
}

.crumbs span {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   21. SPLIT LAYOUT (content + sticky aside)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 61.25em) {
  .split {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.sticky-aside {
  display: grid;
  gap: var(--s5);
  align-content: start;
}

@media (min-width: 61.25em) {
  .sticky-aside {
    position: sticky;
    top: 6.5rem;
  }
}

/* the "talk to us" panel */
.contact-panel {
  background: var(--ink);
  color: var(--kalk);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: grid;
  gap: var(--s4);
  position: relative;
  overflow: hidden;
}

.contact-panel__cini {
  position: absolute;
  inset: auto -30% -45% auto;
  width: 300px;
  height: 300px;
  opacity: 0.09;
  pointer-events: none;
}

/* Excludes the pattern: this rule comes later and used to override its
   position:absolute, which left a 300px empty block at the top of the panel. */
.contact-panel > :not(.contact-panel__cini) {
  position: relative;
}

.contact-panel h3 {
  font-size: var(--t-h3);
  color: var(--kalk);
}

.contact-panel p {
  font-size: var(--t-small);
  color: rgba(247, 245, 240, 0.8);
  line-height: 1.6;
}

.contact-panel__meta {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: var(--bw) solid rgba(247, 245, 240, 0.16);
  font-size: var(--t-small);
}

.contact-panel__meta div {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: rgba(247, 245, 240, 0.8);
}

.contact-panel__meta svg {
  width: 16px;
  height: 16px;
  color: var(--kilim-2);
  flex: none;
  margin-top: 0.28em;
}

/* --------------------------------------------------------------------------
   22. ADMIN PREVIEW
   -------------------------------------------------------------------------- */
.admin-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--kalk-2);
  font-family: var(--f-body);
}

.admin-bar {
  background: var(--ink);
  color: var(--kalk);
  border-bottom: var(--bw) solid #000;
}

.admin-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 60px;
  flex-wrap: wrap;
  padding-block: var(--s3);
}

.admin-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-small);
  font-weight: 650;
}

.admin-bar__brand svg {
  width: 22px;
  height: 22px;
  color: var(--kilim-2);
}

.admin-bar__tag {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Brass on navy is only 2.6:1; this lighter step reaches 5.5:1. */
  color: #d4b25f;
  border: var(--bw) solid #d4b25f;
  border-radius: 100px;
  padding: 0.25em 0.7em;
  line-height: 1.4;
}

.admin-bar__right {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: var(--t-micro);
  color: rgba(247, 245, 240, 0.78);
}

.admin-layout {
  display: grid;
  gap: 0;
  /* without an explicit column the implicit one grows to the 720px table */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56.25em) {
  .admin-layout {
    grid-template-columns: 224px minmax(0, 1fr);
  }
}

.admin-layout > * {
  min-width: 0;
}

.admin-side {
  background: var(--beyaz);
  border-right: var(--bw) solid var(--kalk-3);
  padding: var(--s5) var(--s4);
  display: grid;
  gap: var(--s2);
  align-content: start;
}

.admin-side__label {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding: var(--s4) var(--s3) var(--s2);
}

.admin-side a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 46px;
  padding: 0.72em 0.8em;
  border-radius: var(--r);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--e-out);
}

.admin-side a svg {
  width: 17px;
  height: 17px;
  flex: none;
  opacity: 0.85;
}

.admin-side a:hover {
  background: var(--kalk-2);
}

.admin-side a[aria-current='page'] {
  background: var(--ink);
  color: #fff;
}

.admin-side a[aria-current='page'] svg {
  opacity: 1;
}

.admin-main {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: var(--s5);
  align-content: start;
  min-width: 0;
  overflow-x: clip;
}

.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.admin-head h1 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' var(--display-soft), 'WONK' var(--display-wonk),
    'opsz' 40;
  letter-spacing: -0.02em;
}

.admin-head p {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-top: var(--s2);
}

/* stat tiles */
.stats {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat {
  background: var(--beyaz);
  border: 1px solid var(--kalk-3);
  border-radius: 6px;
  padding: var(--s4) var(--s5);
  display: grid;
  gap: var(--s2);
}

.stat span {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.stat b {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat small {
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/* admin table */
.admin-panel {
  background: var(--beyaz);
  border: 1px solid #dde3ec;
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}

.admin-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid #e6ebf2;
  flex-wrap: wrap;
}

.admin-panel__head h2 {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.admin-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.5em 0.75em;
  background: #f5f7fa;
  border: 1px solid #dde3ec;
  border-radius: 5px;
}

.admin-search svg {
  width: 15px;
  height: 15px;
  color: #94a3b8;
  flex: none;
}

.admin-search input {
  border: 0;
  background: none;
  font-size: var(--t-small);
  width: 12rem;
  max-width: 40vw;
}

.admin-search input:focus {
  outline: none;
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

table.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  min-width: 720px;
}

.admin-table th {
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8b98a8;
  padding: var(--s3) var(--s5);
  background: #f8fafc;
  border-bottom: 1px solid #e6ebf2;
  white-space: nowrap;
}

.admin-table td {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
  color: #33475e;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tbody tr {
  transition: background-color var(--d-fast) var(--e-out);
}

.admin-table tbody tr:hover {
  background: #f8fafc;
}

.admin-table__prop {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.admin-table__thumb {
  position: relative; /* contains the absolutely placed placeholder */
  display: block;
  width: 56px;
  height: 42px;
  border-radius: 4px;
  overflow: hidden;
  flex: none;
  border: 1px solid #dde3ec;
}

.admin-table__thumb .tile {
  aspect-ratio: auto;
  height: 100%;
  /* At thumbnail size the default tile pattern reads as a flat blob, so the
     repeat is tightened until the motif is legible. */
  background-size: 30px 30px;
}

.admin-table__thumb .tile::before {
  background-size: 30px 30px;
  opacity: 0.6;
}

.admin-table__prop b {
  display: block;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}

.admin-table__prop small {
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-family: var(--f-mono);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-micro);
  font-weight: 700;
  padding: 0.32em 0.62em;
  border-radius: 100px;
  line-height: 1.4;
  white-space: nowrap;
}

.pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pill--salg {
  background: #e6f2ea;
  color: #1c6b41;
}

.pill--solgt {
  background: #eceff3;
  color: #4f7185;
}

.pill--kommende {
  background: var(--kilim-pale);
  color: #9c4a2e;
}

.row-actions {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--kalk-3);
  border-radius: 5px;
  background: #fff;
  color: var(--ink-2);
  transition:
    background-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out);
}

.icon-btn svg {
  width: 15px;
  height: 15px;
}

/*
  A 34px button is too small to hit comfortably, but enlarging it would break
  the table's density. An invisible overlay widens the hit area to 44px
  without changing anything that is visible or affecting layout.
*/
.icon-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 44px;
  height: 44px;
}

.icon-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.icon-btn--danger:hover {
  background: #fdeceb;
  border-color: #d3453a;
  color: #c0392b;
}

/* inbox rows */
.inbox {
  display: grid;
}

.inbox__row {
  display: grid;
  gap: var(--s2) var(--s5);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid #eef2f7;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 51.25em) {
  .inbox__row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto auto;
  }
}

.inbox__row:last-child {
  border-bottom: 0;
}

.inbox__who {
  display: grid;
  gap: 2px;
}

.inbox__who b {
  font-weight: 650;
  color: var(--ink);
}

.inbox__who small {
  font-size: var(--t-micro);
  color: var(--ink-3);
}

.inbox__msg {
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* admin form preview */
.admin-form {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 47.5em) {
  .admin-form__grid {
    display: grid;
    gap: var(--s5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-form .field > label {
  color: #52657c;
}

.admin-form .field input,
.admin-form .field select,
.admin-form .field textarea {
  background: #f8fafc;
  border-color: #dde3ec;
}

.admin-form .field input:focus,
.admin-form .field select:focus,
.admin-form .field textarea:focus {
  background: #fff;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(29, 95, 107, 0.12);
}

.admin-form textarea {
  resize: vertical;
  min-height: 6.5rem;
  line-height: 1.6;
  font-weight: 400;
}

.admin-note {
  font-size: var(--t-small);
  color: var(--ink-2);
}

.field-hint {
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/* On the narrowest phones a long label cannot stay on one line inside the
   available width, so allow wrapping there rather than overflowing. */
@media (max-width: 23.6875em) {
  .admin-form .btn,
  .filters .btn {
    white-space: normal;
  }
}

.span-2 {
  grid-column: 1 / -1;
}

/* user chip, top right of admin */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.user-chip__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kilim-text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--t-micro);
  font-weight: 700;
  flex: none;
}

/* --------------------------------------------------------------------------
   23. (removed) SCROLL REVEAL
   --------------------------------------------------------------------------
   Content used to start at opacity 0 and fade in on scroll, and the hero
   slid in on load. With JavaScript blocked or broken, everything below the
   hero stayed invisible, and the brief asks for no motion that moves
   important information. Content is simply there.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   24. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 999;
  padding: 0.7em 1.1em;
  /* Off-white on the brand terracotta is 3.4:1; the darker tint reaches
     5.4:1, which this control needs since it is a focus affordance. */
  background: var(--kilim-text);
  color: var(--beyaz);
  font-weight: 650;
  font-size: var(--t-small);
  border-radius: var(--r);
  text-decoration: none;
  transition: top var(--d-fast) var(--e-out);
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--beyaz);
}

.stack-sm > * + * { margin-top: var(--s3); }
.stack > * + * { margin-top: var(--s5); }
.stack-lg > * + * { margin-top: var(--s6); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* hairline rule with a çini tick in the middle */
.rule {
  display: flex;
  align-items: center;
  gap: var(--s4);
  color: var(--line-soft);
}

.rule::before,
.rule::after {
  content: '';
  height: var(--bw);
  background: currentColor;
  flex: 1;
}

.rule span {
  color: var(--kilim);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
}

/* --------------------------------------------------------------------------
   25. RESPONSIVE + MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (max-width: 30em) {
  .btn-row {
    width: 100%;
  }

  .btn-row .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .wa-float::after {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   26. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .wa-float,
  .drawer,
  .cta-band,
  .marquee {
    display: none !important;
  }

  body {
    background: #fff;
  }

  body::after {
    display: none;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.72em;
    color: #666;
  }
}

/* ==========================================================================
   27. EDITORIAL LAYER — design-language revision
   --------------------------------------------------------------------------
   Placed last so it takes precedence, and kept together so it can be
   reviewed as one unit. Contains: the quiet button variant, the hero contact
   line, asymmetric editorial sections, and the photo slot.
   ========================================================================== */

/* --- quiet button: text with an arrow, no fill (the brief's secondary) --- */
.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  padding-inline: 0.35rem;
  /* An underline reads as a link but keeps the 48px target from .btn. */
  border-bottom: var(--bw) solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}

.btn--quiet:hover {
  --btn-fg: var(--accent-text);
  border-bottom-color: var(--accent-text);
  transform: none;
  box-shadow: none;
}

/* Icons in a button must be given a box. Without this an inline SVG with no
   intrinsic size expands to fill its track, which is how the arrow blew up to
   several hundred pixels. */
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--d-fast) var(--e-out);
}

.btn--lg svg {
  width: 20px;
  height: 20px;
}

.btn--quiet:hover svg {
  transform: translateX(3px);
}

/* --- hero contact line --- */
.hero__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  /* Bottom padding, not just top: the marquee band follows immediately and the
     two were previously touching. */
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
}

.hero__contact-text {
  font-size: var(--t-small);
  color: var(--text-soft);
  max-width: 46ch;
  flex: 1 1 22rem;
}

/* --- hero photograph ---
   The credit sits bottom-right, not bottom-left: the text panel overlaps the
   lower-left corner of the image, so a caption there would land on the ivory
   panel and read as stray copy rather than a photo credit.
   Anchoring it to the same corner as a magazine credit keeps it on the image,
   clear of the overlap, at every breakpoint. */
.hero__cover .comp__caption {
  left: auto;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
}

@media (max-width: 48.6875em) {
  /* On phones the plate sits below the image rather than over it, so the
     caption can return to the conventional left alignment. */
  .hero__cover .comp__caption {
    left: clamp(1rem, 3vw, 1.5rem);
    right: auto;
  }
}

/* A focus ring on the anchor, so the keyboard affordance is visible if the
   image is ever wrapped in a link. Part of the baseline design system, not
   specific to this photograph. */
.photo:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* --- editorial split section ---
   Alternating image/text panes, offset so the composition breaks the grid.
   Reverts to a simple stack on phones, where an offset would just be noise. */
.ed {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 56.25em) {
  .ed {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 6vw, 6rem);
  }

  /* Reverse: the image moves to the right column without reordering the DOM,
     so the reading order stays heading-then-image for screen readers. */
  .ed--reverse .ed__media {
    grid-column: 2;
    grid-row: 1;
  }

  .ed--reverse .ed__text {
    grid-column: 1;
    grid-row: 1;
  }

  /* The vertical offset that gives the magazine feel. */
  .ed--offset .ed__media {
    margin-top: clamp(-3rem, -4vw, -1.5rem);
  }

  .ed--offset.ed--reverse .ed__media {
    margin-top: 0;
    margin-bottom: clamp(-3rem, -4vw, -1.5rem);
  }
}

.ed__media {
  position: relative;
}

.ed__frame {
  aspect-ratio: 4 / 3;
}

@media (min-width: 56.25em) {
  .ed__frame {
    aspect-ratio: 3 / 4; /* portrait, like a magazine plate */
  }
}

.ed__text {
  display: grid;
  gap: var(--s5);
  align-content: center;
  max-width: 40rem;
}

.ed__text h2 {
  font-size: var(--t-h2);
}

.ed__text p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* --- the photography slot ---
   A real photograph drops in here. Until then the generated composition
   fills the frame, so the layout is already correct for the final asset. */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--kalk-2);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
    Bias the crop upwards. Editorial panes are 3/4 portrait on desktop but 4/3
    landscape on phones, so a portrait photograph is cropped to its middle band
    there; the subject of these images (a horizon, a building, a face) normally
    sits above centre, and a centred crop cuts it off.
  */
  object-position: center 38%;
  display: block;
}

/* The hero panorama is composed around its centre line, so it crops centred. */
.hero__cover img {
  object-position: center center;
}

/* --- editorial statistics, set as a quiet band rather than tiles --- */
.figures {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line-soft);
}

@media (min-width: 40em) {
  .figures {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.figure {
  display: grid;
  gap: var(--s2);
}

.figure b {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.figure span {
  font-size: var(--t-small);
  color: var(--text-soft);
}


/* ==========================================================================
   28. LISTINGS (live) — photo slots, listing page, coming-soon state
   ========================================================================== */

.mono {
  font-variant-numeric: tabular-nums;
}

.prop__media {
  display: block;
  background: var(--kalk-2);
}

.prop__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.prop:hover .prop__media img {
  transform: scale(1.03);
}

/* Shown until the owner adds a photo: quiet, clearly not a broken image. */
.prop__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  background: var(--kalk-2);
  color: var(--text-mute);
  font-size: var(--t-small);
  font-weight: 600;
}

.prop__ph svg {
  width: 32px;
  height: 32px;
  color: var(--sea);
  opacity: 0.7;
}

.prop__title a {
  color: inherit;
  text-decoration: none;
}

.prop__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.prop__ref {
  font-size: var(--t-micro);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.empty-state--soon {
  border-style: solid;
  border-color: var(--line-soft);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.empty-state--soon .lead {
  text-align: center;
  margin-inline: auto;
  max-width: 46ch;
}

/* --- a listing's own page --- */
.listing .crumbs {
  margin-bottom: var(--s5);
}

.listing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  margin-bottom: var(--s6);
}

.listing__head .h1 {
  margin-top: var(--s3);
}

.listing__price {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.listing__price b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--ink);
}

.gallery {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kalk-2);
  border-radius: var(--r);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item--lead {
  grid-column: 1 / -1;
}

@media (min-width: 62.5em) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery__item--lead {
    grid-column: 1 / span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }

  .gallery--single .gallery__item--lead {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
}

.listing__tags {
  margin-top: var(--s4);
}

.facts {
  display: grid;
  margin-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}

.facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line-soft);
}

.facts dt {
  color: var(--text-soft);
}

.facts dd {
  margin: 0;
  font-weight: 650;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- front page: promises next to the process --- */
.promises {
  gap: var(--s5);
}

.promises .ticks li {
  font-size: var(--t-small);
}

.faq-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--text-soft);
}

/* --- footer hours: never break a time range across lines --- */
.footer__hours span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.site-footer a[data-wa] {
  white-space: nowrap;
}

/* ==========================================================================
   29. ADMIN PANEL (live)
   ========================================================================== */

.admin-shell[data-state='loading'] .admin-main,
.admin-shell[data-state='loading'] .admin-login {
  visibility: hidden;
}

.admin-bar__muted {
  opacity: 0.6;
  font-weight: 400;
}

.admin-bar__right .langswitch {
  border-color: rgba(247, 245, 240, 0.5);
}

.admin-bar__right .langswitch__opt {
  color: var(--kalk);
}

.admin-bar__right .langswitch__opt[aria-current='true'] {
  background: var(--kalk);
  color: var(--ink);
}

.admin-bar__site {
  color: rgba(247, 245, 240, 0.85);
}

.admin-login {
  display: grid;
  place-items: start center;
  padding: clamp(2rem, 8vh, 6rem) var(--gutter);
  min-height: 70vh;
}

.admin-login__card {
  width: min(100%, 26rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  gap: var(--s5);
}

.admin-login__card h1 {
  font-size: var(--t-h2);
}

.form-error {
  padding: var(--s3) var(--s4);
  border-left: 3px solid #b3261e;
  background: #fbeceb;
  color: #8c1d18;
  font-weight: 600;
  font-size: var(--t-small);
}

.field [aria-invalid='true'] {
  border-color: #b3261e;
  box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.18);
}

.admin-form {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: var(--s5);
}

.admin-form__section {
  font-family: var(--f-body);
  font-size: var(--t-h4);
  font-weight: 700;
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
}

.admin-form__section:first-child {
  border-top: 0;
  padding-top: 0;
}

.field--check label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap-min);
  font-weight: 600;
  cursor: pointer;
}

.field--check input {
  width: 22px;
  height: 22px;
  accent-color: var(--ink);
}

.admin-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
}

.photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--s4);
  list-style: none;
  padding: 0;
}

.photo-list:empty {
  display: none;
}

.photo-item {
  display: grid;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--kalk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}

.photo-item:first-child {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.photo-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--kalk-2);
}

.photo-item__tools {
  display: flex;
  justify-content: space-between;
  gap: var(--s1);
}

.photo-item[data-uploading] img {
  opacity: 0.45;
}

.photo-add {
  cursor: pointer;
}

.photo-add:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.admin-table__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-table td.mono {
  white-space: nowrap;
}

.admin-table__thumb .prop__ph svg {
  width: 18px;
  height: 18px;
}

.admin-table__thumb .prop__ph span {
  display: none;
}

.admin-empty {
  border: 0;
  border-radius: 0;
}

.admin-nohits {
  padding: var(--s5);
}

.btn--danger {
  --btn-bg: #b3261e;
  --btn-bd: #b3261e;
  --btn-fg: #fff;
}

.btn--danger:hover {
  --btn-bg: #8c1d18;
  --btn-bd: #8c1d18;
}

.admin-dialog {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  padding: 0;
  width: min(92vw, 30rem);
  background: var(--beyaz);
  color: var(--text);
}

.admin-dialog::backdrop {
  background: rgba(14, 34, 54, 0.45);
}

.admin-dialog__body {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.admin-dialog__body h2 {
  font-family: var(--f-body);
  font-size: var(--t-h4);
  font-weight: 700;
}

.admin-dialog__icon {
  width: 26px;
  height: 26px;
  flex: none;
  color: #b3261e;
}

.admin-dialog__actions {
  justify-content: flex-end;
  padding: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
}

.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  translate: -50% 0;
  z-index: 600;
  max-width: min(92vw, 34rem);
  padding: 0.9rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--kalk);
  font-weight: 600;
  box-shadow: 0 12px 32px -10px rgba(18, 35, 58, 0.45);
}

.admin-toast[data-tone='danger'] {
  background: #8c1d18;
}

/* On a phone the listings table becomes a list of cards: photo and title on
   top, area / price / status beneath, the three actions in a row. */
@media (max-width: 47.9375em) {
  table.admin-table {
    min-width: 0;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody {
    display: block;
  }

  .admin-table tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--s2) var(--s4);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--line-soft);
  }

  .admin-table tbody td {
    display: block;
    padding: 0;
    border: 0;
  }

  .admin-table tbody td:first-child,
  .admin-table tbody td:last-child {
    grid-column: 1 / -1;
  }

  .admin-table .row-actions {
    justify-content: flex-start;
  }

  .admin-side {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-right: 0;
    border-bottom: var(--bw) solid var(--kalk-3);
    padding-block: var(--s3);
  }

  .admin-bar__inner {
    flex-wrap: wrap;
    gap: var(--s3);
  }
}

/* --- review fixes: listing page + admin form --- */
.label svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.listing__body .h3 {
  margin-bottom: var(--s4);
}

/* Fill the grid whatever the number of photos: the lead takes a 2x2 block
   and the rest share the remaining cells. */
@media (min-width: 62.5em) {
  .gallery[data-count='2'] .gallery__item:nth-child(2) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }

  .gallery[data-count='3'] .gallery__item:not(.gallery__item--lead) {
    grid-column: span 2;
  }

  .gallery[data-count='4'] .gallery__item:nth-child(4) {
    grid-column: span 2;
  }
}

.admin-form .field--check > label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap-min);
  cursor: pointer;
}

.admin-form .field--check input {
  appearance: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  accent-color: var(--ink);
}

#f-ref {
  text-transform: uppercase;
}

.photo-item__main {
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  padding: 0.25rem 0;
}

.photo-item__make {
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--sea);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  min-height: 32px;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.promises .ticks strong {
  display: block;
  margin-bottom: 0.15rem;
}

/* A service description inside the ledger title is reading text, not a tag. */
.ledger__title small.ledger__lead {
  font-size: var(--t-small);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Service page until its photograph arrives: quiet, not a loud colour field. */
.hero__card--ph {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--kalk-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  color: var(--sea);
}

.hero__card--ph svg {
  width: 72px;
  height: 72px;
  opacity: 0.55;
}

.gallery__item.prop__ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
}