/* ==========================================================================
   Site public — redesign 2 „Premium Architectural / Dark Industrial Luxury”
   One stylesheet. Sections:
     0. Fonts (fonts2/fonts.css: Newsreader Display + Hanken Grotesk, metric fallbacks)
     1. Tokens: primitives → semantic themes (.t-dark .t-anth .t-paper .t-white .t-stone .t-clay .t-mist)
     2. Reset & base          3. Layout (.wrap, .grid-12 with bleed lines)
     4. Typography roles      5. Components (buttons, links, credit, fields, header, mega, footer, cookie, masts)
     6. Home                  7. /portofoliu        8. Service page      9. Project page
    10. /contact             11. Legal, 404        12. Motion           13. Responsive      14. Print
   Components read only the semantic variables (--bg --fg --fg-2 --fg-3 --rule --accent --btn-* --field …);
   every section declares one theme class.
   ========================================================================== */

/* ---------- 0. Fonts ---------- */
@font-face{font-family:"Newsreader Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/newsreader-display-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0102-0103,U+0131,U+0152-0153,U+015E-015F,U+0162-0163,U+0218-021B,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/newsreader-display-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-0101,U+0104-0130,U+0134-0148,U+014A-0151,U+0154-015D,U+0160-0161,U+0164-017E,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01C4-01CC,U+01E6-01E7,U+01EA-01EB,U+01FA-0217,U+022A-022D,U+0230-0233,U+0237,U+0259,U+02B9-02BA,U+02C7,U+02DD,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD}
@font-face{font-family:"Newsreader Display";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/newsreader-display-latin-400-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0102-0103,U+0131,U+0152-0153,U+015E-015F,U+0162-0163,U+0218-021B,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader Display";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/newsreader-display-latin-ext-400-italic.woff2) format("woff2");
  unicode-range:U+0100-0101,U+0104-0130,U+0134-0148,U+014A-0151,U+0154-015D,U+0160-0161,U+0164-017E,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01C4-01CC,U+01E6-01E7,U+01EA-01EB,U+01FA-0217,U+022A-022D,U+0230-0233,U+0237,U+0259,U+02B9-02BA,U+02C7,U+02DD,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0102-0103,U+0131,U+0152-0153,U+015E-015F,U+0162-0163,U+0218-021B,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-015D,U+0160-0161,U+0164-017E,U+018F,U+0192,U+019D,U+01A0-01A1,U+01AF-01B0,U+01CD-01D4,U+01E6-01E7,U+01EA-01EB,U+01FA-01FF,U+0232-0233,U+0237,U+0259,U+0272,U+02C7,U+02DD,U+02F5-02F6,U+1E20-1E21,U+1E44-1E45,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+20AB,U+20B1,U+20B3-20B4,U+20B8,U+20BD}
@font-face{font-family:"Newsreader Display Fallback";font-style:normal;font-weight:100 900;
  src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("LiberationSerif"),local("Tinos");
  size-adjust:110.49%;ascent-override:66.52%;descent-override:23.98%;line-gap-override:0%}
@font-face{font-family:"Newsreader Display Fallback";font-style:italic;font-weight:100 900;
  src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic"),local("LiberationSerif-Italic"),local("Tinos Italic");
  size-adjust:102.68%;ascent-override:71.58%;descent-override:25.81%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback";font-style:normal;font-weight:100 549;
  src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("LiberationSans"),local("Arimo");
  size-adjust:100.66%;ascent-override:99.34%;descent-override:30.1%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback";font-style:normal;font-weight:550 900;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold");
  size-adjust:95.18%;ascent-override:105.06%;descent-override:31.83%;line-gap-override:0%}

/* ---------- 1. Tokens ---------- */
:root{
  /* 1a. Colour primitives (only these hex values exist in the system) */
  --navy-950:#060a10;   /* deepest: gallery stage, header solid */
  --navy-900:#0a0f17;   /* primary dark surface: hero, indicators, process, contact */
  --navy-850:#0f151f;   /* raised dark: mega menu, mobile menu */
  --navy-800:#141c28;   /* form fields on dark */
  --anth-900:#1e2125;   /* anthracite: technical dark (aluminium chapter) */
  --anth-800:#2a2d32;
  --anth-600:#41454b;   /* technical text/data on light */
  --paper:#f3f0ea;      /* warm white (default light surface) */
  --white:#fbfaf7;      /* fields on light, lightest surface */
  --stone:#e6e2db;      /* neutral warm grey (footer, secondary light) */
  --clay:#d9ccbb;       /* warm clay, cue for ventilated façades (clearly warmer than paper/stone) */
  --mist:#d4dbe0;       /* cool blue-grey, cue for glass façades */
  --ink:#10151c;        /* text on light */
  --ink-2:#4b5057;      /* secondary text on light   (6.9:1 on paper) */
  --ink-3:#61656c;      /* tertiary text on light    (5.2:1 on paper) */
  --on-dark:#f1ede6;    /* text on dark              (16.6:1 on navy-900) */
  --on-dark-2:#aab1bb;  /* secondary text on dark    (8.6:1) */
  --on-dark-3:#848d99;  /* tertiary text on dark     (5.7:1) */
  --copper-700:#8a4a22; /* copper text on light      (≥ 4.7:1 on every light surface) */
  --copper-500:#b8703f; /* copper rules/markers on light, ≥ 24 px type only */
  --copper-300:#d49468; /* copper on dark            (7.7:1 on navy-900) */
  --copper-800:#7a3f1b; /* copper text on clay       (5.2:1) */

  /* 1b. Typography (fonts2/fonts.css, display step enlarged for the monumental hero) */
  --font-serif:"Newsreader Display","Newsreader Display Fallback",Georgia,"Times New Roman",serif;
  --font-sans:"Hanken Grotesk","Hanken Grotesk Fallback",Arial,Helvetica,sans-serif;
  --fs-display:clamp(2.75rem, min(1.2rem + 6.2vw, 11svh), 7.5rem); /* 44 → 99 @1440×900 → 120; capped by height so the hero fits laptop screens */
  --fs-h1:     clamp(2.5rem, 1.613rem + 3.8vw, 5.25rem);     /* 40 → 80 @1440 → 84 */
  --fs-h2:     clamp(2rem, 1.333rem + 2.963vw, 4rem);         /* 32 → 64 */
  --fs-h3:     clamp(1.625rem, 1.333rem + 1.296vw, 2.5rem);   /* 26 → 40 */
  --fs-h4:     clamp(1.375rem, 1.25rem + .556vw, 1.75rem);    /* 22 → 28 */
  --fs-numeral:clamp(4rem, 2.667rem + 5.926vw, 8rem);         /* 64 → 128 */
  --fs-stat:   clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);        /* 44 → 72 */
  --fs-lead:   clamp(1.125rem, 1.042rem + .37vw, 1.375rem);   /* 18 → 22 */
  --fs-body:   clamp(1rem, .979rem + .093vw, 1.0625rem);      /* 16 → 17 */
  --fs-small:  clamp(.875rem, .854rem + .093vw, .9375rem);    /* 14 → 15 */
  --fs-nav:    .9375rem;                                      /* 15 */
  --fs-label:  clamp(.75rem, .729rem + .093vw, .8125rem);     /* 12 → 13 */
  --lh-display:.98; --ls-display:-.024em;
  --lh-h1:1.02;     --ls-h1:-.02em;
  --lh-h2:1.06;     --ls-h2:-.016em;
  --lh-h3:1.12;     --ls-h3:-.01em;
  --lh-h4:1.2;      --ls-h4:-.004em;
  --lh-numeral:.9;  --ls-numeral:-.03em;
  --lh-lead:1.5;    --ls-lead:-.003em;
  --lh-body:1.65;
  --lh-small:1.55;  --ls-small:.005em;
  --ls-nav:.01em;
  --lh-label:1.3;   --ls-label:.14em;
  --ls-data:.08em;
  --measure:62ch;

  /* 1c. Spacing (4 px base; fluid section rhythm) */
  --sp-1:.25rem;  /* 4 */
  --sp-2:.5rem;   /* 8 */
  --sp-3:.75rem;  /* 12 */
  --sp-4:1rem;    /* 16 */
  --sp-5:1.5rem;  /* 24 */
  --sp-6:2rem;    /* 32 */
  --sp-7:3rem;    /* 48 */
  --sp-8:4rem;    /* 64 */
  --sp-9:6rem;    /* 96 */
  --sp-10:8rem;   /* 128 */
  --sp-11:12rem;  /* 192 */
  --section:   clamp(5rem, 2.6rem + 10.6vw, 12rem);   /* 80 → 192  : major sections */
  --section-s: clamp(4rem, 2.9rem + 4.9vw, 7.5rem);   /* 64 → 120  : chapters, bands */
  --stack:     clamp(2.5rem, 1.8rem + 3vw, 4.5rem);   /* 40 → 72   : heading → content */

  /* 1d. Sizes & grid */
  --gutter:clamp(1.25rem, 5vw, 6rem);    /* outer margin: 20 @390, 51 @1024, 72 @1440 */
  --gap:clamp(1rem, 2vw, 2rem);          /* column gap:   16 @390, 20 @1024, 29 @1440 */
  --content-max:95rem;                   /* 1520 px of content on very wide screens */
  --side:max(calc(var(--gutter) - var(--gap)), calc((100% - var(--content-max)) / 2 - var(--gap)));
  --header-h:4.5rem;                     /* 72 */
  --btn-h:3.25rem;                       /* 52 */
  --btn-h-sm:2.75rem;                    /* 44: also the minimum touch target */
  --field-h:3.5rem;                      /* 56 */
  --hero-min:40rem; --hero-max:70rem;

  /* 1e. Radii: square by default; the token exists so nothing hard-codes one */
  --radius-0:0; --radius-1:2px;

  /* 1f. Lines */
  --hairline:1px;

  /* 1g. Motion */
  --dur-1:160ms;  /* colour, underline */
  --dur-2:320ms;  /* header, menus */
  --dur-3:700ms;  /* reveal */
  --dur-4:1200ms; /* image hover, process line */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --reveal-y:1rem;

  /* 1h. Layers */
  --z-base:0; --z-raised:1; --z-header:50; --z-mega:51; --z-menu:60; --z-lightbox:80; --z-skip:100;
}

/* 1i. Semantic themes: every section declares one; components only read these */
.t-dark,.t-anth,.t-paper,.t-white,.t-stone,.t-clay,.t-mist{background:var(--bg);color:var(--fg)}
.t-dark,.t-anth{
  --bg:var(--navy-900); --fg:var(--on-dark); --fg-2:var(--on-dark-2); --fg-3:var(--on-dark-3);
  --rule:rgba(241,237,230,.14); --rule-strong:rgba(241,237,230,.4);
  --accent:var(--copper-300); --field:var(--navy-800); --field-line:rgba(241,237,230,.28);
  --btn-bg:var(--on-dark); --btn-fg:var(--navy-950); --btn-bg-h:var(--copper-300); --btn-fg-h:var(--navy-950);
  --focus:var(--copper-300);
  color-scheme:dark; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.t-anth{--bg:var(--anth-900); --field:var(--anth-800); --rule:rgba(241,237,230,.16)}
.t-paper,.t-white,.t-stone,.t-clay,.t-mist{
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --rule:rgba(16,21,28,.14); --rule-strong:rgba(16,21,28,.42);
  --accent:var(--copper-700); --field:var(--white); --field-line:rgba(16,21,28,.3);
  --btn-bg:var(--navy-900); --btn-fg:var(--paper); --btn-bg-h:var(--copper-700); --btn-fg-h:#fff;
  --focus:var(--navy-900);
  color-scheme:light;
}
.t-white{--bg:var(--white)}
.t-stone{--bg:var(--stone)}
.t-clay{--bg:var(--clay)}
.t-mist{--bg:var(--mist)}

/* 1j. Extensions to the token system (contrast fixes + states; nothing above is changed) */
:root{--focus:var(--navy-900);--bar-h:var(--header-h);--bar-h-compact:3.75rem;--err:#a3262a;--ok:#1d6b3a}
.t-dark,.t-anth{--err:#f2a097;--ok:#8fd3a4}
.t-paper,.t-white,.t-stone,.t-clay,.t-mist{--err:#a3262a;--ok:#1d6b3a}   /* a light panel inside a dark section (form card) must not inherit the dark-theme values */
.t-clay,.t-mist,.t-stone{--fg-3:var(--ink-2)}            /* ink-3 is < 4.5:1 on clay/mist: tertiary text uses ink-2 there */
.t-clay{--accent:var(--copper-800);--err:#93201f;--btn-bg-h:var(--copper-800)}   /* copper-700 is 4.3:1 on the stronger clay */
.t-anth{--fg-3:var(--on-dark-2)}                          /* on-dark-3 is 4.8:1 on anthracite: keep small text brighter */

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h-compact) + var(--sp-4))}
html:has(.filters-bar){scroll-padding-top:calc(var(--bar-h-compact) + 4rem)}
body{margin:0;background:var(--navy-950);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);font-kerning:normal;text-rendering:optimizeLegibility}
main{display:block;overflow-x:clip}
img,picture,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;border-radius:0}
strong,b{font-weight:600}
::selection{background:var(--copper-300);color:var(--navy-950)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--sp-4);top:var(--sp-4);z-index:var(--z-skip);background:var(--on-dark);color:var(--navy-950);padding:var(--sp-3) var(--sp-5);font-weight:600;transform:translateY(-200%);transition:transform var(--dur-2) var(--ease-out)}
.skip-link:focus{transform:none;outline-color:var(--copper-300)}
[hidden]{display:none!important}
body.no-scroll{overflow:hidden}

/* ---------- 3. Layout: wrap + 12-column grid with bleed lines ----------
   full-start | side | c1 … c12 | side | full-end   ("c N" = start of column N; content-end = end of column 12) */
.wrap{width:min(100% - 2 * var(--gutter), var(--content-max));margin-inline:auto}
.grid-12{display:grid;column-gap:var(--gap);
  grid-template-columns:[full-start] var(--side) [content-start] repeat(12,[c] minmax(0,1fr)) [content-end] var(--side) [full-end]}
.grid-12 > *{grid-column:content-start / content-end;min-width:0}

/* ---------- 4. Typography roles ---------- */
.display,.h1,.h2,.h3,.h4{font-family:var(--font-serif);font-weight:400;font-synthesis:none;text-wrap:balance;hyphens:manual;overflow-wrap:break-word;color:var(--fg)}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
:is(.display,.h1,.h2,.h3,.h4) em{font-style:italic;letter-spacing:-.008em}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--fg-2);max-width:42ch;text-wrap:pretty}
.prose{max-width:var(--measure);color:var(--fg-2);text-wrap:pretty}
.prose p + p{margin-top:1em}
.kicker{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600;color:var(--accent);text-wrap:balance}
.kicker a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color var(--dur-1) linear}
.kicker a:hover{text-decoration-color:currentColor}
.unit{text-transform:none;letter-spacing:0}
.demo-note{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);max-width:46ch;padding-left:var(--sp-4);box-shadow:inset 1px 0 0 var(--accent)}

/* ---------- 5. Components ---------- */
/* 5a. Buttons: square, one solid + one outline variant, regular + small */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:var(--btn-h);padding:0 1.75rem;
  font-family:var(--font-sans);font-size:var(--fs-nav);font-weight:600;letter-spacing:.02em;line-height:1.1;text-align:center;white-space:nowrap;
  background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--radius-0);
  transition:background-color var(--dur-1) linear,color var(--dur-1) linear,box-shadow var(--dur-1) linear}
.btn:hover{background:var(--btn-bg-h);color:var(--btn-fg-h)}
.btn-sm{min-height:var(--btn-h-sm);padding:0 1.25rem}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn-ghost:hover{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.btn-text{background:transparent;color:var(--fg);padding-inline:.5rem;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;text-decoration-color:var(--rule-strong)}
.btn-text:hover{background:transparent;color:var(--fg);text-decoration-color:currentColor}
.arr{display:inline-block;font-family:var(--font-sans);font-weight:400;transition:transform var(--dur-1) var(--ease-out)}
.btn:hover .arr,.link-arrow:hover .arr,.sib:hover .arr{transform:translateX(4px)}
/* 5b. Text link: resting hairline + a currentColor underline that grows left→right on hover */
.link-arrow{display:inline-flex;align-items:baseline;gap:.5em;min-height:var(--btn-h-sm);padding-block:.7rem .55rem;font-size:var(--fs-nav);font-weight:500;letter-spacing:.01em;line-height:1.2;color:var(--fg);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) 0 100%/100% 1px no-repeat;
  transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1) linear}
.link-arrow:hover{background-size:100% 1px,100% 1px}
/* 5c. Photo credit for demo images (never a project caption): ONE treatment everywhere — a small plain text line in the
   section's quiet text colour, under the figure (right-aligned). Full-bleed background photographs (hero, contact, 404)
   carry it in the section's bottom-right corner, over the scrim (--corner), with the same type. No plates, no shadows. */
.credit{display:block;margin:var(--sp-2) 0 0;text-align:right;font-size:.6875rem;line-height:1.2;letter-spacing:.04em;color:var(--fg-3)}
.credit--corner{position:absolute;right:var(--gutter);bottom:var(--sp-4);z-index:2;margin:0;color:var(--fg-2);pointer-events:none}
/* 5d. Fields */
.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--gap)}
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.field--full,.form-foot{grid-column:1 / -1}
.field label{font-size:var(--fs-small);font-weight:500;line-height:1.3;color:var(--fg-2)}
.field .opt{font-weight:400;color:var(--fg-3)}
.field input,.field textarea{width:100%;min-height:var(--field-h);padding:.9rem 1rem .8rem;background:var(--field);border:0;border-bottom:1px solid var(--field-line);border-radius:var(--radius-0);
  font-size:var(--fs-body);line-height:1.4;color:var(--fg);transition:border-color var(--dur-1) linear,box-shadow var(--dur-1) linear}
.field textarea{min-height:8.5rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3);opacity:1}
.field input:hover,.field textarea:hover{border-bottom-color:var(--fg-2)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.field .is-invalid,.field [aria-invalid="true"]{border-bottom-color:var(--err);box-shadow:inset 0 -1px 0 var(--err)}
.field-error{font-size:var(--fs-small);line-height:1.4;color:var(--err)}
.req{color:var(--accent)}
.check{display:grid;grid-template-columns:1.25rem 1fr;gap:var(--sp-3);align-items:start;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);cursor:pointer}
.field .check input,.check input{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;min-height:0;padding:0;margin:.1rem 0 0;border:1px solid var(--field-line);background:var(--field);border-radius:var(--radius-0);display:grid;place-items:center;cursor:pointer;transition:background-color var(--dur-1) linear,border-color var(--dur-1) linear}
.check input:hover{border-color:var(--fg-2)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:.35rem;height:.65rem;border:solid var(--bg);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.check input.is-invalid,.check input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.check a{color:var(--fg);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.check a:hover{color:var(--accent)}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4) var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-2)}
.form-note{font-size:.8125rem;color:var(--fg-3)}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{margin-bottom:var(--sp-5);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg);box-shadow:inset 2px 0 0 currentColor;background:var(--field)}
.notice-ok{box-shadow:inset 2px 0 0 var(--ok)}
.notice-err{box-shadow:inset 2px 0 0 var(--err)}
.notice:focus{outline:none}
.notice:focus-visible{outline:2px solid var(--focus)}
.g-recaptcha{min-height:78px}

/* 5e. Header: transparent over the home hero, solid elsewhere; compact after scroll (no blur, no shadow) */
.site-header{position:fixed;inset:0 0 auto;z-index:var(--z-header);color:var(--h-fg);background:var(--h-bg);box-shadow:inset 0 -1px 0 var(--h-rule);
  --h-bg:rgba(6,10,16,.92);--h-fg:var(--on-dark);--h-fg-2:var(--on-dark-2);--h-rule:rgba(241,237,230,.12);--focus:var(--copper-300);--fg:var(--on-dark);--rule-strong:rgba(241,237,230,.4);
  --btn-bg:var(--on-dark);--btn-fg:var(--navy-950);--btn-bg-h:var(--copper-300);--btn-fg-h:var(--navy-950);
  transition:background-color var(--dur-2) linear,box-shadow var(--dur-2) linear,color var(--dur-2) linear}
.site-header.is-solid{--h-bg:var(--navy-950)}
.site-header.is-overlay{--h-bg:rgba(6,10,16,0);--h-rule:rgba(241,237,230,0)}
.site-header.is-overlay.is-scrolled,.site-header.is-overlay.mega-open,.site-header.is-overlay:has(.has-sub.is-open){--h-bg:rgba(6,10,16,.92);--h-rule:rgba(241,237,230,.12)}
.site-header.is-light{--h-bg:var(--paper);--h-fg:var(--ink);--h-fg-2:var(--ink-2);--h-rule:rgba(16,21,28,.12);--focus:var(--navy-900);--fg:var(--ink);--rule-strong:rgba(16,21,28,.42);
  --btn-bg:var(--navy-900);--btn-fg:var(--paper);--btn-bg-h:var(--copper-700);--btn-fg-h:#fff}
.site-header.is-light.mega-open,.site-header.is-light:has(.has-sub.is-open){--h-bg:var(--navy-950);--h-fg:var(--on-dark);--h-fg-2:var(--on-dark-2);--h-rule:rgba(241,237,230,.12);--focus:var(--copper-300);--fg:var(--on-dark);--rule-strong:rgba(241,237,230,.4);
  --btn-bg:var(--on-dark);--btn-fg:var(--navy-950);--btn-bg-h:var(--copper-300);--btn-fg-h:var(--navy-950)}
.site-header.is-light.is-scrolled{--h-bg:rgba(243,240,234,.96)}
/* service pages with a light masthead: the bar takes the masthead's surface */
.site-header.tone-white,.site-header.tone-white.is-scrolled{--h-bg:var(--white)}
.site-header.tone-clay,.site-header.tone-clay.is-scrolled{--h-bg:var(--clay)}
.site-header.tone-clay{--accent-h:var(--copper-800);--btn-bg-h:var(--copper-800)}
.site-header.tone-mist,.site-header.tone-mist.is-scrolled{--h-bg:var(--mist)}
.site-header.tone-stone,.site-header.tone-stone.is-scrolled{--h-bg:var(--stone)}
.site-header.is-light.mega-open,.site-header.is-light:has(.has-sub.is-open){--h-bg:var(--navy-950)}
.header-bar{display:flex;align-items:center;gap:var(--sp-6);height:var(--bar-h);width:min(100% - 2 * var(--gutter), var(--content-max));margin-inline:auto;transition:height var(--dur-2) var(--ease-out)}
.site-header.is-scrolled{--bar-h:var(--bar-h-compact)}
.brand{flex:1 1 0;display:flex;align-items:center;min-height:var(--btn-h-sm);min-width:0;position:relative;z-index:2}
.brand-word{font-family:var(--font-serif);font-size:1.4375rem;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand:focus-visible{outline:none}
.brand:focus-visible .brand-word{outline:2px solid var(--focus);outline-offset:4px}
.nav{flex:0 0 auto;align-self:stretch;display:flex}
.nav-list{display:flex;align-items:stretch;gap:clamp(1.5rem,2.5vw,2.75rem)}
.nav-list > li{display:flex;align-items:center}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:var(--btn-h-sm);font-size:var(--fs-nav);font-weight:500;letter-spacing:var(--ls-nav);line-height:1;color:inherit;white-space:nowrap}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease-out)}
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
.nav-link[aria-current="page"]::after,.nav-link.is-current::after{transform:scaleX(1);background:var(--accent-h,var(--copper-300))}
.site-header.is-light{--accent-h:var(--copper-700)}
.site-header.is-light:has(.has-sub.is-open){--accent-h:var(--copper-300)}
.chev{display:inline-block;width:.4em;height:.4em;margin-left:.55em;border:solid currentColor;border-width:0 1px 1px 0;transform:translateY(-.15em) rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.sub-toggle[aria-expanded="true"] .chev{transform:translateY(.1em) rotate(-135deg)}
.nav-sub-label,.nav-foot{display:none}
.header-actions{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-5);position:relative;z-index:2}
.header-phone{display:inline-flex;align-items:center;min-height:var(--btn-h-sm);font-size:var(--fs-nav);font-weight:500;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - .7rem)/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out)}
.header-phone:hover{background-size:100% 1px}
.hp-short{display:none}
.menu-toggle{display:none;align-items:center;gap:.75rem;min-height:var(--btn-h-sm);padding-inline:.25rem;font-size:var(--fs-nav);font-weight:500;letter-spacing:.02em}
.menu-toggle i{position:relative;display:block;width:1.5rem;height:.625rem}
.menu-toggle .mt-close,.menu-toggle[aria-expanded="true"] .mt-open{display:none}
.menu-toggle[aria-expanded="true"] .mt-close{display:inline}
.menu-toggle i::before,.menu-toggle i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-2) var(--ease-out),top var(--dur-2) var(--ease-out),bottom var(--dur-2) var(--ease-out)}
.menu-toggle i::before{top:0}
.menu-toggle i::after{bottom:0}
.menu-toggle[aria-expanded="true"] i::before{top:calc(50% - .75px);transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] i::after{bottom:calc(50% - .75px);transform:rotate(-45deg)}

/* 5f. Services mega panel (desktop): a navy band with the services as image tiles */
.sub-menu{position:absolute;left:0;right:0;top:100%;z-index:var(--z-mega);display:none;--bg:var(--navy-850);background:var(--bg);box-shadow:inset 0 1px 0 var(--rule)}
.has-sub.is-open > .sub-menu{display:block}
.has-sub.is-open > .sub-menu > .mega{animation:mega-in var(--dur-2) var(--ease-out)}
@keyframes mega-in{from{opacity:0;transform:translateY(-.5rem)}}
.mega{width:min(100% - 2 * var(--gutter), var(--content-max));margin-inline:auto;padding-block:var(--sp-7) var(--sp-6)}
.mega-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--sp-7) var(--gap)}
.mega-item{display:flex;flex-direction:column;gap:var(--sp-2);height:100%}
.mega-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--navy-800);margin-bottom:var(--sp-3)}
.mega-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
.mega-item:hover .mega-media img{transform:scale(1.035)}
.mega-title{font-family:var(--font-serif);font-size:1.375rem;line-height:1.2;letter-spacing:-.004em;width:fit-content;
  background:linear-gradient(var(--copper-300),var(--copper-300)) 0 100%/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out)}
.mega-item:hover .mega-title,.mega-item[aria-current="page"] .mega-title{background-size:100% 1px}
.mega-item.is-text{padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule-strong)}
.mega-item.is-text .mega-title{font-size:1.75rem}
.mega-count{font-size:var(--fs-small);color:var(--fg-3)}
.mega-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-3);box-shadow:inset 0 1px 0 var(--rule)}
.mega-credit{margin:0 auto 0 0;text-align:left}

/* 5g. Footer */
.site-footer{background:var(--navy-950);padding-block:var(--section-s) var(--sp-6);box-shadow:inset 0 1px 0 var(--rule)}
.footer-top{row-gap:var(--sp-5);padding-bottom:var(--sp-8)}
.footer-word{font-family:var(--font-serif);font-size:clamp(3rem,8vw,7.5rem);line-height:1.08;letter-spacing:-.022em;overflow-wrap:break-word;text-wrap:balance;padding-bottom:.06em}
.footer-desc{grid-column:content-start / c 7;font-size:var(--fs-body);color:var(--fg-2);max-width:52ch}
.footer-cols{row-gap:var(--sp-7);padding-block:var(--sp-7) var(--sp-8);box-shadow:inset 0 1px 0 var(--rule)}
.f-title{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600;color:var(--fg-3);margin-bottom:var(--sp-4)}
.f-col ul{display:grid;gap:var(--sp-1)}
.f-col li{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg)}
.f-col a,.f-btn{display:inline-flex;align-items:center;min-height:2rem;font-size:var(--fs-small);color:var(--fg);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-1) linear,color var(--dur-1) linear}
.f-col a:hover,.f-btn:hover{text-decoration-color:currentColor;color:var(--accent)}
.f-col .f-text{color:var(--fg-2);padding-block:.25rem}
.f-who{color:var(--fg-3);margin-left:.35em}
.f-serv{grid-column:content-start / c 4}
.f-nav{grid-column:c 4 / c 6}
.f-contact{grid-column:c 7 / c 10}
.f-legal{grid-column:c 10 / content-end}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3) var(--sp-6);flex-wrap:wrap;padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule);font-size:.8125rem;color:var(--fg-3)}
.to-top{display:inline-flex;align-items:center;gap:.5em;min-height:var(--btn-h-sm);color:var(--fg-2)}
.to-top:hover{color:var(--fg)}

/* 5h. Cookie bar + dialog */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-menu);background:var(--navy-950);box-shadow:inset 0 1px 0 var(--rule)}
.cookie-inner{display:flex;align-items:center;gap:var(--sp-4) var(--sp-7);width:min(100% - 2 * var(--gutter), var(--content-max));margin-inline:auto;padding-block:var(--sp-4)}
.cookie-text{flex:1;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);max-width:80ch}
.cookie-text a{color:var(--fg);text-decoration:underline;text-underline-offset:.2em;margin-left:.25em;white-space:nowrap}
.cookie-text a:hover{color:var(--accent)}
.cookie-actions{display:flex;gap:var(--sp-2);flex:none;margin-left:auto}
.cookie-dialog{width:min(100% - 2 * var(--gutter),34rem);max-height:calc(100svh - 2rem);padding:0;border:0;border-radius:0;background:var(--bg);color:var(--fg)}
.cookie-dialog::backdrop{background:rgba(6,10,16,.7)}
.cookie-dialog-inner{padding:var(--sp-7) var(--sp-6) var(--sp-6);display:grid;gap:var(--sp-5)}
.cookie-intro{font-size:var(--fs-small);color:var(--fg-2)}
.cookie-option{display:flex;justify-content:space-between;gap:var(--sp-5);padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule)}
.cookie-option p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2)}
.cookie-option .cookie-opt-title{font-size:var(--fs-body);font-weight:600;color:var(--fg);margin-bottom:var(--sp-1)}
.switch{position:relative;flex:none;width:2.75rem;height:1.5rem;margin-top:.15rem;cursor:pointer}
.switch input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch input + span{position:absolute;inset:0;pointer-events:none;background:var(--stone);box-shadow:inset 0 0 0 1px var(--rule-strong);transition:background-color var(--dur-1) linear}
.switch input + span::after{content:"";position:absolute;top:.25rem;left:.25rem;width:1rem;height:1rem;background:var(--ink-2);transition:transform var(--dur-2) var(--ease-out),background-color var(--dur-1) linear}
.switch input:checked + span{background:var(--navy-900)}
.switch input:checked + span::after{transform:translateX(1.25rem);background:var(--paper)}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + span{opacity:.55}
.switch input:focus-visible + span{outline:2px solid var(--focus);outline-offset:3px}
.cookie-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);padding-top:var(--sp-2)}
.link-btn{display:inline;font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;color:var(--fg)}
.link-btn:hover{color:var(--accent)}

/* 5i. Breadcrumbs, mastheads */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .6rem;font-size:var(--fs-small);color:var(--fg-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:2rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color var(--dur-1) linear,color var(--dur-1) linear}
.crumbs a:hover{color:var(--fg);text-decoration-color:currentColor}
.crumbs .sep{color:var(--fg-3)}
.crumbs [aria-current]{color:var(--fg);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mast{padding-top:calc(var(--header-h) + var(--sp-6));padding-bottom:var(--sp-9)}
.mast-grid{row-gap:var(--sp-6);align-items:end}
.mast-grid .crumbs{grid-row:1}

/* ---------- 6. Home ---------- */
/* 6a. Hero: the photograph is the page; text on its lower left, scrim only for legibility */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(var(--hero-min),100svh,var(--hero-max));overflow:hidden;background:var(--navy-900)}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media picture,.hero-media img{width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:50% 45%}
/* The scrim is sized for the brightest photograph an administrator may upload (white façade, overcast sky), not for the
   dark demo render: under the text column the combined navy is ≥ 72 % (on-dark text ≥ 4.5:1 on pure white), under the
   headline ≥ 50 % (large text ≥ 3:1), and the top band keeps the transparent header legible. */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,16,.78) 0,rgba(6,10,16,.52) 4.5rem,rgba(6,10,16,0) 10rem),
             linear-gradient(90deg,rgba(10,15,23,.88) 0,rgba(10,15,23,.78) 42%,rgba(10,15,23,.58) 58%,rgba(10,15,23,.24) 74%,rgba(10,15,23,0) 88%),
             linear-gradient(0deg,rgba(10,15,23,.86) 0,rgba(10,15,23,.52) 30%,rgba(10,15,23,0) 58%)}
.hero-body{position:relative;width:100%;padding-block:calc(var(--header-h) + clamp(1.5rem, 5svh, 4rem)) clamp(2rem, 7svh, 6rem);align-items:end;row-gap:var(--sp-7)}
.hero-copy{grid-column:content-start / c 9;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.hero-title{max-width:13.5ch}
.hero-title--split em{display:block}  /* the italic phrase that ends the title always starts its own line */
.hero-lead{color:var(--on-dark);max-width:40ch;margin-top:var(--sp-1)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-4)}
/* the note sits on its own navy plate: legible over any photograph */
.hero-note{grid-column:c 10 / content-end;align-self:end;display:grid;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5) var(--sp-5);background:rgba(6,10,16,.84);box-shadow:inset 0 1px 0 var(--accent);margin-bottom:.4rem}
.hero-note-kicker{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600;color:var(--accent)}
.hero-note-title{font-family:var(--font-serif);font-size:var(--fs-h4);line-height:var(--lh-h4)}
.hero-note-title a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out)}
.hero-note-title a:hover{background-size:100% 1px}
.hero-note-value{font-family:var(--font-serif);font-size:var(--fs-stat);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.hero-note-value .unit{font-size:.5em;margin-left:.1em;color:var(--fg-2)}
.hero-note-label{font-size:var(--fs-small);color:var(--fg)}
.hero-note-meta{font-size:var(--fs-small);color:var(--fg-2)}
/* 6b. Indicators: one row under the hero, vertical hairlines */
.stats-band{padding-block:0 var(--section-s);margin-top:-1px}
.stats{--cols:var(--n,4);--stat-pad:3.5rem;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));box-shadow:inset 0 1px 0 var(--rule);container-type:inline-size}
.stat{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-6) var(--sp-5) 0 0}
.stat + .stat{padding-left:var(--sp-6);box-shadow:inset 1px 0 0 var(--rule)}
/* one size for the whole row, derived from the column width (a long value such as „32.000 m²” never reaches the next column) */
.stat-value{order:-1;font-family:var(--font-serif);font-size:min(var(--fs-stat),(100cqi / var(--cols) - var(--stat-pad)) * .23);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums;color:var(--fg)}
.stat-value [data-count]{white-space:nowrap}
.stat-value .unit{font-size:.5em;margin-left:.1em;color:var(--fg-2)}
.stat-label{font-size:var(--fs-small);color:var(--fg);max-width:24ch;margin-top:var(--sp-2)}
.stat-note{font-size:.75rem;color:var(--fg-3)}
/* 6c. About (dark, right after the projects): portrait bleeding to the left edge, editorial column on the right */
.about{padding-block:var(--section-s)}
.about-grid{row-gap:var(--sp-8);align-items:start}
.about-media{grid-column:full-start / c 6;grid-row:1 / span 2;position:relative}
.about-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about-text{grid-column:c 7 / content-end;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);padding-top:clamp(0rem,4vw,var(--sp-9))}
.about-text .h2{max-width:13ch;margin-bottom:var(--sp-2)}
.about-text .prose{font-size:var(--fs-body)}
.about-text .prose p:first-child{font-size:var(--fs-lead);line-height:1.5;color:var(--fg);text-wrap:balance}
.about--text .about-text{grid-column:c 3 / c 11}
.principles{grid-column:c 7 / content-end;grid-row:2;display:grid;gap:var(--sp-5)}
.about--text .principles{grid-column:c 3 / c 11}
.principles-title{color:var(--fg-3)}
.principles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--gap)}
.principle{display:grid;gap:var(--sp-2);align-content:start;padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule-strong)}
.principle-title{font-family:var(--font-serif);font-size:1.375rem;line-height:1.2;font-weight:400;letter-spacing:-.004em}
.principle p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);max-width:36ch}
/* 6d. Services: an intro, then one chapter per service. Every service has its own surface AND its own composition
   (detail · overlap · panorama · tower, see sv_variant()); light and dark chapters alternate. Right-hand text columns
   start at column 7 on the whole page (about, services intro, overlap panel, panorama body, process lead, contact form). */
.svc-intro{padding-block:var(--section-s) var(--sp-9)}
.svc-intro--joined{padding-bottom:var(--sp-8)}
.svc-intro-grid{row-gap:var(--sp-5);align-items:end}
.svc-intro-grid .kicker{grid-column:content-start / c 7;grid-row:1}
.svc-intro-grid .h2{grid-column:content-start / c 7;grid-row:2;max-width:14ch}
.svc-intro-lead{grid-column:c 7 / content-end;grid-row:2;padding-bottom:.4rem}
.chapter{padding-block:var(--section-s)}
.chapter--joined{padding-top:0}
.chapter-grid{align-items:start}
.chapter-media{position:relative;margin:0}
.chapter-pic{display:block;overflow:hidden;background:var(--rule)}
.chapter-pic picture{display:block}
.chapter-pic img{width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--pos,50% 50%);
  transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%);transition:transform var(--dur-4) var(--ease-out)}
.chapter-pic:hover img{transform:scale(calc(var(--zoom,1) * 1.03))}
.chapter-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);min-width:0}
.chapter-title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);text-wrap:balance}
.chapter-title a{background:linear-gradient(currentColor,currentColor) 0 96%/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out)}
.chapter-title a:hover{background-size:100% 1px}
.chapter-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.chapter-sum{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--fg);max-width:34ch;text-wrap:pretty}
.chapter-desc{font-size:var(--fs-body);color:var(--fg-2);max-width:46ch;text-wrap:pretty}
.chapter-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-2)}   /* the link follows the text: no empty band */
.chapter-count{font-size:var(--fs-small);color:var(--fg-3)}
/* detail (ventilated façades): text left, a tight portrait detail inset on the right */
.chapter--detail .chapter-text{grid-column:content-start / c 7;grid-row:1;align-self:center;padding-right:var(--gap)}
.chapter--detail .chapter-media{grid-column:c 8 / content-end;grid-row:1;--ar:4/5}
/* overlap (aluminium): a wide image bleeding left; the text sits on a plate of the section surface cut into its
   lower right corner (the plate rises over about half of the image) */
.chapter--overlap{--ov:min(20vw,20rem)}
.chapter--overlap .chapter-grid{grid-template-rows:auto var(--ov) auto}
.chapter--overlap .chapter-media{grid-column:full-start / c 11;grid-row:1 / 3;--ar:16/9}
.chapter--overlap .chapter-media .credit{text-align:left;padding-left:var(--gutter)}
.chapter--overlap .chapter-text{grid-column:c 7 / full-end;grid-row:2 / 4;position:relative;z-index:1;background:var(--bg);padding:var(--sp-7) var(--gutter) 0 var(--sp-7)}
@media (min-width:80rem){
  /* the plate sits in the image's lower right corner and ends level with the photograph (no band under the image);
     below 1280 the image is too short for that, the plate then only overlaps the lower edge of the photograph */
  .chapter--overlap .chapter-grid{grid-template-rows:auto}
  .chapter--overlap .chapter-media{grid-row:1}
  .chapter--overlap .chapter-media .credit{position:absolute;left:0;top:100%}
  .chapter--overlap .chapter-text{grid-row:1;align-self:end;padding-bottom:var(--sp-6)}
}
/* panorama (PVC): a 21:9 band across the screen, title and text below in two columns */
.chapter--panorama .chapter-media{grid-column:full-start / full-end;grid-row:1;--ar:21/9;margin-bottom:var(--stack)}
.chapter--panorama .chapter-media .credit{padding-right:var(--gutter)}
.chapter--panorama .chapter-text{grid-column:content-start / content-end;grid-row:2;display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--sp-5)}
.chapter--panorama .chapter-title{grid-column:1 / 7;max-width:12ch}
.chapter--panorama .chapter-body{grid-column:7 / -1;padding-top:.6rem}
/* tower (glass façades): a tall portrait bleeding left, an oversized title and the text at its foot */
.chapter--tower .chapter-media{grid-column:full-start / c 6;grid-row:1;--ar:2/3}
.chapter--tower .chapter-pic img{max-height:min(58rem,92svh)}
.chapter--tower .chapter-text{grid-column:c 7 / content-end;grid-row:1;align-self:end;gap:var(--sp-6);padding-block:var(--sp-2) var(--sp-6)}
.chapter--tower .chapter-title{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:9ch}
/* a service without an image (none set, or its only photograph is already shown in the projects): a typographic
   chapter on the same grid — a large title on the left half, the text from column 7, no empty frame */
.chapter.chapter--text .chapter-grid{grid-template-rows:none}
.chapter.chapter--text .chapter-text{grid-column:content-start / content-end;grid-row:1;display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--sp-5);gap:var(--sp-5) var(--gap);padding:0;background:none;position:static}
.chapter.chapter--text .chapter-title{grid-column:1 / 7;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:10ch}
.chapter.chapter--text .chapter-body{grid-column:7 / -1;padding-top:.6rem}
.process-media .credit{padding-right:var(--gutter)}   /* figure that bleeds to the right edge */
/* 6e. Process (light, before the dark contact): header row, an optional wide photograph, then a timeline */
.process{padding-block:var(--section)}
.process-head{row-gap:var(--sp-5);align-items:end;margin-bottom:var(--stack)}
.process-head .kicker{grid-column:content-start / c 7}
.process-head .h2{grid-column:content-start / c 7;grid-row:2;max-width:16ch}
.process-lead{grid-column:c 7 / content-end;grid-row:2;padding-bottom:.4rem}
.process-media{position:relative;margin-bottom:var(--sp-9)}
.process-media img{width:100%;aspect-ratio:21/9;object-fit:cover}
.steps{--line-y:calc(var(--fs-numeral) * var(--lh-numeral) + var(--sp-5) + 4px);position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));column-gap:var(--gap)}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:var(--line-y);height:1px;background:var(--rule-strong)}
.steps::after{background:var(--accent);transform-origin:left;transform:scaleX(1)}
.step{position:relative;display:flex;flex-direction:column;min-width:0}
.step-num{font-family:var(--font-serif);font-size:var(--fs-numeral);line-height:var(--lh-numeral);letter-spacing:var(--ls-numeral);font-variant-numeric:lining-nums;color:var(--fg)}
.step-mark{position:relative;z-index:1;display:block;width:9px;height:9px;margin-block:var(--sp-5) var(--sp-6);background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.step-title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);max-width:14ch;margin-bottom:var(--sp-3);text-wrap:balance}
.step-text{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);max-width:32ch;padding-right:var(--sp-4);text-wrap:pretty}
/* side by side, every title reserves two lines: the four descriptions start on one line under the straight timeline */
@media (min-width:48rem){.steps .step-title{min-height:calc(2em * var(--lh-h4))}}
.steps--next{--fs-numeral:clamp(3rem,2.2rem + 3.5vw,5.5rem)}
/* compact (service pages): one row, small numerals, a short rule — not a second full-size block */
.steps--compact{--fs-numeral:3rem}
.steps--compact .step-mark{margin-block:var(--sp-4) var(--sp-5)}
.steps--compact .step-title{font-size:1.25rem;line-height:var(--lh-h4);max-width:16ch;margin-bottom:var(--sp-2)}
.steps--compact{--line-y:calc(var(--fs-numeral) * var(--lh-numeral) + var(--sp-4) + 4px)}
/* 6f. Projects: the editorial grid (shared by home, /portofoliu, service pages) */
.works{padding-block:var(--section)}
.works--home{padding-block:var(--section-s)}   /* the first section after the hero: the centrepiece */
.works-head{row-gap:var(--sp-5);align-items:end;margin-bottom:var(--stack)}
.works-head .kicker{grid-column:content-start / c 7}
.works-head .h2,.works-head .h3{grid-column:content-start / c 9;grid-row:2;max-width:18ch}
.works-head .works-all{grid-column:c 9 / content-end;grid-row:2;justify-self:end}
.works-head .demo-note{grid-column:content-start / c 8;grid-row:3;margin-top:var(--sp-2)}
/* home: the projects open the page — a larger title, the demo note and the link in the right-hand column, and the
   dominant photograph bleeding off the left edge of the screen */
.works-head--home .h1{grid-column:content-start / c 7;grid-row:2;max-width:12ch}
.works-side{grid-column:c 7 / content-end;grid-row:2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-4) var(--sp-6);padding-bottom:.35rem}
.works-head .works-side .demo-note{margin:0;max-width:40ch}
.works-head .works-side .works-all{margin-left:auto}
.pf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;column-gap:var(--gap);row-gap:var(--sp-8);align-items:start}
.work-tile{min-width:0}
.tile-link{display:flex;flex-direction:column;height:100%}
.tile-media{position:relative;display:block;overflow:hidden;background:var(--stone)}
.tile-media picture,.tile-media img{width:100%;height:100%}
.tile-media img{object-fit:cover;aspect-ratio:var(--ar,4/3);transition:transform var(--dur-4) var(--ease-out)}
.tile-link:hover .tile-media img{transform:scale(1.035)}
.tile-cap{display:grid;gap:var(--sp-2);padding-top:var(--sp-4);justify-items:start}
.tile-cat{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600;color:var(--accent)}
.tile-title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);max-width:26ch;text-wrap:balance;color:var(--fg)}
.tile-title span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out)}
.tile-link:hover .tile-title span,.tile-link:focus-visible .tile-title span{background-size:100% 1px}
.tile-meta{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-3)}
.work-tile.is-text .tile-cap{padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--rule-strong)}
.work-tile.is-text .tile-title{font-size:var(--fs-h3);line-height:var(--lh-h3)}
/* a project without a free photograph on this page: a typographic row after the editorial composition */
.pf-grid > .pf-note{grid-column:1 / -1;order:1}
.pf-note .tile-cap{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-2)}
/* desktop composition: [dominant | 2 stacked] · [portrait | landscape] · [landscape | portrait] · full */
.pf-dom{grid-column:1 / 9;grid-row:span 2;align-self:stretch}
.pf-dom .tile-media{flex:1 1 auto;min-height:22rem}
.pf-dom .tile-media picture{position:absolute;inset:0}
.pf-dom .tile-media img{aspect-ratio:auto}
.pf-full .tile-title{font-size:var(--fs-h3);line-height:var(--lh-h3);max-width:22ch}
/* the dominant image ends level with the image of the second small tile: the captions of the group have one fixed
   height (label + two lines of title + meta) and one title size; titles are kept to two lines there */
.pf-grid{--cap-h:calc(var(--sp-4) + var(--fs-label) * var(--lh-label) + 2 * var(--sp-2) + 2 * var(--fs-h4) * var(--lh-h4) + var(--fs-small) * var(--lh-small))}
.pf-grid--nometa{--cap-h:calc(var(--sp-4) + var(--fs-label) * var(--lh-label) + var(--sp-2) + 2 * var(--fs-h4) * var(--lh-h4))}
.pf-dom .tile-cap,.pf-side .tile-cap{height:var(--cap-h);align-content:start;overflow:hidden}
.pf-dom .tile-title,.pf-side .tile-title{font-size:var(--fs-h4);line-height:var(--lh-h4);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pf-full .tile-media img{max-height:min(46rem,78svh)}   /* a single wide tile is never blown up to a full screen */
@media (min-width:64rem){
  .works--home{--bleed:max(var(--gutter),(100vw - var(--content-max)) / 2)}
  .works--home .pf-dom .tile-media{margin-left:calc(-1 * var(--bleed))}
}
.pf-side{grid-column:9 / 13;--ar:3/2}
.pf-por{grid-column:1 / 6;--ar:4/5}
.pf-land{grid-column:6 / 13;--ar:16/10;align-self:end}
.pf-land-l{grid-column:1 / 8;--ar:16/10;align-self:end}
.pf-por-r{grid-column:8 / 13;--ar:4/5}
.pf-full{grid-column:1 / 13;--ar:16/9}
.pf-grid--row{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}   /* 2 related projects: two halves, no empty third column */
.pf-grid--row .work-tile{grid-column:auto;--ar:4/3}
.works-more{margin-top:var(--sp-7)}
.works-more > *{justify-self:start}
.empty{grid-column:content-start / c 9;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding-block:var(--sp-8);box-shadow:inset 0 1px 0 var(--rule-strong)}
.empty .h3{max-width:22ch}
.empty p{color:var(--fg-2);max-width:52ch}
.empty--dark{padding-block:var(--sp-9)}
/* 6g. Contact section: dark, over a darkened photograph; data left, short form right */
.contact-sec{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--section)}
.contact-bg{position:absolute;inset:0;z-index:-1}
.contact-bg picture,.contact-bg img{width:100%;height:100%}
.contact-bg img{object-fit:cover;object-position:50% 60%}
.contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,23,.94) 0,rgba(10,15,23,.84) 38%,rgba(10,15,23,.45) 100%),linear-gradient(0deg,rgba(10,15,23,.6),rgba(10,15,23,0) 45%)}
.contact-grid{row-gap:var(--sp-8);align-items:start}
.contact-info{grid-column:content-start / c 6;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.contact-title{max-width:14ch}
.contact-text{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--fg-2);max-width:38ch}
.contact-data{display:grid;gap:var(--sp-5);margin-top:var(--sp-4);align-self:stretch}
.contact-data > div{display:grid;gap:var(--sp-1);padding-top:var(--sp-3);box-shadow:inset 0 1px 0 var(--rule)}
.contact-data dt{font-size:.8125rem;color:var(--fg-3)}
.contact-data > div > dd{font-size:1.25rem;line-height:1.4;color:var(--fg)}
.contact-data a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1) linear}
.contact-data a:hover{background-size:100% 1px;color:var(--accent)}
.phone-list{display:grid;gap:var(--sp-1)}
.phone-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em}
.phone-list a{font-variant-numeric:tabular-nums}
.ph-who{font-size:var(--fs-small);color:var(--fg-3)}
.contact-panel{grid-column:c 7 / content-end;background:var(--navy-950);padding:clamp(1.5rem,3vw,3rem);--field:var(--navy-850)}
/* light variant (service pages): the section separates from the dark footer; the form keeps its dark plate */
.contact-sec--light{padding-block:var(--section-s)}
.contact-sec--light .contact-data > div > dd{font-size:1.125rem}
/* 6h. Closing contact band (project page, portfolio): the same surface as the footer and no rule between them —
   one deliberate ending (the band opens it, the footer wordmark closes it) instead of two dark blocks run together */
.cta-band{--bg:var(--navy-950);padding-block:var(--section-s) var(--sp-9)}
main:has(> .cta-band:last-child) + .site-footer{box-shadow:none;padding-top:0}
.cta-grid{row-gap:var(--sp-6);align-items:end}
.cta-copy{grid-column:content-start / c 8;display:grid;gap:var(--sp-5)}
.cta-copy .h2{max-width:16ch}
.cta-side{grid-column:c 9 / content-end;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.cta-text{color:var(--fg-2);max-width:40ch}
.cta-phones{display:grid;gap:var(--sp-1);font-size:1.25rem}
.cta-phones span{font-size:var(--fs-small);color:var(--fg-3);margin-left:.35em}
.cta-phones a:hover{color:var(--accent)}

/* ---------- 7. /portofoliu ---------- */
.pf-mast .mast-title{grid-column:content-start / c 7;grid-row:2;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.mast-side{grid-column:c 8 / content-end;grid-row:2;display:grid;gap:var(--sp-5);padding-bottom:.6rem}
.mast-count{display:flex;align-items:baseline;gap:.6em;font-size:var(--fs-small);color:var(--fg-2);padding-top:var(--sp-3);box-shadow:inset 0 1px 0 var(--rule)}
.mast-count-num{font-family:var(--font-serif);font-size:var(--fs-h3);line-height:1;color:var(--fg);font-variant-numeric:lining-nums}
.filters-bar{position:sticky;top:var(--bar-h-compact);z-index:5;box-shadow:inset 0 -1px 0 var(--rule)}
.filters{display:flex;gap:var(--sp-6);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.chip{position:relative;flex:none;display:inline-flex;align-items:baseline;gap:.4em;min-height:3.5rem;padding-top:1.15rem;font-size:var(--fs-nav);font-weight:500;color:var(--fg-2);white-space:nowrap;transition:color var(--dur-1) linear}
.chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
.chip:hover{color:var(--fg)}
.chip.is-active{color:var(--fg)}
.chip.is-active::after{transform:scaleX(1)}
.chip-count{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.works--page{padding-top:var(--sp-8)}

/* ---------- 8. Service page ---------- */
/* masthead: each service has its own surface (sv_mast_theme) and composition (sv_variant) */
.svc-mast{padding-bottom:var(--section-s)}
.svc-mast-grid{row-gap:var(--sp-6);align-items:end}
.svc-mast-grid > .crumbs{grid-column:content-start / content-end;grid-row:1}
.svc-mast-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);min-width:0}
.svc-lead{max-width:34ch}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6);margin-top:var(--sp-3)}
.svc-mast-media{position:relative;margin:0;min-width:0}
.svc-mast-pic{overflow:hidden;background:var(--rule)}
.svc-mast-pic picture{display:block}
.svc-mast-pic img{width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%)}
/* detail (PVC, white): a portrait detail bleeding left, the copy on the right column */
.svc-mast--detail .svc-mast-media{grid-column:full-start / c 6;grid-row:2;--ar:4/5}
.svc-mast--detail .svc-mast-copy{grid-column:c 7 / content-end;grid-row:2;padding-bottom:var(--sp-4)}
/* overlap (aluminium, anthracite): copy left, a large landscape bleeding right */
.svc-mast--overlap .svc-mast-copy{grid-column:content-start / c 6;grid-row:2;padding-bottom:var(--sp-4)}
.svc-mast--overlap .svc-mast-media{grid-column:c 7 / full-end;grid-row:2;--ar:4/3}
.svc-mast--overlap .svc-mast-media .credit{padding-right:var(--gutter)}
/* panorama (ventilated façades, clay): title and copy on one row, then a panoramic band from edge to edge */
.svc-mast--panorama{padding-bottom:var(--sp-4)}
.svc-mast--panorama .svc-mast-copy{grid-column:content-start / content-end;grid-row:2;display:grid;grid-template-columns:subgrid;align-items:end;row-gap:var(--sp-5)}
.svc-mast--panorama .svc-title{grid-column:1 / 7;grid-row:1 / span 2;align-self:end}
.svc-mast--panorama .svc-lead{grid-column:7 / -1;grid-row:1}
.svc-mast--panorama .svc-actions{grid-column:7 / -1;grid-row:2;margin-top:0}
.svc-mast--panorama .svc-mast-media{grid-column:full-start / full-end;grid-row:3;--ar:21/9;margin-top:var(--sp-6)}
.svc-mast--panorama .svc-mast-media .credit{padding-right:var(--gutter)}
/* tower (glass façades, cool grey): an oversized title and a tall image bleeding right */
.svc-mast--tower .svc-mast-copy{grid-column:content-start / c 8;grid-row:2;padding-bottom:var(--sp-4)}
.svc-mast--tower .svc-title{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:8ch}
.svc-mast--tower .svc-mast-media{grid-column:c 8 / full-end;grid-row:2;--ar:3/4}
.svc-mast--tower .svc-mast-pic img{max-height:min(50rem,84svh)}
.svc-mast--tower .svc-mast-media .credit{padding-right:var(--gutter)}
.svc-mast--text .svc-mast-copy{grid-column:content-start / c 10;grid-row:2;display:flex}
.svc-mast--text .svc-title{font-size:var(--fs-display);line-height:var(--lh-display)}
/* „Despre serviciu” (+ the compact process on the same surface after a light masthead) */
.svc-about,.svc-process{padding-block:var(--section-s)}
/* „Despre serviciu”: one composition per service (the masthead's variant), built from the CMS text only — a lead
   sentence in the serif, the rest as body text — plus, when one exists, a photograph not used elsewhere on the page.
   Stacked below 64rem; on desktop: panorama = two text columns over a wide band · overlap = a technical sheet (photo
   bleeding left) · detail = a centred statement · tower = an oversized statement beside a tall photo */
.svc-about-grid{row-gap:var(--sp-5);align-items:start}
.svc-about-grid > *{grid-column:content-start / content-end}
.svc-prose-lead{font-family:var(--font-serif);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.25rem);line-height:1.3;letter-spacing:-.008em;color:var(--fg);max-width:32ch;text-wrap:pretty}
.svc-prose{max-width:58ch}
.svc-about-media{position:relative;margin:var(--sp-4) 0 0;min-width:0}
.svc-about-pic{overflow:hidden;background:var(--rule)}
.svc-about-pic picture{display:block}
.svc-about-pic img{width:100%;height:auto;aspect-ratio:var(--ar,3/2);object-fit:cover}
@media (min-width:64rem){
  .svc-about-grid{row-gap:var(--sp-6)}
  /* panorama (PVC): the lead and the body side by side, the photograph as a wide band under them */
  .svc-about--panorama .svc-about-kicker{grid-row:1}
  .svc-about--panorama .svc-prose-lead{grid-column:content-start / c 7;grid-row:2;font-size:var(--fs-h3);line-height:var(--lh-h3);max-width:20ch}
  .svc-about--panorama .svc-prose{grid-column:c 8 / content-end;grid-row:2;padding-top:.5rem}
  .svc-about--panorama .svc-about-media{grid-column:full-start / full-end;grid-row:3;margin-top:var(--sp-7);--ar:21/9}
  .svc-about--panorama .svc-about-media .credit{padding-right:var(--gutter)}
  /* overlap (aluminium): a technical sheet — label column, lead, body under a hairline */
  .svc-about--overlap .svc-about-kicker{grid-column:content-start / c 4;grid-row:1;padding-top:.7rem}
  .svc-about--overlap .svc-prose-lead{grid-column:c 4 / content-end;grid-row:1}
  .svc-about--overlap .svc-prose{grid-column:c 4 / c 11;grid-row:2;padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--rule-strong)}
  .svc-about--overlap .has-image,.svc-about--tower .has-image{grid-template-rows:auto auto auto 1fr}   /* the photo's extra height goes below the text */
  .svc-about--overlap .has-image .svc-about-media{grid-column:full-start / c 6;grid-row:1 / span 4;margin:0;--ar:4/5}
  .svc-about--overlap .has-image .svc-about-kicker{grid-column:c 7 / content-end;padding-top:var(--sp-7)}
  .svc-about--overlap .has-image .svc-prose-lead{grid-column:c 7 / content-end;grid-row:2}
  .svc-about--overlap .has-image .svc-prose{grid-column:c 7 / content-end;grid-row:3}
  /* detail (ventilated façades): a centred statement on the axis of the page */
  .svc-about--detail .svc-about-grid{justify-items:center;text-align:center}
  .svc-about--detail .svc-about-kicker{grid-column:c 3 / c 11}
  .svc-about--detail .svc-prose-lead{grid-column:c 2 / content-end;font-size:var(--fs-h3);line-height:var(--lh-h3);max-width:26ch;text-wrap:balance}
  .svc-about--detail .svc-prose{grid-column:c 4 / c 10;text-wrap:balance}
  .svc-about--detail .svc-about-media{grid-column:c 4 / c 10;width:100%;margin-top:var(--sp-6);--ar:3/2}
  /* tower (glass façades): an oversized statement, the body below on the right; a tall photograph beside it */
  .svc-about--tower .svc-about-kicker{grid-column:content-start / c 5;grid-row:1}
  .svc-about--tower .svc-prose-lead{grid-column:content-start / c 12;grid-row:2;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);max-width:22ch;text-wrap:balance}
  .svc-about--tower .svc-prose{grid-column:c 7 / content-end;grid-row:3}
  .svc-about--tower .has-image .svc-prose-lead{grid-column:content-start / c 9;font-size:var(--fs-h3);line-height:var(--lh-h3)}
  .svc-about--tower .has-image .svc-prose{grid-column:c 4 / c 9}
  .svc-about--tower .has-image .svc-about-media{grid-column:c 10 / full-end;grid-row:1 / span 4;margin:0;--ar:2/3}
  .svc-about--tower .has-image .svc-about-media .credit{padding-right:var(--gutter)}
}
.svc-steps-head{row-gap:var(--sp-4);align-items:baseline;margin-bottom:var(--sp-7)}
.svc-steps-head::before{content:"";grid-column:content-start / content-end;grid-row:1;height:1px;background:var(--rule)}
.svc-steps-head .kicker{grid-column:content-start / c 7;grid-row:2}
.svc-steps-head .link-arrow{grid-column:c 7 / content-end;grid-row:2;justify-self:end}
.svc-about.has-process .svc-about-grid + .svc-steps-head{margin-top:var(--section-s)}
.svc-works{padding-block:var(--section-s) var(--section)}
.siblings{padding-block:var(--section-s)}
.siblings-head{row-gap:var(--sp-4);margin-bottom:var(--sp-7)}
.sib-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--sp-7) var(--gap)}
.sib{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.sib-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--rule)}
.sib-credit{margin-top:var(--sp-5);text-align:left}
.sib-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
.sib:hover .sib-media img{transform:scale(1.035)}
.sib-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);font-family:var(--font-serif);font-size:var(--fs-h4);line-height:var(--lh-h4)}
.sib-title > span:first-child{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-2) var(--ease-out)}
.sib:hover .sib-title > span:first-child{background-size:100% 1px}
.sib-title .arr{font-size:1.125rem}
.sib-sum{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);max-width:40ch}
.sib.is-text{padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule-strong)}

/* ---------- 9. Project page ---------- */
/* a compact masthead: the first photograph starts in the upper half of the screen */
.work-mast{padding-top:calc(var(--header-h) + var(--sp-5));padding-bottom:var(--sp-6)}
.work-mast-grid{row-gap:var(--sp-4);align-items:end}
.work-mast-grid > .crumbs{grid-row:1}
.work-kicker{grid-row:2;margin-top:var(--sp-4)}
.work-kicker .sep{color:var(--fg-3)}
.work-kicker-demo{white-space:nowrap;color:var(--fg-2)}   /* „· Exemplu demonstrativ” never splits after the dot */
.work-title{grid-column:content-start / c 9;grid-row:3;max-width:20ch;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.work-demo-notice{grid-column:c 9 / content-end;grid-row:3;align-self:end;margin-bottom:.5rem}
.work-facts{grid-row:4}
.work-facts{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-9);margin-top:var(--sp-3);padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule)}
.work-facts div{display:grid;gap:var(--sp-1)}
.work-facts dt{font-size:.8125rem;color:var(--fg-3)}
.work-facts dd{font-size:1.125rem;font-variant-numeric:tabular-nums}
.demo-notice{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--fg-2);max-width:62ch;padding-left:var(--sp-4);box-shadow:inset 1px 0 0 var(--accent)}
.gallery{--bg:var(--navy-950);background:var(--bg);padding-bottom:var(--sp-7)}
.slider-stage{position:relative;height:min(84svh,58vw);min-height:20rem;background:var(--navy-950)}
.slider-clip{height:100%;overflow:hidden}
.slider-track{display:flex;height:100%;transition:transform 500ms var(--ease-io);will-change:transform}
.slider.is-dragging .slider-track{transition:none}
.slide{flex:0 0 100%;height:100%;margin:0}
.slide-zoom{display:block;width:100%;height:100%;cursor:zoom-in}
.slide-zoom:focus-visible{outline-offset:-4px}
.slide picture,.slide img{width:100%;height:100%}
.slide img{object-fit:contain;user-select:none;-webkit-user-drag:none}
.gal-bar{display:flex;align-items:center;gap:var(--sp-5) var(--sp-6);padding-top:var(--sp-5)}
.gal-count{flex:none;min-width:4.5rem;font-size:var(--fs-small);font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--fg)}
.slider-thumbs{flex:1;display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;padding:4px 3px 10px;margin-block:-4px -10px}
.slider-thumbs::-webkit-scrollbar{display:none}
.thumb{position:relative;flex:0 0 auto;width:5.5rem;aspect-ratio:3/2;opacity:.5;transition:opacity var(--dur-1) linear}
.thumb picture,.thumb img{width:100%;height:100%}
.thumb img{object-fit:cover}
.thumb:hover{opacity:.85}
.thumb.is-active,.thumb[aria-current="true"]{opacity:1}
.thumb[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--accent)}
.gal-nav{display:flex;gap:var(--sp-1);flex:none}
.gal-btn{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;font-size:1.125rem;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule-strong);transition:box-shadow var(--dur-1) linear,background-color var(--dur-1) linear}
.gal-btn:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.gal-full{flex:none;min-height:3rem;padding-inline:var(--sp-2);font-size:var(--fs-small);font-weight:500;color:var(--fg-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:color var(--dur-1) linear,text-decoration-color var(--dur-1) linear}
.gal-full:hover{color:var(--fg);text-decoration-color:currentColor}
.gal-credit{flex:none;margin:0;text-align:left}
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;align-items:center;justify-content:center;padding:4.5rem var(--gutter) 5.5rem;background:var(--navy-950);
  --fg:var(--on-dark);--fg-2:var(--on-dark-2);--rule-strong:rgba(241,237,230,.4);--focus:var(--copper-300);color:var(--on-dark);animation:lb-in 200ms linear}
@keyframes lb-in{from{opacity:0}}
.lb-figure{width:100%;height:100%;display:flex;align-items:center;justify-content:center;margin:0}
.lb-figure img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--sp-4);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4)}
.lb-counter{font-size:var(--fs-small);font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lb-close{position:absolute;top:var(--sp-3);right:var(--gutter);display:inline-flex;align-items:center;gap:.75rem;min-height:3rem;padding-inline:var(--sp-2);font-size:var(--fs-small);font-weight:500}
.lb-close i{position:relative;width:1rem;height:1rem}
.lb-close i::before,.lb-close i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.lb-close i::after{transform:rotate(-45deg)}
.story{padding-block:var(--section-s)}
.story-grid{row-gap:var(--sp-6)}
.story-side{grid-column:content-start / c 4;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);padding-top:.5rem}
.story-body{grid-column:c 5 / c 12;display:grid;gap:var(--sp-6)}
.story-lead{font-family:var(--font-serif);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.25rem);line-height:1.3;letter-spacing:-.008em;color:var(--fg);max-width:34ch;text-wrap:pretty}
.related{padding-block:var(--section-s) var(--section)}

/* ---------- 10. /contact ---------- */
.contact-mast{padding-bottom:var(--section-s)}
.contact-mast-grid{row-gap:var(--sp-8);align-items:start}
.contact-mast-copy{grid-column:content-start / c 6;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.contact-mast-copy .h1{margin-top:var(--sp-7);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.contact-mast-copy .lead{max-width:36ch}
.contact-extra{color:var(--fg-2);max-width:42ch}
.contact-mast-copy .contact-data{margin-top:var(--sp-5)}
.map-link{display:flex;width:fit-content;margin-top:var(--sp-2);font-size:var(--fs-small)}
.sched{display:grid;gap:var(--sp-1);font-size:1.0625rem}
.sched > div{display:flex;justify-content:space-between;gap:var(--sp-5);max-width:24rem}
.sched dt{font-size:inherit;color:var(--fg)}
.sched dd{color:var(--fg-2);font-variant-numeric:tabular-nums}
.contact-form-card{grid-column:c 7 / content-end;padding:clamp(1.5rem,3.2vw,3.5rem);margin-top:var(--sp-7);box-shadow:none}
.form-title{margin-bottom:var(--sp-6)}
.form-for{display:block;margin-top:var(--sp-2);font-family:var(--font-sans);font-size:var(--fs-small);letter-spacing:0;color:var(--fg-2)}
.next{padding-block:var(--section-s) var(--section)}
.next-head{row-gap:var(--sp-4);margin-bottom:var(--sp-8)}
.next-head .h2{max-width:18ch}

/* ---------- 11. Legal, 404 ---------- */
.legal-mast{padding-bottom:var(--sp-8)}
.legal-mast-grid{row-gap:var(--sp-6)}
.legal-mast .h1{max-width:18ch}
.legal-section{padding-block:var(--sp-8) var(--section)}
.legal-layout{row-gap:var(--sp-6);align-items:start;box-shadow:inset 0 1px 0 transparent}
.legal-aside{grid-column:content-start / c 4;position:sticky;top:calc(var(--bar-h-compact) + var(--sp-6));display:grid;gap:var(--sp-1);padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule)}
.legal-aside:empty{box-shadow:none}
.legal-meta{font-size:.8125rem;color:var(--fg-3)}
.legal-date{font-size:var(--fs-body);color:var(--fg);margin-bottom:var(--sp-5)}
.legal-toc ol{display:grid;gap:0;counter-reset:none}
.legal-toc a{display:block;padding-block:.35rem;font-size:var(--fs-small);line-height:1.35;color:var(--fg-2);box-shadow:inset 1px 0 0 var(--rule);padding-left:var(--sp-4);transition:color var(--dur-1) linear,box-shadow var(--dur-1) linear}
.legal-toc a:hover{color:var(--fg)}
.legal-toc a.is-active{color:var(--fg);box-shadow:inset 2px 0 0 var(--accent)}
.legal{grid-column:c 5 / content-end;max-width:68ch;font-size:var(--fs-body);line-height:1.7;color:var(--fg-2)}
.legal h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--fg);margin:var(--sp-8) 0 var(--sp-4);padding-top:var(--sp-4);box-shadow:inset 0 1px 0 var(--rule)}
.legal h2:first-child{margin-top:0}
.legal p,.legal ul{margin-bottom:var(--sp-4)}
.legal ul{padding-left:1.15rem;list-style:square}
.legal li{margin-bottom:var(--sp-2);padding-left:.25rem}
.legal li::marker{color:var(--accent)}
.legal strong{color:var(--fg);font-weight:600}
.legal a{color:var(--fg);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.legal a:hover{color:var(--accent)}
.error-mast{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,52rem);display:flex;align-items:flex-end}
.error-mast > .grid-12{width:100%}
.error-bg{position:absolute;inset:0;z-index:-1;opacity:.35}
.error-bg picture,.error-bg img{width:100%;height:100%}
.error-bg img{object-fit:cover}
.error-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-900) 10%,rgba(10,15,23,.4)),linear-gradient(0deg,var(--navy-900),rgba(10,15,23,0) 60%)}
.error-grid{row-gap:var(--sp-5)}
.error-grid > *{grid-column:content-start / c 9}
.error-grid .h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:12ch}
.error-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-4)}

/* ---------- 12. Motion ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);transition-delay:var(--rd,0ms)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}
.js-reveal .work-tile.reveal{transform:none}
.js-reveal .steps::after{transform:scaleX(0);transition:transform var(--dur-4) var(--ease-io) 200ms}
.js-reveal .steps.is-drawn::after{transform:scaleX(1)}
/* the hero (photograph and text) is never faded in: it is the LCP */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
  .js-reveal .reveal{opacity:1;transform:none}
  .js-reveal .steps::after{transform:none}
  .tile-link:hover .tile-media img,.sib:hover .sib-media img,.mega-item:hover .mega-media img{transform:none}
  .chapter-pic:hover img{transform:scale(var(--zoom,1))}
}

/* ---------- 13. Responsive ---------- */
/* Small desktops 1024–1279: tighter header */
@media (max-width:79.99rem){
  .header-phone{display:none}
  /* a long company name wraps to two lines instead of being cut */
  .brand-word--long{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:1.125rem;line-height:1.1;max-width:16em}
  .chapter--detail .chapter-media{grid-column:c 8 / content-end}
  .hero-copy{grid-column:content-start / c 10}
  .hero-note{grid-column:c 10 / content-end}
  .f-serv{grid-column:content-start / c 4}
  .f-nav{grid-column:c 4 / c 6}
  .f-contact{grid-column:c 6 / c 10}
  .f-legal{grid-column:c 10 / content-end}
}

/* Below the desktop navigation: < 1024 (tablet) */
@media (max-width:63.99rem){
  :root{--header-h:4rem;--bar-h-compact:3.5rem}
  .brand{flex:1 1 auto}
  .header-actions{flex:0 0 auto;gap:var(--sp-4)}
  .menu-toggle{display:inline-flex}
  /* full-screen menu panel (inside the header, under the bar) */
  .nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding-top:var(--bar-h);background:var(--navy-900);color:var(--on-dark);
    overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .nav.is-open{visibility:visible;opacity:1;transition-delay:0s}
  .site-header.menu-open{--h-bg:var(--navy-900);--h-fg:var(--on-dark);--h-rule:rgba(241,237,230,.12);--focus:var(--copper-300);--fg:var(--on-dark);--btn-bg:var(--on-dark);--btn-fg:var(--navy-950);--btn-bg-h:var(--copper-300);--btn-fg-h:var(--navy-950);--rule-strong:rgba(241,237,230,.4)}
  .site-header.menu-open .header-cta,.site-header.menu-open .header-phone{visibility:hidden}
  .nav-list{display:block;width:min(100% - 2 * var(--gutter), 40rem);margin:var(--sp-5) var(--gutter) 0;flex:none}
  .nav-list > li{display:block;box-shadow:inset 0 -1px 0 rgba(241,237,230,.14)}
  .nav-link{display:flex;width:100%;min-height:4.25rem;font-family:var(--font-serif);font-size:clamp(2rem,1.6rem + 1.6vw,2.5rem);font-weight:400;letter-spacing:-.01em;line-height:1.1}
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{color:var(--copper-300)}
  .sub-toggle{display:none}
  .nav-sub-label{display:flex;align-items:center;min-height:4.25rem;font-family:var(--font-serif);font-size:clamp(2rem,1.6rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.01em}
  .sub-menu{position:static;display:block;background:none;box-shadow:none}
  .has-sub.is-open > .sub-menu > .mega{animation:none}
  .mega{width:auto;padding:0 0 var(--sp-4) var(--sp-5)}
  .mega-grid{display:grid;grid-template-columns:1fr;gap:0}
  .mega-item{display:flex;flex-direction:row;align-items:center;min-height:var(--btn-h-sm);gap:var(--sp-3)}
  .mega-media,.mega-count,.mega-foot{display:none}
  .mega-item.is-text{padding-top:0;box-shadow:none}
  .mega-title,.mega-item.is-text .mega-title{font-family:var(--font-sans);font-size:1.0625rem;line-height:1.3;color:var(--on-dark-2)}
  .mega-item[aria-current="page"] .mega-title{color:var(--copper-300)}
  .nav-foot{display:grid;gap:var(--sp-5);width:min(100% - 2 * var(--gutter), 40rem);margin:auto var(--gutter) 0;padding-block:var(--sp-7) var(--sp-6)}
  .nav-contact{display:grid;gap:var(--sp-1);font-size:1.0625rem}
  .nav-contact a{display:inline-flex;align-items:center;min-height:var(--btn-h-sm)}
  .nav-contact span{color:var(--on-dark-3);font-size:var(--fs-small);margin-left:.4em}
  .nav-cta{width:100%}
  /* hero: the text runs across the whole width, so the scrim rises from the bottom (≥ 78 % under the lead) */
  .hero-media::after{background:linear-gradient(180deg,rgba(6,10,16,.82) 0,rgba(6,10,16,.62) 4rem,rgba(6,10,16,0) 9rem),
    linear-gradient(0deg,rgba(10,15,23,.9) 0,rgba(10,15,23,.8) 40%,rgba(10,15,23,.66) 70%,rgba(10,15,23,.5) 100%)}
  .hero-copy{grid-column:content-start / content-end}
  .hero-note{grid-column:content-start / c 7;grid-row:2}
  /* indicators: 2 × 2 */
  .stats{--cols:2;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-6)}
  .stat:nth-child(odd){padding-left:0;box-shadow:none}
  .stat:nth-child(n+3){padding-top:var(--sp-6);box-shadow:inset 0 1px 0 var(--rule)}
  .stat:nth-child(4){box-shadow:inset 0 1px 0 var(--rule),inset 1px 0 0 var(--rule)}
  /* about: photo 5 cols / text 7 cols */
  .about-media{grid-column:full-start / c 6}
  .about-text{grid-column:c 6 / content-end;padding-top:0}
  .principles{grid-column:content-start / content-end;grid-row:3}
  /* services: every composition keeps its own proportions, stacked */
  .svc-intro-grid .h2,.svc-intro-lead{grid-column:content-start / content-end;grid-row:auto}
  .chapter-sum{max-width:44ch}
  .chapter--detail .chapter-text{grid-column:content-start / content-end;grid-row:1;padding-right:0}
  .chapter--detail .chapter-media{grid-column:c 5 / content-end;grid-row:2;margin-top:var(--sp-7)}
  .chapter--overlap{--ov:4rem}
  .chapter--overlap .chapter-media{grid-column:full-start / full-end}
  .chapter--overlap .chapter-text{grid-column:c 4 / full-end;padding:var(--sp-6) var(--gutter) 0 var(--sp-6)}
  .chapter--panorama .chapter-media{--ar:2/1}
  .chapter--panorama .chapter-title,.chapter--panorama .chapter-body{grid-column:1 / -1;padding-top:0}
  .chapter--tower .chapter-text{grid-column:content-start / content-end;gap:var(--sp-5);padding-block:0}
  .chapter--tower .chapter-media{grid-column:full-start / c 10;grid-row:2;margin-top:var(--sp-7)}
  .chapter.chapter--text .chapter-title,.chapter.chapter--text .chapter-body{grid-column:1 / -1}
  /* process: 2 × 2, each step with its own rule (the compact version stays on one row) */
  .process-head .h2,.process-lead{grid-column:content-start / content-end;grid-row:auto}
  .steps--compact .step-text{padding-right:0}
  /* projects: two columns, every third full width */
  .works-head .h2,.works-head .h3{grid-column:content-start / c 9}
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-7)}
  .pf-grid > .work-tile{grid-column:auto;grid-row:auto;align-self:start;--ar:4/3}
  .pf-grid > .pf-t-full{grid-column:1 / -1;--ar:16/9}
  .pf-dom .tile-media{flex:none;min-height:0}
  .pf-dom .tile-media picture{position:static}
  .pf-dom .tile-media img{aspect-ratio:var(--ar)}
  .pf-dom .tile-cap,.pf-side .tile-cap{height:auto}
  .pf-dom .tile-title,.pf-side .tile-title{display:block}
  .pf-grid > .work-tile:not(.pf-t-full) .tile-title{font-size:var(--fs-h4);line-height:var(--lh-h4)}
  .pf-grid--row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-grid--row > .work-tile:nth-child(3){display:none}
  /* contact section: stacked */
  .contact-info,.contact-panel{grid-column:content-start / content-end}
  .contact-data{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
  .cta-copy,.cta-side{grid-column:content-start / content-end}
  /* footer */
  .footer-desc{grid-column:content-start / c 10}
  .f-serv{grid-column:content-start / c 5}
  .f-nav{grid-column:c 5 / c 8}
  .f-contact{grid-column:c 8 / content-end}
  .f-legal{grid-column:content-start / content-end;grid-row:2}
  .f-legal ul{display:flex;flex-wrap:wrap;gap:0 var(--sp-6)}
  /* portfolio */
  .pf-mast .mast-title{grid-column:content-start / content-end}
  .mast-side{grid-column:content-start / c 10;grid-row:3}
  /* service page: copy first, then the image in the service's own proportion */
  .svc-mast-grid > .svc-mast-copy{grid-column:content-start / content-end;grid-row:2;padding-bottom:0}
  .svc-mast-grid > .svc-mast-media{grid-row:3;margin-top:var(--sp-4)}
  .svc-mast--detail .svc-mast-media{grid-column:c 5 / full-end}
  .svc-mast--overlap .svc-mast-media{grid-column:c 3 / full-end}
  .svc-mast--panorama .svc-title,.svc-mast--panorama .svc-lead,.svc-mast--panorama .svc-actions{grid-column:1 / -1;grid-row:auto}
  .svc-mast--panorama .svc-mast-media{--ar:2/1}
  .svc-mast--tower .svc-mast-media{grid-column:c 4 / full-end}
  .svc-mast--detail .svc-mast-media .credit{padding-right:var(--gutter)}
  .sib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sib-grid > li:nth-child(3){display:none}
  /* project page */
  .work-title{grid-column:content-start / content-end}
  .work-demo-notice{grid-column:content-start / content-end;grid-row:4;margin-bottom:0}
  .work-facts{grid-row:5}
  .slider-stage{height:auto;aspect-ratio:4/3;min-height:0}
  .story-side,.story-body{grid-column:content-start / content-end}
  .story-side{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
  /* contact page */
  .contact-mast-copy,.contact-form-card{grid-column:content-start / content-end}
  .contact-form-card{margin-top:0}
  /* legal */
  .legal-aside{position:static;grid-column:content-start / content-end}
  .legal-aside:not(:has(*)){display:none}
  .legal{grid-column:content-start / content-end}
  .error-grid > *{grid-column:content-start / content-end}
}

/* Tablet only (768–1023): the full timeline as 2 × 2, each step with its own rule (the phone has its own vertical
   timeline below; the compact version stays on one row) */
@media (min-width:48rem) and (max-width:63.99rem){
  .steps:not(.steps--compact){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-8)}
  .steps:not(.steps--compact)::before,.steps:not(.steps--compact)::after{display:none}
  /* the numeral size is set on the step itself, so the rule (::before) and the marker use the same value */
  .steps:not(.steps--compact) .step{--fs-numeral:clamp(3.5rem,2rem + 5vw,5rem)}
  .steps:not(.steps--compact) .step-mark{margin-block:var(--sp-4) var(--sp-5);box-shadow:none}
  .steps:not(.steps--compact) .step::before{content:"";position:absolute;left:0;right:0;top:calc(var(--fs-numeral) * var(--lh-numeral) + var(--sp-4) + 4px);height:1px;background:var(--rule-strong)}
  .steps:not(.steps--compact) .step > *{position:relative}
}

/* Phone: < 768 */
@media (max-width:47.99rem){
  :root{--section:clamp(4.5rem,2rem + 10vw,6rem);--section-s:4rem;--stack:2.25rem}
  .brand-word{font-size:1.25rem}
  .header-cta{display:none}
  .header-phone{display:inline-flex;font-size:var(--fs-small)}
  .header-phone .hp-num{display:none}
  .hp-short{display:inline}
  .menu-toggle{gap:.6rem}
  /* hero: photograph on top (portrait art direction), text below on navy */
  .hero{display:block;min-height:0;overflow:visible}
  /* the photograph takes ~two fifths of the screen so the primary action is in the first viewport; the top band keeps the
     transparent header legible over a bright sky */
  .hero-media{position:relative;inset:auto;z-index:0;height:42svh;min-height:16rem;max-height:34rem}
  .hero-media::after{background:linear-gradient(180deg,rgba(6,10,16,.84) 0,rgba(6,10,16,.64) 3.5rem,rgba(6,10,16,0) 7rem),linear-gradient(0deg,rgba(10,15,23,.85) 0,rgba(10,15,23,0) 28%)}
  .hero-body{padding-block:var(--sp-5) var(--sp-8);row-gap:var(--sp-6)}
  .hero-copy{gap:var(--sp-4)}
  .hero-title{max-width:none}
  .hero-lead{font-size:1.0625rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:var(--sp-2);width:100%;margin-top:var(--sp-3)}
  .hero-actions .btn{width:100%}
  .hero-actions .link-arrow{justify-content:center;background:none}
  .hero-note{grid-column:content-start / content-end}
  /* indicators */
  .stats-band{padding-bottom:var(--sp-8)}
  .stat{padding-right:var(--sp-3)}
  .stat + .stat{padding-left:var(--sp-4)}
  .stat:nth-child(odd){padding-left:0}
  .stats{--stat-pad:1.75rem}
  /* about: photo full-bleed 4:5, then text */
  .about-grid{row-gap:var(--sp-7)}
  .about-media{grid-column:full-start / full-end;grid-row:1}
  .about-media .credit{padding-right:var(--gutter)}
  .about-text{grid-column:content-start / content-end;grid-row:2}
  .principles{grid-row:3}
  .principles-list{grid-template-columns:1fr;gap:var(--sp-5)}
  /* services */
  .svc-intro{padding-bottom:var(--sp-7)}
  .chapter{padding-block:var(--sp-8)}
  .chapter--joined{padding-top:0}
  .chapter-title{font-size:2.25rem}
  .chapter--detail .chapter-media{grid-column:c 3 / full-end;margin-top:var(--sp-6)}
  .chapter--detail .chapter-media .credit{padding-right:var(--gutter)}
  .chapter--overlap{--ov:3rem}
  .chapter--overlap .chapter-media{--ar:4/3}
  .chapter--overlap .chapter-text{grid-column:c 2 / full-end;padding:var(--sp-5) var(--gutter) 0 var(--sp-5)}
  /* the plate covers the foot of the photograph: the credit moves above it (same small type, right-aligned) */
  .chapter--overlap .chapter-media{display:flex;flex-direction:column-reverse}
  .chapter--overlap .chapter-media .credit{margin:0 0 var(--sp-2);text-align:right;padding:0 var(--gutter) 0 0}
  .chapter--panorama .chapter-media{--ar:16/9;margin-bottom:var(--sp-6)}
  .chapter--panorama .chapter-title{max-width:none}
  .chapter--tower .chapter-title{font-size:2.75rem}
  .chapter--tower .chapter-media{grid-column:full-start / full-end;--ar:3/4}
  .chapter--tower .chapter-media .credit,.chapter--detail .chapter-media .credit{padding-right:var(--gutter)}
  .chapter.chapter--text .chapter-title{font-size:2.75rem}
  /* process: vertical timeline, the line on the left */
  .process-media img{aspect-ratio:4/3}
  .process-media{margin-bottom:var(--sp-8)}
  .steps{grid-template-columns:1fr;row-gap:0;padding-left:var(--sp-6)}
  .steps::before{display:block;left:4px;right:auto;top:.4rem;bottom:var(--sp-5);width:1px;height:auto}
  .step{padding-bottom:var(--sp-7)}
  .step::before{display:none}
  .steps .step{--fs-numeral:2.75rem}
  .steps .step::before{display:none}
  .steps::after{display:none}   /* the drawn accent line is horizontal: the vertical timeline keeps only its rule */
  .step-num{order:0;margin-bottom:var(--sp-3)}
  .steps .step-mark{position:absolute;left:calc(-1 * var(--sp-6));top:.9rem;margin:0;box-shadow:0 0 0 4px var(--bg)}
  .step-title{max-width:none}
  .step:last-child{padding-bottom:0}
  /* projects: one column 4:3 */
  .works-head .h2,.works-head .h3,.works-head .demo-note{grid-column:content-start / content-end}
  .works-head .works-all{grid-column:content-start / content-end;grid-row:auto;justify-self:start}
  .works-head--home .h1,.works-side{grid-column:content-start / content-end;grid-row:auto}
  .works-side{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .works-head .works-side .works-all{margin-left:0}
  .pf-grid,.pf-grid--row{grid-template-columns:1fr;row-gap:var(--sp-7)}
  .pf-grid > .work-tile,.pf-grid > .pf-t-full{grid-column:1 / -1;--ar:4/3}
  .pf-grid--row > .work-tile:nth-child(3){display:block}
  .pf-grid > .work-tile .tile-title{font-size:1.5rem;line-height:1.2}
  .empty{grid-column:content-start / content-end}
  /* contact section */
  .contact-data{grid-template-columns:1fr}
  .contact-panel{margin-inline:calc(-1 * var(--gutter));padding:var(--sp-7) var(--gutter)}
  .contact-sec{padding-bottom:0}
  .contact-sec .credit--corner{top:var(--sp-4);bottom:auto}
  .contact-form{grid-template-columns:1fr;gap:var(--sp-5)}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}
  .cta-side .btn{width:100%}
  /* footer */
  .footer-top{padding-bottom:var(--sp-7)}
  .footer-desc{grid-column:content-start / content-end}
  .footer-cols{row-gap:var(--sp-6)}
  .f-serv,.f-nav,.f-contact,.f-legal{grid-column:content-start / content-end;grid-row:auto}
  .f-serv ul{grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .f-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--sp-6)}
  .f-col a,.f-btn{min-height:var(--btn-h-sm)}
  /* cookie bar: stacked, actions in a row */
  .cookie-inner{flex-direction:column;align-items:stretch;gap:var(--sp-3);padding-block:var(--sp-4)}
  .cookie-actions{justify-content:space-between}
  .cookie-actions .btn{flex:1 1 auto;padding-inline:.75rem}
  .cookie-actions .btn-text{flex:0 1 auto}
  .cookie-dialog-actions .btn{flex:1 1 100%}
  /* masts */
  .mast{padding-top:calc(var(--header-h) + var(--sp-4));padding-bottom:var(--sp-8)}
  .pf-mast .mast-title{font-size:3.25rem}
  .mast-side{grid-column:content-start / content-end}
  .filters{gap:var(--sp-5)}
  .crumbs [aria-current]{max-width:18ch}
  /* service page */
  .svc-mast{padding-bottom:var(--sp-7)}
  .svc-mast--panorama{padding-bottom:var(--sp-4)}
  .svc-mast-grid > .svc-mast-media{grid-column:full-start / full-end;margin-top:var(--sp-3)}
  .svc-mast-grid > .svc-mast-media .credit{padding-right:var(--gutter)}
  .svc-mast--detail .svc-mast-media{grid-column:c 3 / full-end}
  .svc-mast--panorama .svc-mast-media{--ar:16/10}
  .svc-mast--tower .svc-title{font-size:3.25rem}
  .svc-actions{flex-direction:column;align-items:stretch;width:100%}
  .svc-actions .btn{width:100%;white-space:normal;padding-block:.75rem}
  .svc-steps-head .link-arrow{grid-column:content-start / content-end;grid-row:3;justify-self:start}
  .sib-grid{grid-template-columns:1fr;row-gap:var(--sp-7)}
  .sib-grid > li:nth-child(3){display:block}
  /* project page */
  /* compact masthead: the first photograph starts within the first screen */
  .work-mast{padding-top:calc(var(--header-h) + var(--sp-4));padding-bottom:var(--sp-6)}
  .work-mast-grid{row-gap:var(--sp-3)}
  .work-kicker{margin-top:var(--sp-2)}
  .work-title{font-size:2.25rem}
  .work-facts{gap:var(--sp-3) var(--sp-7);margin-top:0;padding-top:var(--sp-3)}
  .gal-bar{flex-wrap:wrap;gap:var(--sp-3) var(--sp-4)}
  .slider-thumbs{order:3;flex-basis:100%}
  .gal-nav{margin-left:auto}
  .gal-full{display:none}
  .story-side{flex-direction:column}
  /* contact page: the full-bleed form card closes the masthead (no stray navy band under it) */
  .contact-mast{padding-bottom:0}
  .contact-mast-copy .h1{margin-top:var(--sp-5)}
  .contact-form-card{margin-inline:calc(-1 * var(--gutter));padding:var(--sp-7) var(--gutter)}
  .sched > div{max-width:none}
  /* legal */
  .legal-mast{padding-bottom:var(--sp-6)}
  .legal-section{padding-top:0}
  .legal h2{margin-top:var(--sp-7)}
  /* 404: the main action full width, the two text links on one row under it */
  .error-links{gap:0 var(--sp-6)}
  .error-links > li:first-child{flex:1 1 100%;margin-bottom:var(--sp-3)}
  .error-links .btn{width:100%}
  /* touch targets ≥ 44 px (inline links grow their hit area without moving the text) */
  .crumbs a{min-height:var(--btn-h-sm)}
  .f-col a,.f-btn,.link-btn{display:inline-flex;align-items:center;min-height:var(--btn-h-sm)}
  .work-kicker a,.cookie-text a,.check a,.chapter-title a{display:inline-block;padding-block:.9375rem;margin-block:-.9375rem}
}
@media (max-width:47.99rem){
  .site-header:has(.brand-word--long) .menu-toggle-label{display:none}   /* room for a two-line company name */
}
@media (max-width:22.5rem){
  .menu-toggle-label{display:none}
  .brand-word{font-size:1.125rem}
}
@media (min-width:64rem){
  .nav-list > .has-sub{position:static}
}
/* Without JavaScript the gallery is a horizontal scroll-snap strip (every photo reachable); the controls that need the
   script are hidden */
@media (scripting:none){
  .slider-clip{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
  .slide{scroll-snap-align:start}
  .slide-zoom{cursor:default}
  .gal-nav,.gal-full,.slider-thumbs,.gal-count{display:none}
}
/* Without JavaScript the services panel opens on hover/focus; the phone menu shows as a list under the bar */
@media (scripting:none){
  .has-sub:hover > .sub-menu,.has-sub:focus-within > .sub-menu{display:block}
  .site-header.is-overlay{position:absolute}   /* without the scroll script the transparent header must not float over light sections */
}
@media (scripting:none) and (max-width:63.99rem){
  .menu-toggle{display:none}
  .nav{position:static;visibility:visible;opacity:1;padding-top:0;background:transparent}
  .site-header{position:absolute}
  .header-bar{height:auto;min-height:var(--bar-h);flex-wrap:wrap;padding-block:var(--sp-2)}
  .nav{order:3;flex-basis:100%}
  .nav-list{margin:0;width:auto;display:flex;flex-wrap:wrap;gap:0 var(--sp-5)}
  .nav-list > li{box-shadow:none}
  .nav-link,.nav-sub-label{font-family:var(--font-sans);font-size:var(--fs-nav);min-height:var(--btn-h-sm)}
  .has-sub .sub-menu,.nav-foot{display:none}
  .mast,.hero-body{padding-top:calc(var(--header-h) + 3rem)}
}

/* ---------- 14. Print ---------- */
@media print{
  .site-header,.cookie-bar,.cookie-dialog,.contact-panel,.contact-form-card,.gal-bar,.lightbox,.credit,.contact-bg,.hero-media::after{display:none!important}
  .t-dark,.t-anth,.t-paper,.t-white,.t-stone,.t-clay,.t-mist,.site-footer{--bg:#fff;--fg:#000;--fg-2:#333;--fg-3:#555;background:#fff!important;color:#000}
  .reveal{opacity:1!important;transform:none!important}
  .hero{min-height:0}
  .hero-media{position:relative;height:auto}
  .mast{padding-top:2rem}
}