/* ==========================================================================
   Kiinteistöpalvelu Kurkiaura Oy
   Design system — "Sama kortteli"
   Palette sampled from the company's own photography of Eira / Ullanlinna /
   Kaivopuisto: limewashed plaster, copper-roof patina, Jugend ochre.
   Type: GT Super Display (licensed, Grilli Type) + Switzer (OFL).
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------- */
@font-face {
  font-family: 'GT Super';
  src: url('../fonts/GT-Super-Display-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Super';
  src: url('../fonts/GT-Super-Display-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Super';
  src: url('../fonts/GT-Super-Display-Light-Italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* surfaces */
  --paper:      #F1EDE4;   /* limewash plaster */
  --paper-sunk: #E7E1D4;   /* recessed panel */
  --paper-warm: #EDE6D8;
  --night:      #14180F;   /* park at dusk */
  --night-soft: #1F241B;

  /* ink */
  --ink:        #191D18;
  --ink-2:      #4A5147;   /* secondary copy on paper — 7.3:1 */
  --ink-3:      #5A6155;   /* meta on paper 5.49:1, on --paper-sunk 4.92:1 */
  --on-night:   #EFEBE0;
  --on-night-2: #B3BAAB;   /* secondary on night — 8.1:1 */

  /* accents, from the copper roofs and the ochre facades */
  --patina:      #2A5A48;
  --patina-deep: #1D4234;
  --patina-lift: #7FC5AD;
  --ochre:       #9A6A32;

  --line:       color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong:color-mix(in srgb, var(--ink) 26%, transparent);
  --line-night: color-mix(in srgb, var(--on-night) 18%, transparent);

  /* type */
  --display: 'GT Super', 'Iowan Old Style', Georgia, serif;
  --sans: 'Switzer', ui-sans-serif, system-ui, sans-serif;

  --t-hero:  clamp(2.9rem, 7.2vw, 5.5rem);
  --t-xl:    clamp(2.25rem, 4.6vw, 3.5rem);
  --t-l:     clamp(1.75rem, 3vw, 2.375rem);
  --t-m:     clamp(1.3rem, 2vw, 1.625rem);
  --t-lead:  clamp(1.1875rem, 1.125rem + 0.5vw, 1.375rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.75rem;

  /* measure + rhythm */
  --measure: 56ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 1320px;
  --wrap-narrow: 860px;
  --sect: clamp(4.5rem, 9vw, 8.5rem);

  --radius: 3px;
  --ease: cubic-bezier(.16, .84, .28, 1);   /* exponential-ish ease-out */
  --dur: .6s;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.25rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 380;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); line-height: 1.18; }
/* Size is a visual choice; heading level is a structural one. These let the
   two disagree without skipping levels in the outline. */
.h-md { font-size: var(--t-l); }
.h-sm { font-size: var(--t-m); line-height: 1.18; }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
/* Keep emphasis inside the declared range; UA 'bolder' would resolve to 700,
   which GT Super has no master for. */
strong, b { font-weight: 560; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--patina);
  outline-offset: 3px;
  border-radius: 1px;
}
:is(.night, .hero, .band, .foot) :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--patina-lift);
}

::selection { background: var(--patina); color: var(--paper); }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--sect); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.night { background: var(--night); color: var(--on-night); }
.night h1, .night h2, .night h3, .night h4 { color: var(--on-night); }
.sunk { background: var(--paper-sunk); }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.night .lead { color: var(--on-night-2); }
.dim { color: var(--ink-2); }
.night .dim { color: var(--on-night-2); }

/* Utility label. Never used as a kicker above a heading — nav, meta and
   table headers only. */
.micro {
  font-size: var(--t-micro);
  font-weight: 560;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
.night .micro, .foot .micro { color: var(--on-night-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.night .rule { background: var(--line-night); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font: inherit; font-weight: 520; font-size: var(--t-small);
  letter-spacing: .01em;
  padding: .85em 1.5em;
  border: 1px solid var(--patina);
  border-radius: var(--radius);
  background: var(--patina); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--patina-deep); border-color: var(--patina-deep); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
/* Any dark ground — a .night panel, the hero, a photo band — flips the pair. */
.night .btn--ghost, .hero .btn--ghost, .band .btn--ghost {
  color: var(--on-night); border-color: color-mix(in srgb, var(--on-night) 45%, transparent);
}
.night .btn--ghost:hover, .hero .btn--ghost:hover, .band .btn--ghost:hover {
  border-color: var(--on-night); background: color-mix(in srgb, var(--on-night) 10%, transparent);
}
.night .btn, .band .btn { background: var(--patina-lift); border-color: var(--patina-lift); color: var(--night); }
.night .btn:hover, .band .btn:hover { background: #A2D8C5; border-color: #A2D8C5; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Text link that underlines on hover from the left */
.tlink {
  display: inline-block; text-decoration: none; font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
  padding-bottom: 1px;
}
.tlink:hover { background-size: 100% 1px; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.hdr[data-stuck='true'] { border-bottom-color: var(--line); }
.hdr__in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
/* The formation, masked so it inherits currentColor while staying one cached file. */
.brand__mark {
  width: 46px; aspect-ratio: 100 / 44.35; flex: none;
  background: currentColor;
  -webkit-mask: url('../img/skein.svg') center / contain no-repeat;
          mask: url('../img/skein.svg') center / contain no-repeat;
}
.brand__name { display: grid; line-height: 1; }
.brand__name b {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.brand__name span {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .32em; font-weight: 550;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  text-decoration: none; font-size: var(--t-small); font-weight: 480;
  color: var(--ink-2); position: relative; padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
/* The menu CTA is a button first, a nav link second. */
.nav a.btn { color: var(--paper); }
.nav a.btn::after { display: none; }
/* Desktop already carries the phone number as its action — the CTA is for the
   mobile sheet, where there is no room for the tel label. */
@media (min-width: 56.25em) { .nav a.btn { display: none; } }

.hdr__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-weight: 540; font-size: var(--t-small);
  white-space: nowrap;
}
.hdr__tel svg { width: 15px; height: 15px; color: var(--patina); flex: none; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; align-items: center; justify-content: center;
}
.burger span { display: block; width: 17px; height: 1px; background: var(--ink); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1px; background: var(--ink);
  transition: transform .4s var(--ease);
}
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: translateY(-5px) rotate(-45deg); }

@media not all and (min-width: 56.25em) {
  .burger { display: inline-flex; }
  /* Label is hidden visually only; the link keeps its aria-label, and the
     target grows back to 44px instead of collapsing onto a 15px icon. */
  .hdr__tel span { display: none; }
  .hdr__tel {
    min-width: 44px; min-height: 44px;
    justify-content: center; margin-right: -.5rem;
  }
  .hdr__tel svg { width: 19px; height: 19px; }
  .nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.5rem;
    max-height: calc(100svh - 76px); overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0);
    /* visibility, not just clip-path: pixels alone still leave the links
       focusable and announced while the sheet is closed */
    visibility: hidden;
    transition: clip-path .55s var(--ease), visibility 0s linear .55s;
  }
  .nav[data-open='true'] {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .55s var(--ease), visibility 0s;
  }
  .nav a { padding-block: .95rem; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
}

/* ==========================================================================
   Hero — the one authored moment: the skein crosses the sky
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--night); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(15,19,13,.86) 0%, rgba(15,19,13,.62) 46%, rgba(15,19,13,.18) 100%),
    linear-gradient(to top, rgba(15,19,13,.72) 0%, rgba(15,19,13,0) 42%);
}
.hero__in {
  position: relative;
  min-height: min(92svh, 900px);
  display: grid; align-content: end;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(2.5rem, 6vh, 4rem);
  color: var(--on-night);
}
.hero__logo { width: clamp(180px, 22vw, 300px); height: auto; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hero h1 { color: var(--on-night); max-width: 22ch; }
.hero h1 em { font-style: italic; font-weight: 300; }
.hero__lead {
  font-size: var(--t-lead); line-height: 1.5; color: var(--on-night-2);
  max-width: 46ch; margin-top: 1.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* the formation */
.skein {
  position: absolute; z-index: -1;
  top: clamp(7%, 10vh, 15%); right: clamp(4%, 9vw, 12%);
  width: clamp(210px, 27vw, 420px);
  color: #10140E;
  opacity: .92;
  filter: drop-shadow(0 12px 26px rgba(10,14,9,.28));
  pointer-events: none;
}
.skein svg { width: 100%; height: auto; overflow: visible; }
.skein .crane { transform-box: fill-box; transform-origin: 50% 50%; }

@media (max-width: 700px) {
  /* keep the whole formation on screen — the lead bird is the mark */
  .skein { top: 11%; right: 4%; width: 62vw; opacity: .82; }
  .hero__in { min-height: 86svh; }
  .hero h1 { max-width: 12ch; }
}

/* the authored entrance: the birds glide in and settle into formation */
@media (prefers-reduced-motion: no-preference) {
  .skein .crane {
    opacity: 0;
    animation: glide 1.9s var(--ease) forwards;
    animation-delay: calc(var(--i) * .13s + .25s);
  }
  @keyframes glide {
    from { opacity: 0; transform: translate(11%, 7%) rotate(-3.5deg) scale(.94); }
    to   { opacity: 1; transform: none; }
  }
  .skein.is-drifting .crane {
    animation: glide 1.9s var(--ease) forwards,
               drift 7s ease-in-out calc(2.2s + var(--i) * .38s) infinite;
  }
  @keyframes drift {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -1.1%; }
  }

  /* Every other reveal on the site is this one primitive. It is scoped to
     .js — set by an inline probe that removes itself if the script never
     boots — so the visible state stays the default and content can never be
     stranded invisible. */
  .js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity .85s var(--ease), transform .85s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Editorial figures — the proof line (not a stat-card template)
   ========================================================================== */
/* The numbers live inside a sentence, not on four cards. */
.proof {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.32;
  letter-spacing: -0.018em; max-width: 24ch; margin: 0;
  text-wrap: balance;
}
.proof b {
  font-weight: 400; color: var(--patina);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.night .proof b { color: var(--patina-lift); }
.proof__aside { margin-top: 1.5rem; }

/* ==========================================================================
   Editorial two-column statement
   ========================================================================== */
.split {
  display: grid; gap: clamp(1.75rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.split--lead { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 860px) { .split, .split--lead { grid-template-columns: 1fr; } }

/* ==========================================================================
   Services — an editorial list, not a card grid
   ========================================================================== */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  display: grid; gap: clamp(1.25rem, 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  border-bottom: 1px solid var(--line);
}
.svc__body { max-width: 46ch; }
.svc__body > p { margin-bottom: 0; }
.svc__fig { margin: 0; }
.svc__fig img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius); filter: saturate(.92);
}
/* Alternate the image side so the list reads as a spread, not a stack.
   The track weights swap with it, so the photo keeps one width down the page. */
.svc__row:nth-child(even) .svc__fig { order: -1; }
@media (min-width: 861px) {
  .svc__row:nth-child(even) { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}
/* A closing qualifier — under the heading, never above it. */
.svc__meta {
  margin-top: 1.4rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
}
@media (max-width: 860px) {
  .svc__row { grid-template-columns: 1fr; align-items: start; }
  .svc__row .svc__fig, .svc__row:nth-child(even) .svc__fig { order: -1; }
}

/* ==========================================================================
   The finder — find your building, get your caretaker
   ========================================================================== */
.finder__field { position: relative; max-width: 620px; }
.finder__field svg {
  position: absolute; left: 1rem; top: 50%; translate: 0 -50%;
  width: 17px; height: 17px; color: var(--ink-3); pointer-events: none;
}
.finder input[type='search'] {
  width: 100%; font: inherit; font-size: 1.0625rem;
  padding: 1rem 1rem 1rem 2.9rem;
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  appearance: none;
}
.finder input[type='search']::placeholder { color: var(--ink-3); }
.finder input[type='search']:hover { border-color: color-mix(in srgb, var(--ink) 38%, transparent); }
.finder input[type='search']:focus { border-color: var(--patina); }
.finder input::-webkit-search-cancel-button { cursor: pointer; }
.finder__count { margin-top: .9rem; font-size: var(--t-small); color: var(--ink-3); min-height: 1.5em; }
.finder__count mark { background: none; color: var(--ink); font-weight: 560; }

.crew { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.crew__item { border-bottom: 1px solid var(--line); }
.crew__item[hidden] { display: none; }
.crew__grid {
  display: grid; gap: clamp(.9rem, 2.2vw, 2.25rem);
  /* the third column has to hold arto.kolehmainen@kurkiauraoy.fi unbroken */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 19rem);
  align-items: start; padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.crew__who > :is(h2, h3, h4) { letter-spacing: -0.015em; margin: 0; }
.crew__role { margin-top: .45rem; }
.crew__say { color: var(--ink-2); font-size: var(--t-small); margin-top: .8rem; max-width: 38ch; }
.crew__houses { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.crew__houses li { font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.crew__houses li mark { background: color-mix(in srgb, var(--patina-lift) 55%, transparent); color: var(--ink); border-radius: 2px; padding: 0 .15em; }
.crew__contact { display: grid; gap: .55rem; justify-items: start; }
.crew__contact a {
  text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: var(--t-small); line-height: 1.35;
  overflow-wrap: anywhere; hyphens: none;
}
.crew__contact a svg { width: 14px; height: 14px; color: var(--patina); flex: none; translate: 0 2px; }
.crew__contact .tel { font-size: 1.0625rem; font-weight: 540; white-space: nowrap; }
.crew__contact a:hover { text-decoration: underline; }
@media (max-width: 900px) { .crew__grid { grid-template-columns: 1fr; gap: 1rem; } .crew__photo { width: 120px; } }
.crew__photo { width: 96px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--paper-sunk); }
.badge { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-small); font-weight: 560; color: var(--patina); }
.badge svg { width: 20px; height: 20px; flex: none; }
.badge-img { width: 150px; height: auto; border-radius: var(--radius); display: block; }

.crew__empty { padding: 2.5rem 0; color: var(--ink-2); }
.crew__empty[hidden] { display: none; }

/* ==========================================================================
   Full-bleed photo band — the page's second visual moment
   ========================================================================== */
.band { position: relative; isolation: isolate; color: var(--on-night); overflow: hidden; }
.band > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
}
/* Text sits across the full width here, so the scrim never thins past the
   point where white copy drops under 4.5:1. */
.band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(12,16,11,.86) 0%, rgba(12,16,11,.72) 60%, rgba(12,16,11,.66) 100%),
    linear-gradient(to bottom, rgba(12,16,11,.30) 0%, rgba(12,16,11,0) 45%);
}
.band h2, .band h3 { color: var(--on-night); }
.band .micro { color: var(--on-night-2); }

/* ==========================================================================
   Quotes
   ========================================================================== */
.quotes { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.quote { margin: 0; }
.quote blockquote {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.28; letter-spacing: -0.015em;
  text-wrap: balance;
}
.quote blockquote::before { content: '”'; display: block; font-size: 2.5em; line-height: .55; margin-bottom: .18em; color: var(--patina-lift); }
.night .quote blockquote::before { color: var(--patina-lift); }
.quote figcaption { margin-top: 1.1rem; }

/* ==========================================================================
   Partners
   ========================================================================== */
/* A directory, not three cards: hairlines and space carry the grouping. */
.partners {
  display: grid; gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-night);
}
.partner {
  display: grid; align-content: start; gap: .55rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line-night);
}
.partner > :is(h3, h4) { font-size: var(--t-m); line-height: 1.18; }
.partner__logo { height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: .6rem; }
.partner p { margin: 0; max-width: 34ch; }
.partner p:not(.micro) { font-size: var(--t-small); color: var(--on-night-2); }
@media (min-width: 900px) {
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-night); }
  .partner { border-bottom: 0; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.deets { display: grid; gap: 1.4rem; margin-top: 2rem; }
.deets__row { display: grid; gap: .3rem; }
.deets__row a, .deets__row span:not(.micro) { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 450; text-decoration: none; }
.deets__row a:hover { text-decoration: underline; }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: .45rem; }
.form__row--two { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form__row--two { grid-template-columns: 1fr; } }
.form label { font-size: var(--t-micro); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.night .form label { color: var(--on-night-2); }
.form input, .form textarea, .form select {
  font: inherit; font-size: var(--t-body); width: 100%;
  padding: .85rem 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius); appearance: none;
  transition: border-color .3s var(--ease);
}
.form textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.form input:hover, .form textarea:hover, .form select:hover { border-color: color-mix(in srgb, var(--ink) 38%, transparent); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--patina); }
.form input:user-invalid, .form textarea:user-invalid, .form select:user-invalid,
.form .is-bad { border-color: #9B3B2E; }
.form__err { font-size: var(--t-small); color: #8E3527; display: none; }
/* :user-invalid draws it, .is-bad keeps the visible message in step with the
   aria-invalid state the script sets — the two must never disagree. */
.form input:user-invalid ~ .form__err, .form textarea:user-invalid ~ .form__err,
.form select:user-invalid ~ .form__err,
.form .is-bad ~ .form__err { display: block; }
.form__note { font-size: var(--t-small); color: var(--ink-3); }
.form__ok {
  border: 1px solid var(--patina); background: color-mix(in srgb, var(--patina-lift) 22%, transparent);
  border-radius: var(--radius); padding: 1rem 1.15rem; font-size: var(--t-small); color: var(--ink);
}
.form__ok[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Map plate
   ========================================================================== */
.plate { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.45) contrast(1.14) brightness(.96); }
.plate__tag {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: .8rem 1rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
}

/* ==========================================================================
   Forms index
   ========================================================================== */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: 1fr; }
/* Explicit 1 -> 3: auto-fit produced a 2-track grid for 3 items, and the
   vacant fourth cell painted the container background as a solid block. */
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards > a {
  background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none; display: grid; align-content: start; gap: .7rem;
  transition: background var(--dur) var(--ease);
}
.cards > a:hover { background: var(--paper-warm); }
/* These three are wayfinding into the forms below, not section headings —
   so they carry heading *styling* without taking a heading level. */
.cards > a .cardtitle {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-m); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--ink);
}
.cards > a p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
.cards > a .go { font-size: var(--t-small); font-weight: 540; color: var(--patina); display: inline-flex; align-items: center; gap: .4rem; }
.cards > a:hover .go svg { translate: 3px 0; }
.cards > a .go svg { width: 13px; transition: translate .35s var(--ease); }

/* ==========================================================================
   Page head (inner pages)
   ========================================================================== */
.phead { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.phead h1 { font-size: var(--t-xl); max-width: 18ch; }
.phead .lead { margin-top: 1.25rem; }

.crumb { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.5rem; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 560; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--night); color: var(--on-night); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.foot__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__brand .brand__mark { width: 78px; color: var(--on-night); }
.foot__brand p { color: var(--on-night-2); font-size: var(--t-small); margin-top: 1.25rem; max-width: 34ch; }
.foot ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.foot a { text-decoration: none; font-size: var(--t-small); color: var(--on-night-2); transition: color .3s var(--ease); }
.foot a:hover { color: var(--on-night); }
.foot__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-night);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: var(--t-micro); color: var(--on-night-2); letter-spacing: .04em;
}

/* Skip link */
.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--patina); color: var(--paper); padding: .7rem 1.1rem;
  border-radius: var(--radius); text-decoration: none; font-size: var(--t-small); font-weight: 540;
  transition: top .25s var(--ease);
}
.skip:focus { top: 1rem; }

/* ==========================================================================
   External service links (Kiinteistöveli move-in / move-out)
   ========================================================================== */
.xlinks { display: grid; gap: 1rem; align-content: start; }
.xlink {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-sunk); text-decoration: none; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.xlink:hover { border-color: var(--patina); background: var(--paper-warm); }
.xlink__body { display: grid; gap: .35rem; flex: 1 1 18rem; }
.xlink .cardtitle {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-m); line-height: 1.18; letter-spacing: -0.02em;
}
.xlink__desc { font-size: var(--t-small); color: var(--ink-2); }
.xlink .go { font-size: var(--t-small); font-weight: 540; color: var(--patina); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.xlink .go svg { width: 13px; transition: translate .35s var(--ease); }
.xlink:hover .go svg { translate: 2px -2px; }
.xlinks .form__note { margin-top: .25rem; }

/* ==========================================================================
   Radio choice (vikailmoitus: lupa käydä asunnossa)
   ========================================================================== */
.choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.form .choice legend { font-size: var(--t-micro); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: .55rem; }
.form .choice__opt { display: flex; align-items: flex-start; gap: .7rem; font: inherit; font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--ink); padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.choice__opt + .choice__opt { margin-top: .5rem; }
.choice__opt:hover { border-color: color-mix(in srgb, var(--ink) 38%, transparent); }
.choice__opt:has(input:checked) { border-color: var(--patina); background: var(--paper-warm); }
.form .choice__opt input { appearance: auto; -webkit-appearance: radio; accent-color: var(--patina); width: 18px; height: 18px; min-height: 0; padding: 0; margin: .2rem 0 0; border: 0; background: none; box-shadow: none; flex: none; }
.choice:has(input:user-invalid) .form__err { display: block; }

/* photo plates keep their colour; the map plate was the only toned one */
.plate--photo img { filter: none; aspect-ratio: 4 / 3; }

/* embedded map with touch gate */
.map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map iframe { display: block; width: 100%; height: 420px; pointer-events: none; }
.map.is-live iframe { pointer-events: auto; }
.map__gate { position: absolute; left: 50%; bottom: 3.25rem; translate: -50% 0; font: inherit; font-size: var(--t-small); font-weight: 540; padding: .6em 1.1em; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
@media (hover: hover) and (pointer: fine) { .map iframe { pointer-events: auto; } .map__gate { display: none; } }
.map .form__note { padding: .5rem .9rem .7rem; margin: 0; }

/* ==========================================================================
   Classic hero (16.9.2026): old site's look — bright photo, centred white
   logo, one tagline, one button, transparent header over the image
   ========================================================================== */
.hero--classic .hero__media::after { background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 150px), linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 58%); }
.hero--classic h1 { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.45); }
.hero--classic .hero__logo { filter: drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.hero--classic .hero__in {
  min-height: 100svh; align-content: center; justify-items: center; text-align: center;
  padding-block: clamp(7rem, 16vh, 10rem) clamp(4rem, 10vh, 6rem);
}
.hero--classic .hero__logo { width: clamp(260px, 36vw, 500px); margin-bottom: clamp(1rem, 2.5vw, 1.75rem); filter: drop-shadow(0 2px 14px rgba(0,0,0,.25)); }
.hero--classic h1 {
  font-family: var(--sans); font-weight: 400; max-width: 40ch;
  font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -0.005em; line-height: 1.3;
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
.hero--classic .hero__cta { justify-content: center; margin-top: 1.75rem; }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; border-color: #fff; color: var(--ink); }

.hdr--over { margin-bottom: -76px; }
.hdr--over:not([data-stuck='true']) { background: transparent; backdrop-filter: none; color: var(--on-night); }
.hdr--over:not([data-stuck='true']) .nav a, .hdr--over:not([data-stuck='true']) .hdr__tel,
.hdr--over:not([data-stuck='true']) .brand__name span, .hdr--over:not([data-stuck='true']) .burger { color: var(--on-night); }
.hdr--over:not([data-stuck='true']) .brand__mark { color: var(--on-night); }
.hdr--over:not([data-stuck='true']) .nav .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ==========================================================================
   Pillars (etusivun palvelut, 16.9.2026): four quiet columns like the old
   site's icon row, set in the new type and palette
   ========================================================================== */
.pillars__head { text-align: center; max-width: 60ch; margin-inline: auto; }
.pillars__head h2 { font-size: var(--t-xl); }
.pillars__rule { display: block; width: 44px; height: 1px; background: var(--patina); margin: 1.5rem auto; }
.pillars__head .lead { margin-inline: auto; }
.pillars__grid {
  list-style: none; padding: 0; margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pillar { padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); text-align: center; display: grid; justify-items: center; align-content: start; gap: .9rem; }
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar__icon { width: 44px; height: 44px; color: var(--patina); }
.pillar h3 { margin: 0; color: var(--ink); font-size: var(--t-micro); letter-spacing: .14em; }
.pillar p { margin: 0; font-size: var(--t-small); color: var(--ink-2); max-width: 30ch; }
@media (max-width: 960px) {
  .pillars__grid { grid-template-columns: 1fr 1fr; }
  .pillar + .pillar { border-left: 0; }
  .pillar:nth-child(even) { border-left: 1px solid var(--line); }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .pillar:nth-child(even) { border-left: 0; }
  .pillar:nth-child(n+2) { border-top: 1px solid var(--line); }
}
.partner__logo--tile { background: #fff; padding: 6px 10px; height: 46px; border-radius: var(--radius); }

/* page head with a photo on the right (lomakkeet, 16.9.2026) */
.phead--split { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.phead__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.phead__fig { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); max-width: 420px; justify-self: end; }
.phead__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 900px) { .phead__grid { grid-template-columns: 1fr; } .phead__fig { justify-self: start; max-width: 320px; } }

/* page hero with photo background (yhteystiedot, 16.9.2026) */
.hero--page .hero__media img { object-position: 50% 55%; }
.hero--page .hero__media::after {
  background:
    linear-gradient(to right, rgba(15,19,13,.80) 0%, rgba(15,19,13,.55) 48%, rgba(15,19,13,.15) 100%),
    linear-gradient(to top, rgba(15,19,13,.55) 0%, rgba(15,19,13,0) 50%);
}
.hero--page .hero__in { min-height: 90svh; align-content: end; padding-block: clamp(5rem, 10vh, 7rem) clamp(2.5rem, 5vh, 3.5rem); }
.hero--page .crumb { color: var(--on-night-2); }
.hero--page .crumb a { color: var(--on-night-2); }
.hero--page .crumb a:hover { color: var(--on-night); }
.hero--page h1 { font-size: var(--t-xl); max-width: 18ch; }
.hero--page.hero--luukku .hero__media img { object-position: 70% 50%; }

/* full-viewport page hero: the header overlays it (.hdr--over), so 100svh is the whole screen */
.hero--page.hero--full .hero__in { min-height: 100svh; padding-top: calc(76px + clamp(3rem, 8vh, 5rem)); padding-bottom: clamp(3.5rem, 9vh, 6rem); }
.hero--page.hero--full .hero__media::after {
  background:
    linear-gradient(to right, rgba(15,19,13,.82) 0%, rgba(15,19,13,.55) 48%, rgba(15,19,13,.15) 100%),
    linear-gradient(to top, rgba(15,19,13,.65) 0%, rgba(15,19,13,0) 45%),
    linear-gradient(to bottom, rgba(15,19,13,.45) 0%, rgba(15,19,13,0) 140px);
}
.btn--wa { background: #25D366; border-color: #25D366; color: #0b2e18; }
.btn--wa:hover { background: #1fbf5b; border-color: #1fbf5b; color: #0b2e18; }
.hero--page .hero__cta { margin-top: 2rem; }

/* lighter photo band (asiakaspalautteet, 16.9.2026): bright photo shows through,
   text keeps contrast with a soft gradient scrim + shadow */
.band--light > img { object-position: 50% 22%; }
.band--light::before {
  background:
    linear-gradient(to bottom, rgba(15,19,13,.52) 0%, rgba(15,19,13,.42) 55%, rgba(15,19,13,.50) 100%),
    linear-gradient(to right, rgba(15,19,13,.25) 0%, rgba(15,19,13,0) 40%, rgba(15,19,13,0) 60%, rgba(15,19,13,.25) 100%);
}
.band--light .quote blockquote, .band--light .quote figcaption { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.45); }
.band--light .micro { color: var(--on-night); }

.band--light { min-height: clamp(480px, 62svh, 640px); display: grid; align-content: center; }

@media (min-width: 900px) { .band--light .quotes { grid-template-columns: minmax(0, 44%); justify-content: start; gap: 2.25rem; } }

/* mobile nav on the transparent hero header: the dropdown panel is paper,
   so links go back to ink and the whole header turns paper while it is open */
@media (max-width: 56.24em) {
  .hdr--over .nav a, .hdr--over:not([data-stuck='true']) .nav a { color: var(--ink); }
  .hdr--over .nav a.btn, .hdr--over:not([data-stuck='true']) .nav .btn { background: var(--patina); border-color: var(--patina); color: var(--paper); }
  .hdr--over:has(.nav[data-open='true']) { background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(14px) saturate(1.4); color: var(--ink); }
  .hdr--over:has(.nav[data-open='true']) .brand__name span, .hdr--over:has(.nav[data-open='true']) .hdr__tel,
  .hdr--over:has(.nav[data-open='true']) .burger, .hdr--over:has(.nav[data-open='true']) .brand__mark { color: var(--ink); }
}

/* palvelut hero (16.9.2026): full-bleed jugend rooftops, copy top-left,
   partner cards as frosted glass over the photo */
.hero--palvelut .hero__media img { object-position: 50% 60%; }
.hero--palvelut .hero__media::after {
  background:
    linear-gradient(to right, rgba(15,19,13,.80) 0%, rgba(15,19,13,.55) 48%, rgba(15,19,13,.25) 100%),
    linear-gradient(to top, rgba(15,19,13,.65) 0%, rgba(15,19,13,0) 50%),
    linear-gradient(to bottom, rgba(15,19,13,.45) 0%, rgba(15,19,13,0) 170px);
}
.hero--palvelut h1, .hero--palvelut .hero__lead, .hero--palvelut .crumb, .hero--palvelut .glass h2 { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.45); }
.hero--palvelut .hero__lead { color: var(--on-night); }
.hero--palvelut .hero__in { min-height: 100svh; align-content: space-between; gap: clamp(2.5rem, 6vh, 4.5rem); padding-top: calc(76px + clamp(3rem, 8vh, 5rem)); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.hero--palvelut .hero__copy { max-width: 60ch; }
.glass h2 { color: var(--on-night); margin-bottom: 1.25rem; }
.cards--glass { background: transparent; border: 0; gap: 1rem; overflow: visible; }
.cards--glass > a {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.14);
}
.cards--glass > a:hover { background: color-mix(in srgb, var(--paper) 90%, transparent); }
.hero--taloyhtiot .hero__media img { object-position: 50% 35%; }
.hero--taloyhtiot h1, .hero--taloyhtiot .hero__lead, .hero--taloyhtiot .crumb { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.45); }

/* QA 16.9.2026: readability of the transparent header over bright photos */
.hdr--over:not([data-stuck='true']) .brand__name, .hdr--over:not([data-stuck='true']) .nav a, .hdr--over:not([data-stuck='true']) .hdr__tel { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.40); }
.hdr--over:not([data-stuck='true']) .brand__mark, .hdr--over:not([data-stuck='true']) .burger span { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
/* 12) breadcrumb on photo heroes */
.hero--page .crumb, .hero--page .crumb a { color: var(--on-night); }
/* 13) glass card role label */
.cards--glass > a > .micro { color: var(--patina-deep) !important; }
/* 5) radio group error state */
.choice.is-bad .form__err { display: block; }
.choice.is-bad .choice__opt { border-color: #B23A2E; }

/* header brand = official logo (17.9.2026): dark on paper, white over photo heroes */
.brand__logo { height: 62px; width: auto; display: block; }
@media (max-width: 56.24em) { .brand__logo { height: 54px; } }
.brand__logo--light { display: none; }
.hdr--over:not([data-stuck='true']) .brand__logo--dark { display: none; }
.hdr--over:not([data-stuck='true']) .brand__logo--light { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
@media (max-width: 56.24em) { .hdr--over:has(.nav[data-open='true']) .brand__logo--light { display: none; } .hdr--over:has(.nav[data-open='true']) .brand__logo--dark { display: block; } }