/* =========================================================================
   Dr. Bernhard Steiner — shared design system
   One stylesheet for every page. Change a token below and the whole site
   follows. Pages link this file and use the classes; no inline theme values.

   Contents
     0.  Fonts (self-hosted)
     1.  Design tokens
     2.  Base + accessibility
     3.  Layout helpers
     4.  Type
     5.  Navigation (desktop + mobile menu)
     6.  Buttons
     7.  Hero
     8.  Placeholders
     9.  Feature rows
     10. Cards
     11. Numbers
     12. Service grids
     13. Process / value columns
     14. Callout
     15. Chips
     16. Person card
     17. Timeline
     18. FAQ
     19. Memberships
     20. Bands + CTA
     21. Footer
     22. Utilities
     23. Responsive (all breakpoints live here)
     25. Form (contact page only)
     24. Content width (must stay last — overrides section 23 padding)
   ========================================================================= */

/* ---- 0. Fonts (self-hosted) --------------------------------------------
   Served from our own domain, never from fonts.googleapis.com. Loading fonts
   from Google transmits every visitor's IP address to a third party before
   any consent is possible — a GDPR problem for a Czech firm with German and
   Austrian clients, and the reason there is no font <link> in any page head.

   Files live in /assets/fonts/ and are named by weight, so this block does
   not have to change when the upstream version number does.

   Schibsted Grotesk is OFL-licensed; self-hosting is permitted.
   font-display:swap — text paints immediately in the fallback and swaps when
   the file arrives, so a slow font never blocks reading.

   IBM Plex Mono is deliberately NOT loaded. It is referenced only by
   .ph span and .member .logo span, and every one of those is display:none,
   so it never renders. --mono falls back to the system monospace, which is
   correct if a placeholder is ever shown. To reinstate it, drop
   ibm-plex-mono-400.woff2 and -500.woff2 into /assets/fonts/ and add two
   @font-face rules matching the pattern below. */

@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/assets/fonts/schibsted-grotesk-400.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:italic; font-weight:400;
  font-display:swap; src:url('/assets/fonts/schibsted-grotesk-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/assets/fonts/schibsted-grotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:600;
  font-display:swap; src:url('/assets/fonts/schibsted-grotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700;
  font-display:swap; src:url('/assets/fonts/schibsted-grotesk-700.woff2') format('woff2');
}

/* ---- 1. Design tokens -------------------------------------------------
   The palette carries a specific logic. Read this before changing anything.

   TEXT — four tones, coldest at top:
     --ink     headings and primary text
     --body    reading copy (paragraphs); the everyday text tone
     --muted   secondary copy (meta lines, small captions attached to a name)
     --faint   captions and true meta only

   RED — two scales of one system:
     --red-deep    surfaces: buttons, brand strips, footer background
     --red-accent  detail: eyebrows, numbers, active states, +/−, bullets,
                   hover on deep-red buttons
     A deep-red surface hovers TO red-accent. Small typographic accents use
     red-accent from the start. Do not invent a third red.

   Every rule now references --red-deep / --red-accent directly; the old
   --accent aliases have been retired. */
:root{
  /* backgrounds */
  --bg:        #FFFFFF;   /* every default section — pure white */
  --white:     #FFFFFF;   /* text on carmine, buttons */
  --panel:     #FAF9F7;   /* the one warm tone, used sparingly */

  /* text */
  --ink:       #221D1C;   /* headings / primary */
  --body:      #3E3835;   /* reading copy */
  --muted:     #5A5350;   /* secondary copy */
  --faint:     #726965;   /* captions / meta — 5.4:1 on white, 5.1:1 on --panel */
  --line:      #E8E4E2;   /* hairline rules inside components */

  /* red system */
  --red-deep:    #9E1B24; /* surface / large solid */
  --red-accent:  #B52A32; /* detail / typographic / interactive */

  /* placeholders (retire when real images arrive) */
  --placeholder-a:#F2F0EE;
  --placeholder-b:#EAE7E4;

  /* type */
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* fluid heading sizes — scale between phone and desktop without breakpoints */
  /* Phone minimums 30/32 (were 34/36, 28 Sep design review): at 34px the
     German "Immobilienverwaltung" is 353px wide and was clipped in the hero
     on 360px phones. Tablet and desktop sizes are unchanged. */
  --fs-h1:     clamp(30px, 5.2vw, 56px);
  --fs-h1-xl:  clamp(32px, 6.0vw, 64px);
  --fs-h2:     clamp(28px, 3.6vw, 40px);
  --fs-h2-lg:  clamp(30px, 4.0vw, 44px);
  --fs-h2-sm:  clamp(26px, 3.2vw, 36px);

  /* type scale — seven steps. If a size is not here, it does not exist.
     Everything in the stylesheet references these, never a raw px value. */
  --fs-label: 12px;   /* eyebrow, chip, role, footer title           */
  --fs-meta:  14px;   /* card meta, copyright, address, captions     */
  --fs-ui:    15px;   /* nav links, buttons, footer links            */
  --fs-sm:    16px;   /* small body: p--sm, FAQ answers, teasers     */
  --fs-body:  17px;   /* paragraphs                                  */
  --fs-sub:   20px;   /* small headings, contacts row, timeline year */
  --fs-h3:    24px;   /* card + person headings                      */

  /* rhythm — overridden per breakpoint in section 23 */
  --pad-x: 56px;
  --section-y: clamp(48px, 6vw, 88px);   /* fluid — no breakpoint overrides */
  --container: 1280px;   /* max content width — see section 24 */

  /* The nav collapses to a menu button at 1180px. That value cannot live here:
     custom properties do not work inside media queries. It is written into the
     media queries in section 23 and duplicated in js/script.js as
     NAV_BREAKPOINT — change all of them together. */
}

/* ---- 2. Base + accessibility ------------------------------------------ */
*{ box-sizing:border-box; }
html,body{ margin:0; }
/* Body sets the default reading tone: everything flows from --body unless a
   component explicitly overrides it (brief §4.1). Headings and other primary
   text therefore claim --ink for themselves rather than inheriting it — see
   .h1, .h2, .column h3, .tl__title, .faq__q h3, .person .name, .member__name. */
body{
  font-family:var(--sans);
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  /* Footer stays at the bottom of the window on short pages (thanks, 404)
     instead of floating with white space below it. On every page taller than
     the window this changes nothing. dvh after vh: older browsers use vh. */
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}
main{ flex:1 0 auto; }
a{ color:var(--red-accent); }
a:hover{ color:var(--red-deep); }
img{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

/* Visible keyboard focus everywhere. Mouse users don't see it. */
:focus-visible{ outline:2px solid var(--red-accent); outline-offset:3px; }
/* Programmatic focus targets (tabindex="-1", e.g. <main> as skip-link
   destination) should not draw the interactive outline — it wraps the
   whole page and its top/bottom edges appear as a full-width red line
   below the nav and above the footer. Real interactive elements
   (buttons, links) still get the outline from the rule above. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible{ outline:none; }

/* Skip link — first tab stop on every page, hidden until focused. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red-accent); color:var(--white);
  padding:12px 20px; font-size:var(--fs-ui); font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Screen-reader-only text (labels that shouldn't be seen). */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---- 3. Layout helpers ------------------------------------------------
   THREE REGISTERS. A background says who is speaking, never "variety":
     white    the firm — argument, services, process, questions, the ask
     panel    evidence — client words, buildings, figures, the record
     carmine  the one line, once per page, one sentence
   .section--white is gone: --bg and --white are the same colour, so it
   never rendered anything. */
.section{ padding:var(--section-y) var(--pad-x); }
.section--panel{ background:var(--panel); }
/* Two evidence blocks in a row are ONE tinted zone, not two stacked
   surfaces — so the shared edge loses the doubled padding. Half, not zero:
   the surface stays continuous, but the second block's heading still has
   room to breathe under the one above it. */
.section--panel + .section--panel{ padding-top:calc(var(--section-y) * .55); }

/* FIVE layout patterns, one job each. Nothing else lays out a page.
   If a sixth is ever needed, write down why first. */
.feature  { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.feature--profile{ align-items:start; }
/* A person beside text: the portrait column is capped at 440px so a 4:5
   photo no longer towers over the copy (was 604x755 at 1440). The text
   column takes the rest. At <=960 the stacking rule in section 23 wins. */
.feature--profile{ grid-template-columns:minmax(0,1fr) minmax(0,440px); }
/* The wider text column needs its own measure, or lines run past 100
   characters (Real Estate has no .measure on its paragraphs). */
.feature--profile > :first-child{ max-width:640px; }
.pair     { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.with-head{ display:grid; grid-template-columns:380px 1fr; gap:72px; align-items:start; }
.columns  { display:grid; grid-template-columns:repeat(var(--cols,1),1fr); gap:40px; }
/* A column set declares how many columns it has, so it can never leave an
   orphan. auto-fit would drop a four-item set to three-across-plus-one at
   some widths; explicit counts step 4→2→1 and 3→1, never 3+1 or 2+1. */
.columns--3{ --cols:3; }
.columns--4{ --cols:4; }
.cards    { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:32px; }

/* Section head — ONE pattern. Left aligned, always with an eyebrow.
   Centring is reserved for the CTA and nothing else, so that when a
   block is centred it means "this is the end of the argument". */
.section-head{ margin-bottom:48px; max-width:720px; }
.section-head .h2{ margin-bottom:16px; }
.section-head .p{ margin-bottom:0; max-width:620px; }
/* in a sidebar column the head is the column, so it drops the gap */
.with-head > .section-head{ margin-bottom:0; }

/* ---- 4. Type ---------------------------------------------------------- */
/* Eyebrow: small red uppercase label used above section headings.
   Carries a short carmine dash before the first word as a shared brand
   accent — introduced site-wide as an additional design element. The
   dash sits inline via ::before so no markup change is required. */
.eyebrow{
  font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-accent); font-weight:700; margin:0 0 20px;
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; display:inline-block;
  width:24px; height:2px; background:var(--red-accent);
  flex:0 0 auto;
}
.eyebrow--muted{ color:var(--muted); font-weight:600; }
.eyebrow--muted::before{ background:var(--muted); }
.h1{ color:var(--ink); margin:0 0 16px; font-size:var(--fs-h1); line-height:1.1; font-weight:500; letter-spacing:-.015em; }
.h1--xl{ font-size:var(--fs-h1-xl); }
.h2{ color:var(--ink); margin:0 0 24px; font-size:var(--fs-h2); line-height:1.14; font-weight:500; letter-spacing:-.015em; }
.h2--lg{ font-size:var(--fs-h2-lg); line-height:1.12; }
.h2--sm{ font-size:var(--fs-h2-sm); }
.lead{ margin:0; font-size:clamp(17px, 2vw, 20px); }   /* colour is set by .hero .lead */
.lead--lg{ font-size:clamp(18px, 2.2vw, 21px); }
.p{ margin:0 0 16px; font-size:var(--fs-body); line-height:1.7; color:var(--body); }
.p:last-child{ margin-bottom:0; }
.p--sm{ font-size:var(--fs-sm); line-height:1.7; }
/* A key phrase inside running text (29 Sep, Eva): bold ink, one or two per
   section at most. Never red, which on this site means a link. */
.p strong{ font-weight:600; color:var(--ink); }

/* No one-word last lines (28 Sep design review). balance evens out the lines
   of short blocks; pretty keeps a lone word off the end of a paragraph.
   Browsers that do not know text-wrap ignore it and wrap as before. */
.h1,.h2,.column h3,.card__title,.svc-acc__title,.faq__q h3,.tl__title,
.person .name,.member__name,.band p,.lead{ text-wrap:balance; }
.p,.svc-acc__lead,.faq__q > p,.testimonial__quote{ text-wrap:pretty; }

/* Subheads inside a running text column (the privacy policy): they belong to
   the text below them, so more space above than below, and a size that sits
   under the page's h1 rather than competing with it. */
.with-head > div:not(.section-head) > .h2{
  font-size:var(--fs-h3); font-weight:600; letter-spacing:-.01em; margin:48px 0 12px;
}
.with-head > div:not(.section-head) > .h2:first-child{ margin-top:0; }
.measure{ max-width:560px; }
.measure-wide{ max-width:640px; }

/* Standard gap between a paragraph and the button/link that follows it.
   Replaces the per-page margin-bottom overrides this site used to carry. */
.p + .btn,
.p + .link-arrow,
.p + .chips,
.p + .callout{ margin-top:16px; }

/* accent bar under CTA / hero headlines */
.rule{ width:56px; height:4px; background:var(--red-accent); }
.rule--hero{ background:var(--red-accent); margin-bottom:24px; }
.rule--cta{ margin:0 auto 28px; }

/* A German compound can be wider than the column it sits in.
   "Datenschutzerklärung" is one unbreakable 20-character word, about 570px
   at the .h1 ceiling of 56px; the heading column in .with-head is 380px, so
   it ran over the gap and into the paragraphs. Hyphenation lets the browser
   break it where German breaks it; overflow-wrap is the fallback if the
   browser has no German dictionary. Scoped to [lang="de"] — English and
   Czech headings wrap on their spaces and are left alone. */
[lang="de"] .with-head > .section-head .h1{
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word;
}

/* ---- 5. Navigation ----------------------------------------------------
   Brand left · public-page links next · flexible space · account controls
   right. The fixed logo-to-links spacer keeps Home distinct from the
   wordmark, while the page links retain one consistent, smaller gap. */
.nav{
  display:grid; grid-template-columns:auto 56px auto minmax(32px,1fr) auto; align-items:center;
  gap:0; padding:18px var(--pad-x); border-bottom:1px solid var(--line); background:var(--bg);
}
.nav__logo{ display:inline-block; text-decoration:none; font-size:var(--fs-ui); font-weight:600; color:var(--ink); }
/* Heights are scoped to the wordmark CLASS, never to a bare img: a bare
   `.nav__logo img` beats `.nav__logo-mark` on specificity and would stop the
   mark ever being square. The SVG is cropped to the artwork with no padding,
   so 33px here renders exactly the same size as the old 44px PNG did. */
.nav__logo{ display:flex; align-items:center; }
/* Desktop 46px (28 Sep, Eva). object-fit keeps the proportions when a
   long German menu leaves the grid less room than the logo wants: the
   logo then shrinks as a whole instead of being squeezed sideways. */
.nav__logo-wordmark{ height:46px; width:auto; object-fit:contain; object-position:left center; }
.nav__logo-mark{ display:none; width:40px; height:40px; flex:0 0 auto; }
/* On desktop, .nav__menu is transparent so its children participate in
   the parent grid's middle and right columns. On mobile it becomes the
   dropdown panel (rules in section 23). */
.nav__menu{ display:contents; }
.nav__links{ grid-column:3; display:flex; justify-content:flex-start; gap:24px; font-size:var(--fs-ui); }
.nav__links a{ position:relative; color:var(--ink); text-decoration:none; white-space:nowrap; }
.nav__links a:hover{ color:var(--red-accent); }
.nav__links a.is-active{
  color:var(--red-accent); font-weight:600;
}
/* The bar marks the current page and nothing else — no hover state, no
   transition. Colour and weight cannot carry it alone: .nav__login is already
   red and bold, so without the bar two items look identical on every page but
   Contact. Keep content/position/background here: the mobile rule in section
   23 reuses this pseudo-element and only overrides its geometry. */
.nav__links a.is-active::after{
  content:""; position:absolute; right:0; bottom:-8px; left:0; height:2px;
  background:var(--red-accent);
}
.nav__right{ grid-column:5; display:flex; align-items:center; gap:24px; justify-content:flex-end; }
.nav__login{ color:var(--red-deep); text-decoration:none; font-size:var(--fs-ui); font-weight:700; }
.nav__links .nav__login{ color:var(--red-deep); font-size:inherit; }
.nav__login:hover{ color:var(--red-accent); }
.lang{ display:flex; gap:10px; font-size:var(--fs-meta); }
.lang a{ color:var(--faint); text-decoration:none; padding:10px 6px; }   /* thumb-sized */
.lang a.is-active{ color:var(--red-accent); font-weight:600; }

/* Menu button — hidden on desktop, shown below 1180px (section 23) */
.nav__toggle{
  display:none; align-items:center; gap:10px; margin-left:auto; min-height:44px;
  background:none; border:1px solid var(--line); padding:9px 14px;
  font-family:inherit; font-size:var(--fs-meta); font-weight:600; color:var(--ink); cursor:pointer;
}
.nav__toggle:hover{ border-color:var(--red-accent); color:var(--red-accent); }
.nav__toggle-icon{ display:inline-block; width:18px; }
.nav__toggle-icon span{ display:block; height:2px; background:currentColor; }
.nav__toggle-icon span + span{ margin-top:4px; }

/* ---- 6. Buttons -------------------------------------------------------
   Deep-red surface hovers TO lighter red-accent — the two reds form
   a hover pair. Do not add darker shades. */
.btn{
  display:inline-block; text-decoration:none; font-size:var(--fs-ui); font-weight:600;
  padding:14px 30px; white-space:nowrap;
  /* A real <button> (the form's Send) otherwise keeps the browser's own font,
     line-height and 2px border. These make it match the link buttons. */
  font-family:inherit; line-height:inherit; border:0; border-radius:0;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.btn--sm{ font-size:var(--fs-meta); padding:12px 24px; }   /* 45px tall: brief's 44px tap minimum */
.btn--lg{ font-size:var(--fs-ui); padding:13px 30px; }
.btn--solid{ background:var(--red-deep); color:var(--white); }
.btn--solid:hover{ background:var(--red-accent); color:var(--white); }
.link-arrow{ display:inline-block; color:var(--red-accent); text-decoration:none; font-size:var(--fs-ui); font-weight:600; }

/* ---- 7. Hero ---------------------------------------------------------- */
.hero{
  position:relative;
  /* min-height, not height: on a phone in landscape the viewport is ~375px
     tall, and a fixed 520px hero pushed the headline below the fold with
     nothing to indicate it was there. min() caps it to the screen. */
  min-height:min(520px, 88dvh);
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);   /* dark while the photo loads (29 Sep): the white headline stays readable */
}
.hero--tall{ min-height:min(640px, 92dvh); }
.hero__ph{
  position:absolute; inset:0;
  background-color:var(--ink);
  background-image:repeating-linear-gradient(45deg,#EDEAE7 0 22px,#E6E2DE 22px 44px);
}
/* Home hero video: sits above .hero__ph and below the scrim by source order.
   No <source> is set in the HTML; script.js adds one only above the phone
   breakpoint, so on phones the poster shows and no video file is fetched. */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Scrim: keeps white hero text readable over any photograph or video frame. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(20,16,15,.78) 0%,
    rgba(20,16,15,.55) 0%,
    rgba(20,16,15,.15) 70%,
    rgba(20,16,15,0)  100%);
}
/* Home only: its video and first frame are bright rooftops and interiors, so
   the lower half is shaded a little more than on the other heroes (29 Sep). */
.hero--tall::after{
  background:linear-gradient(to top,
    rgba(20,16,15,.72) 0%,
    rgba(20,16,15,.45) 40%,
    rgba(20,16,15,.12) 75%,
    rgba(20,16,15,0)  100%);
}
.hero__inner{
  /* in normal flow now, so the hero can grow with its content;
     horizontal padding comes from section 24 */
  position:relative; z-index:2; width:100%; padding-block:0 56px;
}
.hero .h1{ color:var(--white); max-width:820px; }
.hero .lead{ color:rgba(255,255,255,.95); max-width:640px; }
/* the eyebrow sits over photography, so it goes white rather than carmine */
.hero .eyebrow{ color:rgba(255,255,255,.9); margin-bottom:16px; }

/* ---- 8. Placeholders (photos stripped to empty boxes) -----------------
   Backgrounds are split (colour + image), NOT shorthand, so any .img--*
   class layered on top can override just the image slot and reveal a
   real photograph. If the .img--* URL 404s, the stripes stay visible. */
.photo{
  background-color:#EDEAE7;
  background-image:repeating-linear-gradient(45deg,#EDEAE7 0 22px,#E6E2DE 22px 44px);
  overflow:hidden;
}
/* Shapes, not fixed heights: a px height means the crop changes every time
   the column does. aspect-ratio holds the shape at any width, and because
   every one of these is background-size:cover, changing the ratio re-crops
   the photo rather than distorting it — safe to experiment with. */
.photo--hero{ aspect-ratio:3/2; }   /* hero  */
.photo--wide{ aspect-ratio:4/3; }   /* feature rows    */
.photo--card{ aspect-ratio:3/2; }   /* card grids      */
/* labelled placeholders for assets the client will supply */
.ph{
  display:flex; align-items:center; justify-content:center;
  background-color:var(--placeholder-a);
  background-image:repeating-linear-gradient(45deg,var(--placeholder-a) 0 14px,var(--placeholder-b) 14px 28px);
}
.ph span{
  font-family:var(--mono); font-size:var(--fs-label); color:#6F6764; background:var(--bg);
  padding:6px 12px; border:1px solid #E2DEDC; text-align:center;
}
/* Hide temporary labels where a real or stock image is already assigned. */
.ph.img--who-we-are span,
.ph.img--prague-building span,
.ph.img--firm span{ display:none; }
/* Same two ratios as the real photos: feature rows are 4:3 everywhere,
   portraits are 4:5 everywhere, so a person is the same shape on every
   page they appear on. */
.ph--wide{ aspect-ratio:4/3; }       /* feature rows     */
.ph--tall{ aspect-ratio:4/5; }       /* person portraits and img who-we-are.jpg */

/* Photographs that carry meaning (people, portfolio) are real <img> tags,
   so they have alt text and can be indexed. The box keeps its ratio and
   stripes; the image fills and crops it the way background-size:cover does. */
.photo > img,
.ph > img{ display:block; width:100%; height:100%; object-fit:cover; }
.person .ph > img{ object-position:center top; }

/* Real-image bindings — one class per placeholder position.
   KEEP THIS BLOCK LAST IN SECTION 8. These win over .photo / .ph on source
   order alone (same specificity). A new .photo--* rule added below here
   would silently hide every photograph on the site.
   Each sets background-image. If the file exists in assets/images/, it
   covers the striped placeholder. If the file is missing (404), the
   stripes show through — graceful fallback while photography arrives.
   The label span (.ph span) also stays visible until the file loads;
   it's harmless once a photo is in place because a solid JPG covers it. */
.img--hero-home     { background-image:url('../assets/images/hero-home-video.jpg'); background-image:image-set(url('../assets/images/hero-home-video.webp') type('image/webp'), url('../assets/images/hero-home-video.jpg') type('image/jpeg')); background-size:cover; background-position:center; }
.img--hero-pm       { background-image:url('../assets/images/hero-pm.jpg'); background-image:image-set(url('../assets/images/hero-pm.webp') type('image/webp'), url('../assets/images/hero-pm.jpg') type('image/jpeg')); background-size:cover; background-position:center; }
.img--hero-re       { background-image:url('../assets/images/hero-re.jpg'); background-image:image-set(url('../assets/images/hero-re.webp') type('image/webp'), url('../assets/images/hero-re.jpg') type('image/jpeg')); background-size:cover; background-position:center; }
.img--hero-about    { background-image:url('../assets/images/hero-about.jpg'); background-image:image-set(url('../assets/images/hero-about.webp') type('image/webp'), url('../assets/images/hero-about.jpg') type('image/jpeg')); background-size:cover; background-position:center; }
.img--hero-contact  { background-image:url('../assets/images/hero-contact.jpg'); background-image:image-set(url('../assets/images/hero-contact.webp') type('image/webp'), url('../assets/images/hero-contact.jpg') type('image/jpeg')); background-size:cover; background-position:center; }
.img--firm          { background-image:url('../assets/images/firm.jpg');          background-size:cover; background-position:center; }
.img--who-we-are    { background-image:url('../assets/images/who-we-are.jpg');    background-size:cover; background-position:center; }
.img--pm-feature-home { background-image:url('../assets/images/pm-feature-home.jpg'); background-size:cover; background-position:center; }
.img--re-feature-home { background-image:url('../assets/images/re-feature-home.jpg'); background-size:cover; background-position:center; }
/* The two Home feature photos are toned down a little (29 Sep, Eva): they
   sit either side of the red band and read calmer, less "stock". Files untouched. */
.img--pm-feature-home,
.img--re-feature-home{ filter:saturate(.78) contrast(.97); }
.img--prague-building{ background-image:url('../assets/images/prague-building.jpg'); background-size:cover; background-position:center; }

/* Association marks — logos come from the organisations themselves.
   Contained (not cover) since the mark should sit inside the square with
   breathing space, not bleed to the edges. The supplied JPGs were
   black on white; the PNGs used here are the same marks with the white
   made transparent (29 Sep), so they sit on any background. */
.img--fiabci        { background-image:url('../assets/images/fiabci.png');       background-size:contain; background-position:center; background-repeat:no-repeat; }
.img--ark-cr        { background-image:url('../assets/images/ark-cr.png');       background-size:contain; background-position:center; background-repeat:no-repeat; }

/* ---- 10. Cards ------------------------------------------------------- */
.card{ text-decoration:none; color:var(--ink); display:block; }
.card__title{ font-size:var(--fs-sub); font-weight:600; margin:18px 0 6px; }
.card__meta{ font-size:var(--fs-meta); color:var(--muted); }
.card__meta b{ color:var(--red-accent); font-weight:400; }

/* ---- 11. Numbers ------------------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.stat__n{ font-size:clamp(38px, 4.4vw, 52px); font-weight:500; color:var(--red-accent); letter-spacing:-.02em; }
.stat__n sup{ font-size:.5em; }
.stat__label{ font-size:var(--fs-meta); color:var(--muted); margin-top:6px; line-height:1.5; }

/* Container for the accordion. No styling of its own — it exists as the
   JS hook for data-accordion="single" and as the thing the items sit in. */
.svc-acc{ display:block; }

/* ---- 12. Services accordion -------------------------------------------
   Collapsed row: real four-column grid.
     [number] [title] [teaser] [toggle]
   Each column holds its content strictly — the teaser never wraps
   underneath the title, because it lives in its own column. It is
   left-aligned: every other left edge on the page is true, and a
   ragged left edge is the one the eye returns to on each new line.
   Expanded body uses the same four columns so lead + list sit under
   the title/teaser columns respectively. */
.svc-acc__item{ border-bottom:1px solid var(--line); }
.svc-acc__item:last-child{ border-bottom:none; }   /* no border below last item */

.svc-acc__head{
  display:grid; grid-template-columns:56px minmax(220px, 1fr) 2fr 16px;
  gap:32px; align-items:baseline;
  padding:26px 0; cursor:pointer; list-style:none;
}
.svc-acc__head::-webkit-details-marker{ display:none; }
.svc-acc__num{
  font-size:var(--fs-meta); font-weight:600; color:var(--red-accent);
  font-variant-numeric:tabular-nums;
}
.svc-acc__content{ /* wraps title only, kept for backwards-compatible markup */
  display:contents;
}
.svc-acc__title{
  font-size:var(--fs-h3); font-weight:600; letter-spacing:-.005em; color:var(--ink);
  grid-column:2;
}
.svc-acc__teaser{
  font-size:var(--fs-sm); line-height:1.55; color:var(--body);
  grid-column:3;
}
.svc-acc__head:hover .svc-acc__title{ color:var(--red-accent); }

/* +/− indicator, drawn in CSS */
.svc-acc__head::after{
  /* On the first line of the title, like the FAQ icon: 10px = (36px line
     of the 24px title - 16px icon) / 2. Phones: 7px, set in section 23. */
  content:""; align-self:start; margin-top:10px; width:16px; height:16px;
  background:
    linear-gradient(var(--red-accent),var(--red-accent)) center/16px 2px no-repeat,
    linear-gradient(var(--red-accent),var(--red-accent)) center/2px 16px no-repeat;
}
.svc-acc__item[open] .svc-acc__head::after{
  background:linear-gradient(var(--red-accent),var(--red-accent)) center/16px 2px no-repeat;
}

/* Expanded body: same four columns as the head. Lead sits under the
   title column, list under the teaser column, list left-aligned so
   bullets read cleanly (unlike the right-aligned teaser above). */
.svc-acc__body{
  display:grid; grid-template-columns:56px minmax(220px, 1fr) 2fr 16px;
  grid-template-rows:minmax(0, 0fr); gap:32px; padding:0;
  opacity:0; overflow:hidden;
  transition:grid-template-rows .28s ease, padding .28s ease, opacity .2s ease;
}
.svc-acc__inner{
  grid-column:2 / 4;
  display:grid; grid-template-columns:1fr 2fr; gap:32px; min-height:0; overflow:hidden;
}
.svc-acc__item[open] .svc-acc__body{ grid-template-rows:minmax(0, 1fr); padding:8px 0 36px; opacity:1; }
/* Wide variant: single column spanning the whole content area, used when
   an accordion item has only a lead paragraph and no bullet list. */
.svc-acc__inner--wide{ grid-template-columns:1fr; }
.svc-acc__inner--wide .svc-acc__lead{ max-width:760px; }
.svc-acc__inner--right .svc-acc__lead{ grid-column:2; }
.svc-acc__lead{ margin:0; font-size:var(--fs-sm); line-height:1.7; color:var(--body); }
.svc-acc__list{ display:flex; flex-direction:column; gap:10px; }
.svc-acc__list li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline;
  font-size:var(--fs-meta); line-height:1.6; color:var(--body);
}
.svc-acc__list li::before{
  content:""; display:block; width:5px; height:5px; border-radius:50%;
  background:var(--red-accent); transform:translateY(-2px);
}

/* ---- 13. Column set ---------------------------------------------------
   ONE component for every set of parallel items: About values, Real
   Estate services, both process blocks. Replaces .value, .svc-col and
   .col-accent, which were three names for one appearance.

   Carmine hairline above each column. A NUMBER ONLY WHERE THE ORDER IS
   REAL — process steps are a sequence and earn theirs; a menu of three
   services is a choice and does not. */
.column{ border-top:3px solid var(--red-accent); padding-top:24px; }
.column h3{ color:var(--ink); margin:0 0 10px; font-size:var(--fs-h3); font-weight:600; letter-spacing:-.01em; }
.column__sub{
  font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin:0 0 16px;
}
.column .p{ margin:0; }
.column .p + .link-arrow{ margin-top:16px; }

/* Steps: number as typography, no circle, no rule above. */
.columns--steps .column{ border-top:none; padding-top:0; }
.column__n{
  display:block; margin:0 0 18px;
  font-size:48px; font-weight:400; line-height:1;
  color:var(--red-accent); letter-spacing:-.02em;
}
.columns--steps .column h3{ font-size:var(--fs-sub); }

/* ---- 14. Callout ------------------------------------------------------ */
.callout{ border-left:3px solid var(--red-accent); padding:16px 24px; background:var(--panel); font-size:var(--fs-sm); line-height:1.7; color:var(--muted); max-width:560px; }
.callout b{ color:var(--ink); }


/* Testimonials — three-column band of client quotes. Each column starts
   with a large red opening-quote glyph, then italic quote body, then
   role (uppercase, ink) and a meta line (italic faint) beneath. */
.testimonials{ display:grid; grid-template-columns:repeat(3, 1fr); gap:56px; }
.testimonial{ font-family:var(--sans); }
.testimonial::before{
  content:"“"; display:block;
  font-size:64px; line-height:.6; color:var(--red-accent);
  margin-bottom:20px; font-weight:400;
}
.testimonial__quote{
  margin:0 0 24px; font-size:var(--fs-sm); line-height:1.6; font-style:italic;
  color:var(--body);
}
.testimonial__role{
  font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); font-weight:700; margin:0 0 6px;
}
.testimonial__meta{
  font-size:var(--fs-meta); font-style:italic; color:var(--faint); margin:0;
}

/* ---- 15. Chips / tags ------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid #E2DEDC; padding:6px 14px; }
.chip--lg{ padding:7px 16px; }

/* ---- 16. Person card -------------------------------------------------- */
/* In a feature row the other column is body copy, which starts at the top;
   a centred portrait beside it floats. Person cards align to the top. */
.feature > .person{ align-self:start; }
.person .ph{ margin-bottom:16px; }
/* 20px, not the 24px card heading: the name is a caption to the portrait,
   not a heading competing with the section's h2 (28 Sep, Eva). */
.person .name{ color:var(--ink); font-size:var(--fs-sub); line-height:1.3; font-weight:600; margin-bottom:6px; }
.person .role{ font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--red-accent); font-weight:700; margin-bottom:16px; }

/* ---- 17. Timeline ----------------------------------------------------- */
.tl{ display:grid; grid-template-columns:120px 1fr; gap:32px; border-top:1px solid var(--line); padding:26px 0; }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl__year{ font-size:var(--fs-sub); font-weight:600; color:var(--red-accent); }
.tl__title{ color:var(--ink); font-size:var(--fs-body); font-weight:600; margin-bottom:6px; }

/* ---- 18. FAQ (accordion) ----------------------------------------------
   Built on native <details>/<summary>: each item opens and closes on its own,
   works with keyboard and screen readers, and needs no JavaScript at all. */
.faq{ display:flex; flex-direction:column; }
.faq__q{ border-top:1px solid var(--line); }
.faq__q:first-child{ border-top:none; }
.faq__q:last-child{ border-bottom:none; }

.faq__q summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px;
  padding:24px 0; cursor:pointer; list-style:none;
}
.faq__q summary::-webkit-details-marker{ display:none; }  /* Safari's default triangle */
.faq__q summary:hover h3{ color:var(--red-accent); }
.faq__q h3{ color:var(--ink); margin:0; font-size:var(--fs-body); font-weight:600; }

/* the +/− indicator, drawn in CSS so there's no icon file to maintain */
.faq__q summary::after{
  content:""; flex:0 0 14px; width:14px; height:14px; margin-top:5px;
  background:
    linear-gradient(var(--red-accent),var(--red-accent)) center/14px 2px no-repeat,
    linear-gradient(var(--red-accent),var(--red-accent)) center/2px 14px no-repeat;
}
.faq__q[open] summary::after{
  background:linear-gradient(var(--red-accent),var(--red-accent)) center/14px 2px no-repeat;
}
.faq__q > p{
  display:block; max-height:0; margin:0; padding:0; overflow:hidden; opacity:0;
  font-size:var(--fs-sm); line-height:1.7; color:var(--muted); max-width:640px;
  transition:max-height .28s ease, padding .28s ease, opacity .2s ease;
}
/* The cap must clear the LONGEST answer at the NARROWEST width, or the tail
   of the text is silently cut off with no indication. At 360px wide, a
   320-character answer runs to roughly 500px; 1200px leaves generous room.
   Closed state stays at 0, so this only affects an open panel. */
.faq__q[open] > p{ max-height:1200px; padding:0 0 26px; opacity:1; }

/* ---- 19. Membership marks ---------------------------------------------
   One treatment, on About only, sitting at the foot of the evidence
   zone. A quiet left-aligned strip rather than a centred section of its
   own — the credential is worth stating once, not four times. */
.members{ display:flex; flex-wrap:wrap; gap:56px; }
.member{ display:flex; align-items:center; gap:22px; max-width:430px; }
.member .logo{
  flex:0 0 auto; width:84px; height:84px;
  background-color:var(--placeholder-a);
  background-image:repeating-linear-gradient(45deg,var(--placeholder-a) 0 14px,var(--placeholder-b) 14px 28px);
  display:flex; align-items:center; justify-content:center;
}
.member .logo.img--fiabci{
  background-image:url('../assets/images/fiabci.png');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.member .logo.img--ark-cr{
  background-image:url('../assets/images/ark-cr.png');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.member .logo.img--fiabci span,
.member .logo.img--ark-cr span{ display:none; }
/* The marks are transparent PNGs made from the supplied black-on-white JPGs
   (29 Sep): black ink, no background, so they sit straight on the warm panel.
   This replaced mix-blend-mode:multiply, whose blended layer showed thin grey
   seams on Macs that shifted as the window was resized. No box colour. */
.member .logo.img--fiabci,
.member .logo.img--ark-cr{ background-color:transparent; }
.member .logo span{ font-family:var(--mono); font-size:var(--fs-label); color:#6F6764; }
.member__text{ min-width:0; }
.member__name{ color:var(--ink); display:block; font-size:var(--fs-ui); font-weight:600; margin-bottom:5px; }
.member__desc{ display:block; font-size:var(--fs-meta); line-height:1.6; color:var(--faint); }

/* ---- 20. Bands & CTA -------------------------------------------------- */
/* The statement band: full-bleed carmine, ONE sentence, once per page,
   at roughly the two-thirds mark. No heading, no button, no columns —
   this is the loudest surface on the site and it holds one line. */
.band{
  background:var(--red-deep); color:var(--white);
  padding:44px var(--pad-x); text-align:center;
}
.band p{ margin:0 auto; font-size:clamp(17px, 2vw, 20px); color:var(--white); }
.band b{ font-weight:600; }

.cta{ padding-block:96px; text-align:center; }
/* After a white section (the FAQs) the section's own bottom padding is the
   gap; the red rule marks the start of the CTA (28 Sep, Eva: half padding was
   barely noticeable). After a panel section (Home, About) nothing changes. */
.section:not(.section--panel) + .cta{ padding-top:0; }
.cta .p{ margin:0 auto 32px; max-width:620px; }
.cta__contacts{ display:flex; justify-content:center; flex-wrap:wrap; gap:40px; margin-bottom:36px; font-size:var(--fs-sub); }
.cta__contacts a{ text-decoration:none; font-weight:600; }

/* ---- 21. Footer -------------------------------------------------------
   Warm panel background (--panel). It used to be kept out of red to spare a
   low-quality raster logo from artefacting against solid carmine; the logo is
   now clean vector on transparency, so a --red-deep footer is viable again if
   the design ever calls for it.
   Text follows the standard on-warm tone: muted for body, ink for
   primary, deep-red bold for the Client login link. */
.footer{ background:var(--panel); padding:72px var(--pad-x) 0; }
.footer__cols{
  display:grid; grid-template-columns:1.7fr 1fr 1.2fr; gap:56px; padding-bottom:56px;
}
.footer__logo{ display:inline-block; text-decoration:none; font-size:var(--fs-ui); font-weight:600; color:var(--ink); }
.footer__logo-wordmark{ display:inline-block; height:39px; width:auto; }
/* The mark needs no disc of its own — the SVG already contains one. Painting
   a --ink circle underneath it produced a ring around a black disc.
   flex:0 0 auto because at ≤640 this sits in a flex row beside the
   description, which would otherwise squash it into an ellipse. */
.footer__logo-mark{
  display:none;                            /* shown at ≤640px */
  width:44px; height:44px; flex:0 0 auto;
}
.footer__about{ margin:22px 0 0; font-size:var(--fs-ui); line-height:1.7; color:var(--muted); max-width:340px; }
/* The "Contact" title is read by screen readers but not shown (28 Sep, Eva):
   the nav column beside it has no title, so the two columns now start on the
   same line. Same pattern as .visually-hidden in section 2; the HTML is
   unchanged in all 24 pages. */
.footer__title{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.footer__list{ display:flex; flex-direction:column; gap:11px; font-size:var(--fs-ui); }
.footer__list a{ color:var(--muted); text-decoration:none; }
.footer__list a:hover{ color:var(--red-accent); }
/* Client login stays deep-red and bold on warm — the two-red rule. */
.footer__list a.footer__login{ color:var(--red-deep); font-weight:700; }
.footer__list a.footer__login:hover{ color:var(--red-accent); }
.footer__addr{ font-style:normal; font-size:var(--fs-ui); line-height:1.8; color:var(--muted); }
.footer__contact{ display:flex; flex-direction:column; gap:6px; margin-top:16px; font-size:var(--fs-ui); }
.footer__contact a{ color:var(--red-deep); text-decoration:none; font-weight:600; }
.footer__contact a:hover{ color:var(--red-accent); }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  border-top:1px solid var(--line); padding:24px 0;
}
.footer__copy{ margin:0; font-size:var(--fs-meta); color:var(--faint); }
.footer__legal{ display:flex; align-items:center; gap:28px; }
.footer__legal > a{ font-size:var(--fs-meta); color:var(--faint); text-decoration:none; }
.footer__legal > a:hover{ color:var(--red-accent); }

/* ---- 22. Utilities ----------------------------------------------------
   None. Every block now has a component class that carries its own
   spacing; a utility here would be a spacing decision made twice. */

/* =========================================================================
   23. Responsive
   Three breakpoints, largest first:
     1180px — laptop: tighter padding and gaps
      960px — tablet: nav collapses, two-column layouts stack
      640px — phone: everything single or two column, type steps down
   One documented exception lives further down: a 360px query that only pulls
   the nav's horizontal padding to 8px, so the logo and the menu button still
   fit on the narrowest phones. It sets no type and no layout. Nothing else
   may add a fourth breakpoint.
   ========================================================================= */

@media (max-width:1180px){
  :root{ --pad-x:40px; }          /* --section-y is fluid — see section 1 */
  .feature{ gap:48px; }
  /* Feature rows with a photo stack from 1180 down (28 Sep, Eva): beside a
     long text column the photo floated mid-row on upright iPads. Text and
     photo share one 640px column and the photo goes 16:9 (4:3 again on
     phones, in the 640 block). Browsers without :has() keep the row. */
  .feature:has(> .photo--wide, > .ph--wide){ grid-template-columns:1fr; align-items:start; }
  .feature:has(> .photo--wide, > .ph--wide) > div{ max-width:640px; }
  .feature > .photo--wide, .feature > .ph--wide{ aspect-ratio:16/9; }
  .pair{ gap:40px; }
  .with-head{ gap:48px; }
  /* Services accordion on iPads/small laptops: the title column was 220px and
     titles broke onto three lines. The 960 and 640 blocks override this. */
  .svc-acc__head, .svc-acc__body{ grid-template-columns:40px minmax(260px,1fr) 1.6fr 16px; gap:24px; }
  .columns{ gap:32px; }
  .columns--4{ --cols:2; }        /* 2×2, never 3 + 1 */
  /* Figures step 4→2 on the same breakpoint as .columns--4, for the same
     reason: at four across, a value as wide as "100,000+" no longer fits
     its column and either clips or forces horizontal scroll. */
  .stats{ grid-template-columns:1fr 1fr; gap:36px 40px; }
  .members{ gap:40px; }
  /* Column gap only. With flex-wrap, a row gap also sat under the closed
     (zero-height) menu row and added 20px of white below the logo on
     tablets and phones (28 Sep). The open menu gets that space back as
     top padding instead. */
  .nav{ gap:0 20px; }
  .nav__links{ gap:24px; }
  .nav__right{ gap:16px; }

  /* --- navigation collapses to a menu button, 1180px and below ---
     Two-column top row: logo left, menu button right, both same height.
     The dropdown panel appears below when open. Defined once here, for the
     whole range: it used to be split across a 961–1180 block and a max-960
     block that were line-for-line identical, plus a third copy further down
     that silently overrode the display property in both. */
  .nav{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:14px var(--pad-x); }
  .nav__logo-wordmark{ height:33px; }
  .nav__toggle{ display:inline-flex; margin-left:0; }
  .nav__menu{
    display:flex; width:100%; flex:1 0 100%;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; max-height:0; padding:0; overflow:hidden; opacity:0;
    visibility:hidden; pointer-events:none;
    transition:max-height .32s ease, padding .32s ease, opacity .2s ease;
  }
  .nav__menu.is-open{
    max-height:620px; padding:28px 0 4px; opacity:1;
    visibility:visible; pointer-events:auto;
  }
  .nav__links{ flex-direction:column; gap:0; font-size:var(--fs-sm); justify-content:flex-start; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); }

  /* The current page cannot be marked by colour and weight alone here:
     .nav__login is already red and bold by design, so on any page other than
     Contact two items would look identical. The desktop underline is turned
     re-used on its side as a left-edge bar — same idea, same colour, rotated:
     the current page gets a red rule, below the text on desktop and beside it
     on mobile. */
  .nav__links a.is-active{
    border-bottom:1px solid var(--line); padding-bottom:14px;
    padding-left:14px; text-decoration:none;
  }
  .nav__links a.is-active::after{
    top:10px; right:auto; bottom:10px; left:0; width:2px; height:auto;
  }
  .nav__right{
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:18px; padding:22px 0 8px;
  }

  /* Footer: one introductory row, then navigation and contact as two
     deliberate columns. This starts at iPad width rather than waiting for
     the main page-layout breakpoint. */
  .footer{ padding-top:56px; }
  .footer__cols{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "intro intro"
      "nav   contact";
    column-gap:clamp(64px, 10vw, 120px);
    row-gap:40px;
    padding-bottom:48px;
  }
  .footer__cols > div:first-child{
    grid-area:intro;
    display:flex;
    align-items:flex-start;   /* logo top on the text's first line */
    gap:32px;
  }
  .footer__cols > nav.footer__list{ grid-area:nav; }
  .footer__cols > div:last-child{ grid-area:contact; }
  /* 7px = half-leading + ascender gap of the 15px/1.7 text beside it */
  .footer__cols > div:first-child > .footer__logo{ flex:0 0 auto; margin-top:7px; }
  .footer__logo-wordmark{ display:inline-block; height:39px; }
  .footer__logo-mark{ display:none; }
  .footer__about{ margin:0; max-width:400px; }
}

/* The complete desktop navigation needs more width than an iPad can give it
   once the Client login button is present. Collapse only the navigation here;
   the page layouts keep their desktop treatment until the 960px breakpoint. */
@media (max-width:960px){
  /* --- layouts stack --- */
  .feature, .pair, .with-head{ grid-template-columns:1fr; gap:40px; align-items:start; }
  /* A stacked portrait at full width is a whole screen of face. */
  .feature > .person{ max-width:440px; }
  /* Sidebar heads (FAQ, timeline) sit ~40px above their content, like every
     other section head, instead of 40px gap + the rows' own padding. */
  .with-head{ row-gap:16px; }
  .columns{ gap:36px; }
  .columns--3{ --cols:1; }        /* 3 or 1 — a 2 + 1 orphan is worse */
  .testimonials{ grid-template-columns:1fr; gap:36px; }

  /* services accordion at tablet width: teaser hides so the title has
     room, expanded body drops to single column */
  .svc-acc__head{ grid-template-columns:44px 1fr 16px; gap:20px; }
  .svc-acc__title{ grid-column:2; }
  .svc-acc__teaser{ display:none; }
  .svc-acc__body{ grid-template-columns:44px 1fr 16px; gap:20px; padding:0; }
  .svc-acc__item[open] .svc-acc__body{ padding:8px 0 28px; }
  .svc-acc__inner--right .svc-acc__lead{ grid-column:auto; }
  .svc-acc__inner{ grid-column:2; grid-template-columns:1fr; gap:16px; }
  .section-head{ margin-bottom:40px; }

  /* --- media boxes ---
     Tablets and phones: 380px, Home 420 (28 Sep, Eva, from 440/480 and
     520 before that): 520px was half an upright iPad of sky. */
  .hero{ min-height:min(380px, 88dvh); }
  .hero--tall{ min-height:min(420px, 90dvh); }
}

@media (max-width:640px){
  :root{ --pad-x:20px; --section-y:44px; }

  /* A fixed two-column header keeps the full wordmark and menu control on
     one line. The menu itself still spans both columns when opened. */
  .nav{ display:grid; grid-template-columns:minmax(0, 1fr) auto; }
  .nav__logo{ min-width:0; }
  .nav__toggle{ grid-column:2; justify-self:end; }
  .nav__menu{ grid-column:1 / -1; width:auto; }

  .stats{ grid-template-columns:1fr 1fr; gap:32px 20px; }
  .feature, .pair{ gap:32px; }
  .columns{ gap:32px; }
  .columns--4{ --cols:1; }
  .members{ flex-direction:column; gap:32px; }
  .member{ max-width:none; }
  .tl{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
  .cta{ padding-block:64px; }
  .cta__contacts{ flex-direction:column; gap:12px; font-size:var(--fs-sub); }

  .hero{ min-height:min(380px, 88dvh); }
  .hero--tall{ min-height:min(420px, 90dvh); }
  .hero__inner{ padding-block:0 36px; }
  /* Belt-and-braces to the JS guard in script.js §6: even if the source
     were somehow attached (e.g. window resized past 640 after load), the
     element itself doesn't render on phones, so .hero__ph shows through. */
  .hero__video{ display:none; }
  /* Tablets and desktop show the video's first frame (section 8); phones,
     which never load the video, keep the bridges photo. */
  .img--hero-home{ background-image:url('../assets/images/hero-home.jpg'); background-image:image-set(url('../assets/images/hero-home.webp') type('image/webp'), url('../assets/images/hero-home.jpg') type('image/jpeg')); }
  .column__n{ font-size:40px; margin-bottom:12px; }
  .feature > .photo--wide, .feature > .ph--wide{ aspect-ratio:4/3; }

  .door h2{ margin-top:22px; }
  .btn, .btn--lg{ white-space:normal; }

  /* --- footer mobile: same structure, scaled for the available width --- */
  .footer{ padding-top:44px; padding-bottom:0; }
  .footer__cols{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "intro intro"
      "nav   contact";
    gap:32px 32px;
    padding-bottom:32px;
  }
  .footer__cols > div:first-child{
    grid-area:intro;
    display:flex; align-items:flex-start; gap:20px;
  }
  .footer__cols > nav.footer__list{ grid-area:nav; }
  .footer__cols > div:last-child{ grid-area:contact; }

  .footer__logo-wordmark{ display:none; }
  .footer__logo-mark{ display:block; }
  .footer__cols > div:first-child > .footer__logo{ flex:0 0 auto; margin-top:0; }

  .nav__logo-wordmark{ display:block; height:33px; }
  .nav__logo-mark{ display:none; }
  .footer__about{ margin:0; font-size:var(--fs-meta); line-height:1.6; }   /* was a raw 12–13px */

  .footer__list{ font-size:var(--fs-meta); gap:9px; }
  .footer__addr{ font-size:var(--fs-meta); line-height:1.7; }
  .footer__contact{ margin-top:12px; font-size:var(--fs-meta); }

  .footer__bar{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footer__legal{ gap:20px; }

  .faq__q summary{ gap:20px; }

  /* services accordion on phones: number gone, single content column */
  .svc-acc__head{ grid-template-columns:1fr 14px; gap:14px; padding:18px 0; }
  .svc-acc__num{ display:none; }
  .svc-acc__title{ grid-column:1; font-size:var(--fs-sub); }
  .svc-acc__head::after{ margin-top:7px; }
  .svc-acc__body{ grid-template-columns:1fr; gap:0; padding:0; }
  .svc-acc__item[open] .svc-acc__body{ padding:8px 0 24px; }
  .svc-acc__inner{ grid-column:1; grid-template-columns:1fr; gap:16px; }
}

/* Keep the full wordmark even on narrow phones. The menu label yields to its
   icon, preserving a clean single header row with the control on the right. */
@media (max-width:640px){
  .nav__toggle{ font-size:0; gap:0; }
}

@media (max-width:360px){
  .nav{ padding-inline:8px; }
}

/* =========================================================================
   25. Form  —  THE TENTH BLOCK
   Added deliberately, with a reason, per §5 of the brief: a form is a shape
   none of the nine blocks cover — labelled inputs, a select, a consent
   checkbox and error states. Used on contact.html only.
   ========================================================================= */
.form{ display:grid; gap:26px; max-width:560px; }

.field{ display:grid; gap:9px; }
.field > label{
  font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.field .hint{ font-size:var(--fs-meta); color:var(--faint); margin:0; }
.req{ color:var(--red-accent); }

/* 16px minimum — anything smaller and iOS zooms the page on focus */
.field input,
.field select,
.field textarea{
  font-family:inherit; font-size:var(--fs-sm); line-height:1.5;
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:0;
  padding:14px 16px; width:100%; min-height:52px;
  transition:border-color .15s ease;
}
.field textarea{ min-height:160px; resize:vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:var(--muted); }
/* Focus: the red ring from §2 is too loud on text fields. They show a dark
   border instead, still clearly visible to keyboard users. The checkbox is
   left out on purpose: it has no border, so it keeps the §2 ring. This rule
   must stay ABOVE :user-invalid, so a field with an error stays red. */
.field input:not([type="checkbox"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; border-color:var(--ink); }
/* :user-invalid only flags a field the visitor has actually interacted with,
   so the form never turns red before anyone has typed anything */
.field input:user-invalid,
.field textarea:user-invalid{ border-color:var(--red-accent); }

.field select{
  appearance:none; padding-right:48px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5350' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}

.consent{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.consent input{
  width:20px; height:20px; min-height:0; margin:4px 0 0; padding:0;
  accent-color:var(--red-deep); cursor:pointer;
}
.consent label{
  font-size:var(--fs-meta); line-height:1.6; color:var(--muted);
  text-transform:none; letter-spacing:0; font-weight:400;
}
.consent a{ color:var(--red-accent); }

/* Netlify's honeypot field — hidden from people, visible to bots */
.form__hp{ position:absolute; left:-9999px; }

/* ---- direct contact column, beside the form ---- */
.contact-block{ display:grid; gap:34px; align-content:start; }
.contact-block__row .eyebrow{ margin-bottom:12px; }
.contact-block__row p{ margin:0; }
.contact-block__row a{ color:var(--red-accent); text-decoration:none; }
.contact-block__row a:hover{ color:var(--red-deep); text-decoration:underline; }
.contact-block address{ font-style:normal; line-height:1.7; }

/* ---- thanks.html ---- */
.confirm{ max-width:620px; }
.confirm .h1{ margin-bottom:20px; }
/* rule--cta is centred for the CTA; here the heading is left-aligned. */
.confirm .rule{ margin:0 0 28px; }
.confirm .p{ margin-bottom:20px; }
.confirm__links{ display:flex; flex-wrap:wrap; gap:24px; margin-top:36px; }

/* ---- Back to top -------------------------------------------------------- */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:20;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:var(--bg); color:var(--ink); font:inherit; font-size:22px;
  line-height:1; cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--red-deep); border-color:var(--red-deep); color:var(--white); }
.back-to-top:focus-visible{ outline:2px solid var(--red-accent); outline-offset:3px; }

@media (max-width:640px){
  .back-to-top{ right:16px; bottom:16px; width:40px; height:40px; font-size:20px; }
}

/* =========================================================================
   24. Content width
   Backgrounds stay full-bleed; the content inside them is capped and
   centred. Reads as: "pad by --pad-x, or by whatever it takes to centre a
   --container column — whichever is bigger." Below --container nothing
   changes; above it the content stops stretching to the screen edge.

   This block must stay at the very bottom of the file: it overrides the
   padding shorthands set in section 23.
   ========================================================================= */
.nav,
.section,
.band,
.cta,
.footer,
.hero__inner{
  padding-inline: max(var(--pad-x), calc((100% - var(--container)) / 2));
}

@media (prefers-reduced-motion:no-preference){
  .reveal-on-scroll{
    opacity:0; transform:translateY(16px);
    transition:opacity .42s ease, transform .42s ease;
  }
  .reveal-on-scroll.is-revealed{ opacity:1; transform:translateY(0); }
}
/* Print: sections not yet scrolled into view would otherwise print blank.
   A media type, not a width breakpoint. */
@media print{
  .reveal-on-scroll{ opacity:1; transform:none; transition:none; }
}

@media (prefers-reduced-motion:reduce){
  .nav__menu,
  .svc-acc__body,
  .faq__q > p{ transition:none; }
}