/* Marianna Costa — website production stylesheet
   Black Olive · The Editor hybridised · English master, Estonian-ready */

:root{
  /* darkness */
  --olive:#14170F;        /* primary */
  --olive-deep:#0B0C08;
  --aubergine:#16121A;    /* second darkness — statements & decisions */
  --smoke:#3E4230;
  --stone:#7F8165;        /* APPROVED accessible value. Was #5A5C48 (2.64:1). */
  /* metal */
  --pewter:#8E9089;
  --silver:#A6A69E;
  /* light */
  --oyster:#D9D6C9;
  --bone:#E8E6DC;
  --paper:#EFEEE7;
  --ink:#161810;
  --ink-2:#3B3E30;
  --rule-dark:#2A2D20;
  --rule-light:#CFCDBF;
  --hand:#6E7157;         /* THE DRAWN MARGIN MARK ONLY — a graphic, not text. */
  --hand-text:#666951;    /* Hand wherever it is text. APPROVED accessible value. */

  /* measure — set in ch so Estonian can run 15–20% longer without redesign */
  --measure:56ch;
  --measure-narrow:44ch;
  --margin:96px;
  --max:1440px;
}

*{box-sizing:border-box}
/* The hero wordmark is wider than the viewport by design (see .hero .name).
   Clipping is declared on html AND body so the crop never becomes a sideways scroll. */
html{overflow-x:hidden;max-width:100%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;overflow-x:hidden;max-width:100%;background:var(--olive);color:var(--bone);
     font-family:Spectral,Georgia,serif;font-size:17px;line-height:1.72;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}

/* ---------- type roles ---------- */
.display{font-family:Gloock,Georgia,serif;font-weight:400;letter-spacing:-.008em;line-height:1.02;margin:0;
         overflow-wrap:break-word}
.d-xl{font-size:clamp(64px,7.2vw,104px)}
.d-l {font-size:clamp(44px,4.6vw,64px);line-height:1.06}
.d-m {font-size:clamp(32px,3.2vw,44px);line-height:1.1}
.d-s {font-size:clamp(26px,2.4vw,34px);line-height:1.14}
.body{font-family:Spectral,serif;font-size:17px;line-height:1.72;max-width:min(var(--measure),100%);margin:0 0 18px}
.body:last-child{margin-bottom:0}
.body-narrow{max-width:var(--measure-narrow)}
.lede{font-family:Spectral,serif;font-size:19px;line-height:1.68;max-width:min(var(--measure),100%)}
.em{font-style:italic}
/* function type — Bricolage, tracking 0, sentence case. 15–20% of the page. */
.fn{font-family:'Bricolage Grotesque',system-ui,sans-serif;
    font-variation-settings:'opsz' 14,'wdth' 100,'wght' 450;font-size:15px;letter-spacing:0;line-height:1.6}
.fn-m{font-variation-settings:'opsz' 14,'wdth' 100,'wght' 500}
.fn-s{font-size:13.5px}

/* ---------- surfaces ---------- */
.dark{background:var(--olive);color:var(--bone)}
.dark-2{background:var(--aubergine);color:var(--bone)}
.light{background:var(--paper);color:var(--ink)}
.light-2{background:var(--bone);color:var(--ink)}
.dark .body,.dark-2 .body,.dark .lede,.dark-2 .lede{color:var(--pewter)}
.dark .display,.dark-2 .display{color:var(--paper)}
.light .body,.light-2 .body,.light .lede,.light-2 .lede{color:var(--ink-2)}
.light .display,.light-2 .display{color:var(--ink)}
.dark .fn,.dark-2 .fn{color:var(--pewter)}
.light .fn,.light-2 .fn{color:var(--hand-text)}

section{padding:132px 0}
section.tight{padding:104px 0}

/* ---------- navigation ---------- */
header{position:absolute;top:0;left:0;right:0;z-index:10}
header .wrap{display:flex;justify-content:space-between;align-items:baseline;padding-top:38px}
nav a{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'opsz' 14,'wght' 450;
      font-size:15px;color:var(--pewter);text-decoration:none;margin-left:34px;transition:color .12s}
nav a:hover,nav a[aria-current]{color:var(--bone)}
nav .lang{margin-left:44px;color:var(--stone)}
nav .lang b{color:var(--pewter);font-weight:450}
nav .lang a{margin-left:0;display:inline;color:var(--stone)}
nav .lang a:hover{color:var(--pewter)}
footer .lang-row a{display:inline;margin:0}

/* ---------- hero ---------- */
.hero{height:100vh;          /* fallback */
      height:100svh;        /* iOS Safari: the toolbar makes 100vh taller than the
                               visible viewport, which pushes the qualifier under
                               the browser chrome on first paint */
      min-height:680px;position:relative;overflow:hidden;background:var(--olive)}
.hero .name{position:absolute;left:calc(var(--margin) - 40px);bottom:186px;white-space:nowrap;
            font-size:clamp(120px,19.8vw,290px);line-height:.86;color:var(--paper)}
.hero .qual{position:absolute;left:var(--margin);bottom:74px}
.hero .qual .one{font-family:Spectral;font-size:19px;color:var(--oyster);margin-bottom:10px}
.hero .qual .two{font-family:'Bricolage Grotesque';font-variation-settings:'opsz' 14,'wght' 450;
                 font-size:15px;color:var(--stone);line-height:1.9}
.q-narrow{display:none}   /* the phone wording; the breakpoint swaps them */

/* ---------- links & calls to action ---------- */
.cta{display:inline-block;font-family:Spectral;font-size:19px;color:inherit;text-decoration:none;
     padding-bottom:6px;border-bottom:1px solid currentColor;transition:opacity .12s}
.cta:hover{opacity:.62}
.dark .cta,.dark-2 .cta{color:var(--paper)}
.light .cta,.light-2 .cta{color:var(--ink)}

/* ---------- layout helpers ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start}
.split-wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.offset{padding-left:calc(50% + 0px)}
.stack > * + *{margin-top:26px}
.rule{height:1px;background:var(--rule-light);border:0;margin:0}
.dark .rule,.dark-2 .rule{background:var(--rule-dark)}

/* short statements stay short — never merged into body copy */
.lines{font-family:Spectral;font-size:19px;line-height:1.9;max-width:min(60ch,100%)}
.lines span{display:block}

/* ---------- editorial rows (Our work, Sectors, Approach) ---------- */
.row{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;
     padding:44px 0;border-top:1px solid var(--rule-light)}
.dark .row,.dark-2 .row{border-color:var(--rule-dark)}
.row:last-of-type{border-bottom:1px solid var(--rule-light)}
.dark .row:last-of-type,.dark-2 .row:last-of-type{border-color:var(--rule-dark)}

/* ---------- imagery ---------- */
.figure{position:relative;overflow:hidden}
.figure::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,rgba(0,0,0,.014) 1px 2px)}
.f-full{height:620px}
.f-band{height:420px}
.caption{font-family:'Bricolage Grotesque';font-variation-settings:'opsz' 14,'wght' 450;
         font-size:13.5px;color:var(--stone);margin-top:12px}

/* ---------- photography positions ----------
   Specified slots, not placeholders. Each carries a reference, a subject and a
   crop so the frame can be commissioned and dropped in without redesign. The
   tonal ground stands in for the photograph's value structure only. */
.slot{position:relative;overflow:hidden;background:#0F1209}
.slot::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,.012) 1px 2px);z-index:1}
/* Specs are DEV ONLY. Add class="dev" to <html> to reveal every photography brief
   in situ. They must never be visible in the production build. */
.slot-spec,.slot-tag{display:none}
html.dev .slot-spec{display:block}
html.dev .slot-tag{display:inline-block}
.slot-spec{position:absolute;left:var(--margin);bottom:40px;z-index:2;max-width:min(54ch,72%)}
.slot-spec .no{font-family:Gloock,serif;font-size:32px;line-height:1;color:#5E6149;display:block}
.slot-spec .txt{font-family:Spectral,serif;font-size:19px;line-height:1.5;color:var(--oyster);
                display:block;margin-top:12px}
.slot-spec .meta{font-family:'Bricolage Grotesque',sans-serif;
                 font-variation-settings:'opsz' 14,'wght' 450;font-size:13px;color:#7C7F6C;
                 display:block;margin-top:9px}
.slot-tag{position:absolute;right:var(--margin);top:34px;z-index:2;
          font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'opsz' 14,'wght' 500;
          font-size:12.5px;color:#B9BAA6;background:rgba(11,12,8,.62);
          border:1px solid rgba(185,186,166,.34);padding:5px 11px;letter-spacing:.02em}
@media (max-width:640px){
  .slot-spec{max-width:none;right:var(--margin);bottom:28px}
  .slot-spec .txt{font-size:17px}
  .slot-tag{top:22px}
}

/* ---------- anonymous assignment fragments ----------
   Sector · territory / nature of involvement. No names, no logos, no metrics.
   Reads correctly at two entries and at twenty. */
.evidence{margin-top:56px;border-top:1px solid var(--rule-dark)}
.light .evidence,.light-2 .evidence{border-color:var(--rule-light)}
.ev{display:grid;grid-template-columns:minmax(0,60px) minmax(0,1fr) minmax(0,1.15fr);gap:44px;
    padding:28px 0;border-bottom:1px solid var(--rule-dark);align-items:baseline}
.light .ev,.light-2 .ev{border-color:var(--rule-light)}
.ev .no{font-family:Gloock,serif;font-size:23px;line-height:1;color:var(--stone)}
.ev .what{font-family:Spectral,serif;font-size:20px;line-height:1.4;color:var(--paper)}
.light .ev .what,.light-2 .ev .what{color:var(--ink)}
.ev .role{font-family:'Bricolage Grotesque',sans-serif;
          font-variation-settings:'opsz' 14,'wght' 450;font-size:14px;line-height:1.75;color:var(--pewter)}
.light .ev .role,.light-2 .ev .role{color:var(--hand-text)}
@media (max-width:900px){
  .ev{grid-template-columns:44px minmax(0,1fr);gap:8px 20px;padding:22px 0}
  .ev .role{grid-column:2}
}

/* ---------- direct contact route ---------- */
.direct{margin-top:44px;border-top:1px solid var(--rule-dark);padding-top:28px}
.direct a{font-family:Spectral,serif;font-size:22px;color:var(--paper);text-decoration:none;
          border-bottom:1px solid var(--stone);padding-bottom:5px;transition:border-color .12s}
.direct a:hover{border-color:var(--paper)}

/* ---------- the margin (one per page, drawn not typeset) ---------- */
.marked{position:relative;display:inline-block}
.marked svg{position:absolute;left:0;bottom:-10px;width:100%;height:14px;overflow:visible}

/* ---------- orientation rows (homepage: the three entry points) ---------- */
.row.orient{grid-template-columns:minmax(0,380px) minmax(0,1fr);padding:38px 0;align-items:baseline}
@media (max-width:1024px){.row.orient{grid-template-columns:1fr;gap:12px;padding:30px 0}}

/* ---------- form ---------- */
.form{max-width:min(520px,100%)}
.field{border-bottom:1px solid var(--rule-dark);padding:18px 0 14px}
.field label{display:block;font-family:'Bricolage Grotesque';font-variation-settings:'opsz' 14,'wght' 450;
             font-size:13.5px;color:var(--stone);margin-bottom:8px}
.field .val{font-family:Spectral,serif;font-size:19px;color:var(--pewter)}
.field input,.field textarea{width:100%;background:transparent;border:0;outline:0;padding:0;
  font-family:Spectral,serif;font-size:19px;line-height:1.5;color:var(--paper);resize:none}
.field input:focus-visible,.field textarea:focus-visible{outline:0}
.field:focus-within{border-color:var(--pewter)}
.field textarea{min-height:88px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{margin-top:38px;font-family:Spectral,serif;font-size:19px;color:var(--paper);
        background:transparent;border:0;border-bottom:1px solid var(--paper);
        display:inline-block;padding:0 0 6px;cursor:pointer;transition:opacity .12s}
.submit:hover{opacity:.62}
.form-note{font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'opsz' 14,'wght' 450;font-size:13px;color:var(--stone);margin-top:20px;line-height:1.7}
.form-note a{color:var(--pewter)}

/* ---------- footer ---------- */
footer{background:var(--olive-deep);padding:96px 0 44px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:64px}
footer a{color:var(--pewter);text-decoration:none;display:block;margin-bottom:10px}
footer .fine{display:flex;justify-content:space-between;margin-top:80px;
             border-top:1px solid var(--rule-dark);padding-top:22px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--margin:48px}
  .split{grid-template-columns:1fr;gap:44px}
  .row{grid-template-columns:1fr;gap:18px}
  section{padding:96px 0}
}
@media (max-width:640px){
  :root{--margin:24px;--measure:40ch}
  body{font-size:16px}
  .hero{min-height:600px}
  .hero .name{left:-26px;bottom:220px;font-size:clamp(76px,26vw,104px);line-height:.9}
  footer .cols{grid-template-columns:1fr;gap:34px}
  section{padding:76px 0}
}

/* screen-reader only — used for the menu page heading */
.sr-only,
/* WordPress core and several plugins emit .screen-reader-text; the
   language switch uses it too, so both names resolve to the same rule.
   Without this the word "Language" prints in the navigation. */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- mobile navigation ---------- */
.menu-toggle{display:none}
@media (max-width:900px){
  nav a:not(.menu-toggle){display:none}
  nav .lang{display:none}
  .menu-toggle{display:inline;margin-left:0}
}
.menu{position:fixed;inset:0;background:var(--aubergine);z-index:20;padding:38px var(--margin)}
.menu .top{display:flex;justify-content:space-between;align-items:baseline}
.menu .items{margin-top:120px}
.menu .items a{display:block;font-family:Gloock;font-size:clamp(38px,11vw,54px);line-height:1.4;
               color:var(--paper);text-decoration:none}
.menu .foot{position:absolute;left:var(--margin);right:var(--margin);bottom:44px;
            border-top:1px solid var(--rule-dark);padding-top:20px}

/* ---------- sectors ---------- */
.sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:60px 0 44px;
         border-top:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light)}
.sectors > div{padding:34px 0}
@media (max-width:900px){
  .sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectors > div{padding:24px 0}
}
@media (max-width:520px){ .sectors{grid-template-columns:1fr} }

/* =========================================================================
   WORDPRESS LAYER
   Everything above this line is the frozen design system, byte-identical to
   the approved static build. Everything below neutralises WordPress and the
   block editor so they cannot introduce anything the system forbids.
   ========================================================================= */

/* ---------- core block neutralisation ----------
   The block editor emits its own spacing, radii and container widths. The
   system has one border width (1px), one radius (0) and no shadows. */
.wp-block-group,.wp-block-columns,.wp-block-column,
.wp-block-image,.wp-block-image img,.wp-block-buttons,.wp-block-button__link{
  border-radius:0;box-shadow:none}
.wp-block-image{margin:0}
.wp-block-image img{display:block;width:100%;height:auto}
.wp-block-separator{border:0;height:1px;background:var(--rule-light);margin:0;opacity:1}
.dark .wp-block-separator,.dark-2 .wp-block-separator{background:var(--rule-dark)}
.wp-block-columns{gap:var(--split, 96px)}
.entry-content > *:first-child{margin-top:0}
.entry-content > *:last-child{margin-bottom:0}

/* ---------- sections as authored in patterns ----------
   Core group + a surface class. No custom section block needed. */
.mc-section{padding:132px 0}
.mc-section > .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.mc-section.pad-top-nav{padding-top:230px}
.mc-section.pad-close{padding:180px 0 160px}
@media (max-width:1024px){ .mc-section{padding:96px 0} .mc-section.pad-top-nav{padding-top:190px} }
@media (max-width:640px){ .mc-section{padding:76px 0} .mc-section.pad-top-nav{padding-top:150px} }

/* ---------- skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-variation-settings:'opsz' 14,'wdth' 100,'wght' 500;font-size:14px;
  background:var(--paper);color:var(--ink);padding:12px 18px}
.skip-link:focus{left:12px;top:12px}

/* ---------- admin bar ---------- */
body.admin-bar header{top:32px}
@media (max-width:782px){ body.admin-bar header{top:46px} }

/* ---------- the enquiry form, live ---------- */
.field.has-error{border-color:var(--paper)}
.field-error{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-variation-settings:'opsz' 14,'wdth' 100,'wght' 450;font-size:13px;
  color:var(--paper);margin-top:8px;line-height:1.6}
.light .field-error,.light-2 .field-error{color:var(--ink)}
.form-status{border-top:1px solid var(--rule-dark);padding-top:22px;margin-bottom:30px;
  font-family:Spectral,serif;font-size:17px;line-height:1.72;color:var(--paper)}

/* ---------- photography, once a real image is set ----------
   The slot keeps its height and full bleed; the image covers it. */
.slot > img,.slot > picture > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block}

/* ---------- language switch ---------- */
.lang-switch{margin-left:44px;color:var(--stone);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-variation-settings:'opsz' 14,'wdth' 100,'wght' 450;font-size:15px}
.lang-switch b{color:var(--pewter);font-weight:450}
.lang-switch a{margin-left:0;display:inline;color:var(--stone);text-decoration:none}
.lang-switch a:hover{color:var(--pewter)}
footer .lang-switch{margin-left:0;margin-top:18px;display:block}

/* ---------- legal page shells ---------- */
/* A legal slot is a rule, a label and a paragraph. The label and the
   paragraph are the system's own .fn and .body — restating their type here
   would be a second set of values to keep in step with the first, and the two
   would drift. Only the rule and the padding belong to this class. */
.legal-slot{border-top:1px solid var(--rule-dark);padding:26px 0}


/* ---------- the five approach steps ----------
   Was a page-level style block in the static build; part of the system now
   that the Approach page is assembled from a pattern. */
.step{display:grid;grid-template-columns:minmax(0,120px) minmax(0,420px) minmax(0,1fr);gap:56px;
      padding:52px 0;border-top:1px solid var(--rule-light);align-items:start}
.dark .step,.dark-2 .step{border-color:var(--rule-dark)}
.step:last-of-type{border-bottom:1px solid var(--rule-light)}
.dark .step:last-of-type{border-color:var(--rule-dark)}
.step .no{font-family:Gloock,serif;font-size:44px;line-height:1;color:var(--stone)}
.light .step .no{color:#B9B7A6}
@media (max-width:1024px){ .step{grid-template-columns:1fr;gap:16px} .step .no{font-size:32px} }

/* ---------- marked placeholders for unsupplied company facts ----------
   A missing registry code must look missing, not absent. */
.mc-placeholder{color:var(--stone);opacity:.85}

/* ---------- measure utilities ----------
   Max-widths in ch, so a headline re-flows in Estonian instead of breaking.
   The only utility classes in the system; nothing else is abbreviated. */
.mw-11ch{max-width:11ch}
.mw-12ch{max-width:12ch}
.mw-13ch{max-width:13ch}
.mw-14ch{max-width:14ch}
.mw-15ch{max-width:15ch}
.mw-16ch{max-width:16ch}
.mw-17ch{max-width:17ch}
.mw-18ch{max-width:18ch}
.mw-19ch{max-width:19ch}
.mw-20ch{max-width:20ch}
.mw-22ch{max-width:22ch}
.mw-24ch{max-width:24ch}
.mw-26ch{max-width:26ch}
.mw-34ch{max-width:34ch}
.mw-measure{max-width:min(var(--measure),100%)}

/* ---------- contact page, the no-charge note ---------- */
.contact-note{margin-top:64px;border-top:1px solid var(--rule-dark);padding-top:30px}
.light .contact-note,.light-2 .contact-note{border-color:var(--rule-light)}
.mc-section.pad-form{padding-top:0}

/* ---------- target size (WCAG 2.2 SC 2.5.8) ----------
   Every one of these is an inline element, so padding on the block axis grows
   the hit area to 24 px without moving a single pixel of the layout. The type
   size, the leading and the position on the page are all unchanged; only the
   part of the screen that responds to a thumb is larger.

   Links set inside a running sentence are exempt from the criterion and are
   deliberately left alone — padding them would open overlapping hit areas
   across a paragraph, which is worse than the thing it fixes. */
.menu-toggle,
.lang-switch a,
footer .fine a,
a[href^="mailto:"],
a[href^="tel:"]{padding-block:4px}

/* The index numeral. It carries the step order, so it is content, not
   decoration, and is set in Stone on both surfaces — 3.45:1 on paper, which
   clears the 3:1 the criterion asks of text this size. */
.light .step .no{color:var(--stone)}

/* ---------- the function label as a paragraph ----------
   The frozen design sets every small label in a <div>, which carries no
   margin. The block editor's paragraph block is a <p>, which the browser
   gives 1em top and bottom. Without this the label sits 15 px low and pushes
   everything under it down — visible as a systematic drift on every page that
   opens with a label. */
p.fn{margin:0}

/* ---------- section rhythm ----------
   The approved design does not use one uniform section padding; the vertical
   pace changes as a page moves from its opening through to its close. These
   are those values, named, so an editor picks a step in the system rather than
   typing a number. Each collapses on the same two breakpoints as the base.

   pad-open-*  a page opening, clearing the navigation bar
   pad-b-*     a section that continues the one above it and only closes
   pad-*       a symmetrical section
*/
.mc-section.pad-open-120{padding:230px 0 120px}
.mc-section.pad-open-110{padding:230px 0 110px}
.mc-section.pad-open-100{padding:230px 0 100px}
.mc-section.pad-110-130{padding:110px 0 130px}
.mc-section.pad-b-140{padding:0 0 140px}
.mc-section.pad-b-130{padding:0 0 130px}
.mc-section.pad-160{padding:160px 0}
.mc-section.pad-150{padding:150px 0}
.mc-section.pad-120{padding:120px 0}

@media (max-width:1024px){
  .mc-section.pad-open-120,
  .mc-section.pad-open-110,
  .mc-section.pad-open-100{padding:190px 0 96px}
  .mc-section.pad-110-130{padding:96px 0 104px}
  .mc-section.pad-b-140{padding:0 0 112px}
  .mc-section.pad-b-130{padding:0 0 104px}
  .mc-section.pad-160{padding:128px 0}
  .mc-section.pad-150{padding:120px 0}
  .mc-section.pad-120{padding:96px 0}
}
@media (max-width:640px){
  .mc-section.pad-open-120,
  .mc-section.pad-open-110,
  .mc-section.pad-open-100{padding:150px 0 76px}
  .mc-section.pad-110-130{padding:76px 0 84px}
  .mc-section.pad-b-140{padding:0 0 88px}
  .mc-section.pad-b-130{padding:0 0 84px}
  .mc-section.pad-160{padding:100px 0}
  .mc-section.pad-150{padding:96px 0}
  .mc-section.pad-120{padding:76px 0}
}

/* The legal pages set their body on a narrower measure than the rest of the
   site — a notice is read, not scanned. */
.mc-section > .wrap.legal-wrap{max-width:900px}

/* ---------- optical alignment ----------
   Where a display heading sits beside a column of body text, the two do not
   align optically when their boxes align mathematically: the serif's cap
   height starts lower in its line box than the body text does in its. The
   approved design corrects that with a few pixels of padding on the body
   column. These are those corrections, named, so they stay a small fixed set
   rather than a number an editor guesses at. */
.stack.opt-6{padding-top:6px}
.stack.opt-8{padding-top:8px}
.stack.opt-14{padding-top:14px}

/* ---------- legal prose ----------
   The approved design never had to render a list or an address block: the
   legal pages were structural shells until the real notices arrived. These are
   the two shapes that copy needs, set in the system's own body face and
   measure, with the hairline marker the graphic vocabulary already uses. No
   new colour, no new size, no new spacing value. */
.legal-slot ul{margin:0 0 18px;padding:0;list-style:none;
  max-width:min(var(--measure),100%)}
.legal-slot li{position:relative;padding-left:22px;margin:0 0 7px;
  font-family:Spectral,serif;font-size:17px;line-height:1.72;color:var(--stone)}
.legal-slot li::before{content:"";position:absolute;left:2px;top:.8em;
  width:7px;height:1px;background:var(--stone)}
.legal-slot .addr{font-family:Spectral,serif;font-size:17px;line-height:1.72;
  color:var(--stone);margin:0 0 18px}
.legal-slot .addr a{color:var(--pewter)}
.legal-updated{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-variation-settings:'opsz' 14,'wdth' 100,'wght' 450;font-size:13.5px;
  color:var(--stone);margin:0 0 36px}

/* Links inside legal prose. The frozen design had no inline links in body
   copy — every link it contained was a styled call to action — so there was no
   global rule and these fell back to the browser's default blue, which is
   1.93:1 on the dark ground and fails outright. Pewter, underlined, because a
   link inside a paragraph has to be identifiable by more than colour. */
.legal-slot a{color:var(--pewter);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.legal-slot a:hover{color:var(--paper)}

/* ---------- the typefaces ----------
   These belong here, not only in theme.json.

   theme.json's fontFace declarations are emitted by WordPress inside the
   `global-styles` stylesheet — which this theme dequeues, because that same
   stylesheet carries a large amount of block CSS the design does not use. The
   result was that the four self-hosted files were preloaded on every page and
   never declared, so every page rendered in Georgia and the system sans while
   appearing, in the admin, to be correctly configured. theme.json keeps its
   declarations for the editor; the front end is served from here.

   Paths are relative to this file, in assets/css/. */

/* `swap` throughout, including the display face.
   `block` was tried for the wordmark on the reasoning that it must never paint
   in Georgia — but it buys that with up to three seconds of invisible text on
   the hero, which is the largest contentful paint on the page. The right
   guarantee is delivery, not concealment: Gloock is 29 kB, subset, same-origin
   and preloaded at high priority, so it is in hand before first paint in any
   realistic case. On the rare miss the reader gets a brief fallback rather than
   an empty screen. */
@font-face{
  font-family:'Gloock';
  src:url('../fonts/gloock-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Spectral';
  src:url('../fonts/spectral-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Spectral';
  src:url('../fonts/spectral-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
/* Variable. The weight and width ranges must be declared or the browser will
   not vary them, and the family's own default instance is 96 pt ExtraBold. */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('../fonts/bricolage-grotesque-variable.woff2') format('woff2-variations'),
      url('../fonts/bricolage-grotesque-variable.woff2') format('woff2');
  font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;
}

/* The language switch on mobile.
   The frozen stylesheet hides `nav .lang` below 900 px, but the WordPress
   markup emits `.lang-switch`, so that rule never matched and the header kept
   half a switch — a bold current language, a separator, and a link that the
   generic `nav a` hide had already removed. Reads as "ET / Menüü".
   The full menu page carries the switch, which is where the frozen design put
   it on mobile. */
@media (max-width:900px){
  header .lang-switch{display:none}
}

/* ---------- the hero on a phone ----------
   Three faults, corrected together.

   THE CROP. The wordmark is meant to exceed the viewport on a wide screen and
   it still does. On a phone it was being cut at both ends at once — hanging
   off the left while losing a quarter of its width off the right — and a mark
   cut at both ends is not a crop, it is a fragment. Legibility wins here:
   MARIANNA COSTA is set to the widest size that fits between the margins
   whole. Ink width is 5.36 x font-size, so (100vw - 2 x margin) / 5.5 leaves a
   few pixels of air and no clipped letterform at any phone width.

   THE DEAD SPACE. The hero was a full viewport tall with the mark pinned near
   its foot, so a phone opened on a screen of empty olive. It is now sized by
   what is in it.

   THE ORPHAN. The scope word sat alone on the last line. It is folded into the
   qualifier instead — see mc_hero_qualifier_narrow(). Both wordings are in the
   markup and the breakpoint chooses; each is display:none in the other state,
   so a screen reader is offered exactly one.

   None of this reaches the desktop composition, which was already working. */
@media (max-width:640px){
  .hero{
    height:auto;                 /* content-driven, not viewport-driven */
    min-height:0;
    padding:116px var(--margin) 48px;
  }
  .hero .name{
    position:static;
    font-size:calc((100vw - (var(--margin) * 2)) / 5.5);
    line-height:.9;
    margin-bottom:40px;
  }
  .hero .qual{position:static}
  .hero .qual .one{margin-bottom:12px}
  .q-wide{display:none}
  .q-narrow{display:inline}
  .scope-break,.hero-scope{display:none}
}

/* ---------- photography ----------
   A plate on the page, not a texture behind it.

   The band is 3.4:1 on a desktop and the frames are not, so above 640 px each
   photograph is drawn at its own proportions, uncropped, contained, and set
   against the page margin with the rest of the width left empty. The sizes
   below are per position and deliberately unequal: a staircase whose subject is
   depth wants more room than a carafe on a table, and three secondary pages
   built to one template would read as a grid of thumbnails rather than as
   editorial punctuation.

   On a phone the square frame keeps the near-square band, which suits it, and
   the landscape frames run near-full-width at their own ratio — the block adds
   `.natural` by reading the file, so a replacement frame brings its own shape.
   Neither is cropped at any width. `sizes` in MC_PHOTO_SIZES describes exactly
   this and must keep matching the widths below.

   A position with no photograph renders nothing at any width. An empty tonal
   band is a placeholder, and placeholders do not ship. */
.slot{display:none}
.slot.has-photo{display:block}
.slot.has-photo::before{display:none}   /* no scanline, no gradient, no veil */

/* ----- above the phone: the contained plate ----- */
@media (min-width:641px){
  .slot.has-photo{
    height:auto;                     /* not the 420px band */
    overflow:visible;
    background:var(--olive);         /* the approved dark ground, flat */
    padding:120px 0;
  }
  .slot.has-photo picture{
    display:block;box-sizing:border-box;
    max-width:var(--max);margin:0 auto;padding:0 var(--margin);
  }
  .slot.has-photo img{
    /* The frozen rule above pins a photograph to the band with
       `position:absolute;inset:0`. A contained plate is in normal flow. */
    position:static;inset:auto;
    display:block;height:auto;
    width:min(var(--plate,628px),var(--plate-pct,50%));
  }
  /* Which side of the page each plate sits on. The home page alternates; the
     three secondary pages vary so they do not read as one template. */
  .slot.has-photo[data-photo="MC-02"] img,
  .slot.has-photo[data-photo="MC-03"] img,
  .slot.has-photo[data-photo="MC-05"] img{margin-left:auto}

  /* Plate sizes, per position, set against the page's negative space. The
     empty width is deliberate and stays; these only need enough scale to read
     as placed rather than as thumbnails within it. Raise them only with
     sharper originals — see build-photography.py. */
  .slot.has-photo[data-photo="MC-01"]{--plate:588px;--plate-pct:48%}  /* square  */
  .slot.has-photo[data-photo="MC-02"]{--plate:840px;--plate-pct:64%}  /* the room */
  .slot.has-photo[data-photo="MC-03"]{--plate:760px;--plate-pct:58%}  /* depth    */
  .slot.has-photo[data-photo="MC-04"]{--plate:640px;--plate-pct:50%}  /* detail   */
  .slot.has-photo[data-photo="MC-05"]{--plate:720px;--plate-pct:56%}  /* detail   */
}
@media (min-width:641px) and (max-width:1024px){
  /* A tablet gets the same relative scale, shifted up: the column is narrower,
     so the same percentage would leave the plates reading small. One offset
     applied to every position keeps them unequal rather than collapsing them
     to a single width here. */
  .slot.has-photo{padding:96px 0}
  .slot.has-photo img{width:min(var(--plate,628px),calc(var(--plate-pct,50%) + 14%))}
}

/* ----- the phone ----- */
@media (max-width:640px){
  /* the square frame keeps the approved band */
  .slot.has-photo{height:420px;overflow:hidden;background:#0F1209;padding:0}
  .slot picture{position:absolute;inset:0;display:block;max-width:none;padding:0;margin:0}
  .slot picture > img{width:100%;height:100%;object-fit:cover;display:block;
    object-position:var(--pos-m,var(--pos,50% 50%))}

  /* a landscape frame keeps its own proportions instead */
  .slot.has-photo.natural{height:auto;overflow:visible;background:none}
  .slot.has-photo.natural picture{position:static}
  .slot.has-photo.natural picture > img{
    /* Out of the band and back into normal flow. Without resetting the
       position the frozen rule keeps the image absolute, and the slot
       collapses to nothing. */
    position:static;inset:auto;
    width:100%;height:auto;object-fit:initial}
}

/* ---------- the alternative to the form ----------
   Set at the footnote size, beneath the privacy note. It is a route, not a
   call to action: a form and a second CTA of equal weight ask the visitor to
   choose before they have made contact. */
.form-alt{font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'opsz' 14,'wght' 450;font-size:13px;color:var(--stone);
  margin-top:12px;line-height:1.7}
.form-alt a{color:var(--pewter);text-decoration:underline;text-underline-offset:3px}
.form-alt a:hover{opacity:.72}

/* The confirmation stands where the form stood, at the same measure, so the
   column does not jump and the eye lands where it was already looking.

   Three steps and no fourth: the status in function type, the thanks in
   display, the explanation in body. Nothing competes with them — no tick, no
   panel, no second call to action. */
.form-sent{outline:0}
.sent-status{color:var(--stone);margin:0 0 18px}
.sent-title{font-size:clamp(38px,4.6vw,54px);line-height:1.06;margin:0}
.sent-body{max-width:42ch;margin-top:20px}