/* FIX 2 SELL — f2s.gr — the one stylesheet. Direction "Billboard": the brand's billboard and hero mockups
   built as a web page. A dark cinematic poster (the F2S mark as a window onto the MVR 19 render), then
   paper posters for Approach and Projects, the signal-blue hoarding for B2B, and an ink footer set like
   the business card.
   Hand-authored, no build step, no third-party request, no inline style anywhere (strict CSP).
   Order: fonts, tokens, base, layout, components, header, sections, footer, 404, Greek, motion/contrast/print.
   Fonts: Inter (display and text) and Sofia Sans (the hoarding lettering of the tagline band), self-hosted
   OFL variable woff2; unicode-range keeps the latin-ext and greek subsets off the English critical path.
   Greek: uppercase is a token (--caps) that :lang(el) turns off, so text-transform never reaches Greek text;
   el.html writes its capitals without tonos instead.
   Grid: on desktop the sections split on quarters, so the approach intro, the project status, the
   enquiries column and the B2B sign-in column all start on the same 50 % line. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:1 1000;font-display:swap;src:url(/assets/fonts/sofia-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:1 1000;font-display:swap;src:url(/assets/fonts/sofia-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:1 1000;font-display:swap;src:url(/assets/fonts/sofia-sans-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* ————— Tokens ————————————————————————————————————————————————————————————— */
:root{
  color-scheme:light;
  /* brand (sampled from the brand mockups) */
  --ink:#0B0D10;            /* near-black */
  --navy:#013168;
  --signal:#2253C6;         /* signal blue: 6.2:1 on cream, 6.7:1 under white */
  --signal-deep:#1A42A6;    /* hover */
  --cream:#FDF5EC;          /* paper */
  --cream-2:#F6ECDF;        /* second paper tone */
  /* text */
  --ink-2:#2A2F37;          /* secondary text on paper: 11.5:1 or more */
  --ink-3:#4A4F57;          /* captions and fine print: 7.1:1 on cream-2 */
  --on-dark:#FDF5EC;
  --on-dark-2:#C3CCDA;      /* muted on ink and navy: 7.9:1 or more */
  --on-board-2:#B9B1A6;     /* labels on the black fact board: 9.2:1 */
  --on-signal-2:#DCE5F7;    /* muted on signal blue: 5.3:1 */
  /* lines */
  --hair:rgba(11,13,16,.16);
  --hair-dark:rgba(253,245,236,.18);
  --hair-signal:rgba(255,255,255,.42);
  /* focus: an ink ring on paper; on dark, blue and gradient surfaces a two-tone ring (cream outline over
     an ink halo) that keeps 3:1 against the light bloom of the hero as well as against ink */
  --ring:var(--ink);
  --ring-shadow:none;

  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-sign:'Sofia Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --caps:uppercase;

  /* layout */
  --wrap:85rem;                               /* 1360px of content */
  --gutter:clamp(1rem,4.5vw,4rem);
  --gap:clamp(1rem,2.4vw,2.25rem);
  --section:clamp(5rem,2.5rem + 8vw,10.5rem);
  --head-compact:3.75rem;                     /* the header once it sticks */

  /* type scale (fluid, rem) */
  --fs-xs:.8125rem;                           /* 13 labels, eyebrows */
  --fs-sm:.9375rem;                           /* 15 captions, fine print */
  --fs-md:1.0625rem;                          /* 17 body */
  --fs-lead:clamp(1.1875rem,1.05rem + .55vw,1.5rem);      /* 19 to 24 */
  --fs-h3:clamp(1.5rem,1.25rem + 1vw,2.125rem);           /* 24 to 34 */
  --fs-num:clamp(5.5rem,1.75rem + 9.4vw,11rem);           /* step numerals 88 to 176 */
}
:lang(el){--caps:none}

/* ————— Base ——————————————————————————————————————————————————————————————— */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.js-sticky{scroll-padding-top:calc(var(--head-compact) + .75rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-md);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
/* the body's background paints the canvas: below a page shorter than the screen, and in Safari's rubber-band
   overscroll and landscape safe areas. A page that is dark from top to bottom (the 404) paints it ink. The home
   pages keep the cream: WebKit derives its scroll indicator from the same colour, and ink would turn it pale
   over the paper sections */
.page-dark{background:var(--ink)}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
p,figcaption,dd{text-wrap:pretty}
ol[role="list"],ul[role="list"]{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.22em}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;box-shadow:var(--ring-shadow)}
::selection{background:var(--signal);color:#fff}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nowrap{white-space:nowrap}

.skip{
  position:absolute;left:var(--gutter);left:max(var(--gutter),env(safe-area-inset-left));top:.75rem;z-index:100;
  padding:.75rem 1.125rem;background:var(--cream);color:var(--ink);
  font-weight:700;text-decoration:none;transform:translateY(-250%);
  --ring:var(--cream);--ring-shadow:0 0 0 3px var(--ink);
}
.skip:focus{transform:none}

/* ————— Layout ————————————————————————————————————————————————————————————— */
/* viewport-fit=cover lets the dark sections run into the landscape safe areas; the content keeps clear of them */
.wrap{
  width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;
  padding-inline:var(--gutter);padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
}
.section{padding-block:var(--section)}

/* ————— Components ————————————————————————————————————————————————————————— */
.eyebrow{
  display:flex;align-items:center;gap:.875rem;
  font-size:var(--fs-xs);font-weight:800;line-height:1.25;letter-spacing:.16em;text-transform:var(--caps);
  color:var(--signal);
}
.eyebrow::before{content:"";flex:none;width:2.25rem;height:3px;background:currentColor}
.eyebrow--on-signal{color:#fff}

.btn{
  --btn-bg:transparent;--btn-fg:inherit;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.75em;
  min-height:3rem;padding:.75rem 1.375rem;
  border:2px solid var(--btn-bd);border-radius:0;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font);font-size:var(--fs-sm);font-weight:700;line-height:1.2;letter-spacing:.005em;
  text-align:center;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn--sm{min-height:2.75rem;padding:.5rem 1rem;font-size:.875rem}
.btn--lg{min-height:3.5rem;padding:.875rem 1.75rem;font-size:1rem}
.btn--block{display:flex;width:100%;justify-content:space-between;text-align:left}
.btn__icon{flex:none;width:1.125rem;height:1.125rem;transition:transform .2s ease}
.btn--signal{--btn-bg:var(--signal);--btn-fg:#fff;--btn-bd:var(--signal)}
.btn--cream{--btn-bg:var(--cream);--btn-fg:var(--ink);--btn-bd:var(--cream)}
.btn--line{--btn-fg:var(--cream);--btn-bd:rgba(253,245,236,.62)}
/* hover states only where the primary pointer can hover: on a touch screen a tapped link keeps :hover until
   the next tap elsewhere, so a button would stay dark and a nav link would look current (here and below) */
@media (hover:hover){
  .btn:hover .btn__icon{transform:translateX(4px)}
  .btn--signal:hover{--btn-bg:var(--signal-deep);--btn-bd:var(--signal-deep)}
  .btn--cream:hover{--btn-bg:#fff;--btn-bd:#fff}
  .btn--line:hover{--btn-bg:var(--cream);--btn-fg:var(--ink);--btn-bd:var(--cream)}
}

.tab{  /* the hoarding's blue "WWW.F2S.GR" tab, with its speech-bubble notch */
  position:relative;display:inline-block;padding:.5rem .8rem .45rem;
  background:var(--signal);color:#fff;
  font-size:var(--fs-xs);font-weight:800;line-height:1.2;letter-spacing:.16em;text-transform:var(--caps);
}
.tab::after{
  content:"";position:absolute;left:.8rem;top:100%;
  border-style:solid;border-width:.55rem .55rem 0 0;border-color:var(--signal) transparent transparent transparent;
}

/* ————— Header: over the hero at first; with site.js it sticks on a compact ink bar once the page scrolls,
   on viewports taller than 25em (400px); on shorter ones it scrolls away with the page ——————————————— */
.site-header{
  position:absolute;inset:0 0 auto;z-index:50;color:var(--on-dark);
  --ring:var(--cream);--ring-shadow:0 0 0 3px var(--ink);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.js-sticky .site-header{position:fixed}
/* short viewports (high zoom, phone landscape): the header scrolls away instead of covering the page (WCAG C34);
   at 400 % zoom a 1366x768 screen is 341x192 CSS px, and a fixed two-row header would take half of it */
@media (max-height:25em){.js-sticky .site-header{position:absolute}html.js-sticky{scroll-padding-top:0}}
.site-header.is-solid{background:rgba(11,13,16,.96);box-shadow:0 1px 0 var(--hair-dark)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header.is-solid{background:rgba(11,13,16,.86);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
}
.site-header__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 .375rem;
  padding-block:clamp(.875rem,.5rem + 1.4vw,1.75rem);
  transition:padding .25s ease;
}
.is-solid .site-header__bar{padding-block:.5rem}
/* a page without a dark first section (the portal pages share this stylesheet) uses the static ink bar */
.site-header--bar,.js-sticky .site-header--bar{position:relative;background:var(--ink);box-shadow:0 1px 0 var(--hair-dark)}
.brand{display:inline-flex;align-items:center;flex:none;min-height:2.75rem;color:inherit;line-height:0}
.brand__lockup{width:auto;height:2.25rem;fill:currentColor;transition:height .25s ease}
.is-solid .brand__lockup{height:2.25rem}
.nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.nav__link{
  display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding-inline:.125rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left calc(50% + .85em)/0 2px no-repeat;
  transition:background-size .25s ease;
}
.nav__link.is-current{background-size:100% 2px}
.nav .btn--sm{padding-inline:.5rem;font-size:.8125rem}
.nav__lang{
  min-width:2.75rem;padding-inline:.375rem;border:1px solid rgba(253,245,236,.42);
  background-color:rgba(11,13,16,.72);background-image:none;font-weight:700;letter-spacing:.08em;
}
@media (hover:hover){
  .nav__link:hover{background-size:100% 2px}
  .nav__lang:hover{border-color:var(--cream);background-color:var(--ink)}
}

/* ————— Hero ——————————————————————————————————————————————————————————————— */
.hero{
  position:relative;isolation:isolate;color:var(--on-dark);
  --ring:var(--cream);--ring-shadow:0 0 0 3px var(--ink);
  min-height:min(100vh,70rem);min-height:min(100svh,70rem);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:5.75rem clamp(3rem,5vw,3.5rem);
  background-color:var(--ink);
  background-image:
    /* a soft letterbox shade under the header keeps the nav legible over the light */
    linear-gradient(180deg,rgba(11,13,16,.38) 0%,rgba(11,13,16,0) 6.5rem),
    /* the cold bloom in the top right corner (hero mockup): white core, cyan rim, a soft diagonal wash */
    radial-gradient(38% 54% at 100% 0%,rgba(246,250,252,.95) 0%,rgba(204,234,242,.72) 14%,rgba(128,196,228,.4) 32%,rgba(64,136,210,.15) 56%,rgba(34,83,198,0) 78%),
    linear-gradient(222deg,rgba(190,226,244,.13) 0%,rgba(190,226,244,0) 42%),
    /* its wide blue halo */
    radial-gradient(62% 78% at 100% 0%,rgba(72,140,214,.34) 0%,rgba(34,83,198,.16) 42%,rgba(34,83,198,0) 74%),
    /* the navy spill across the right half */
    radial-gradient(72% 92% at 96% 6%,rgba(1,70,134,.96) 0%,rgba(1,56,116,.7) 40%,rgba(1,49,104,0) 74%),
    /* a faint navy floor bottom left, so the ink never reads as flat black */
    radial-gradient(55% 60% at 0% 100%,rgba(1,49,104,.42) 0%,rgba(1,49,104,0) 70%),
    linear-gradient(158deg,#0B0D10 0%,#09111D 36%,#0A1A33 64%,#012A5A 100%);
}
.hero__grain{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
.hero__copy{position:relative;z-index:1}
.hero__eyebrow{margin-bottom:1.25rem}
.hero__title{
  font-size:clamp(2.5rem,16.4vw,4.75rem);font-weight:900;line-height:.86;letter-spacing:-.03em;
  text-transform:var(--caps);color:var(--cream);
}
.hero__ln{display:block}
.hero__lead{
  max-width:36ch;margin-top:1.375rem;
  font-size:clamp(1.1875rem,1.05rem + .3vw,1.3125rem);line-height:1.45;color:#E4E9F1;
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.375rem}
.hero__ctas .btn--lg{padding-inline:clamp(.875rem,.2rem + 1.9vw,1.75rem);font-size:clamp(.9375rem,.9rem + .15vw,1rem)}
.hero__visual{min-width:0}
/* the mark: a window onto the render. The image sits at the mark's unit box (345 x 234.31 from -38, 60 in
   the logo's units), so the bronze slab bands cross the 2 and the S and the render's black bottom band stays
   far below the letters; the mask is the mark itself, the light falls from the top right like the bloom */
.hero__mark{position:relative;aspect-ratio:254.5/148.7;filter:drop-shadow(-1rem 1.5rem 2rem rgba(0,0,0,.5))}
.hero__window{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:url(/assets/img/brand/f2s-mark.svg);mask-image:url(/assets/img/brand/f2s-mark.svg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero__render{
  position:absolute;z-index:0;left:-31.827%;top:-5.985%;width:135.56%;max-width:none;height:auto;
  transform:translate3d(calc(var(--px,0) * -2.464%),calc(var(--py,0) * -2.988%),0);
}
.hero__window::after{
  content:"";position:absolute;z-index:1;inset:0;
  background:linear-gradient(to bottom left,rgba(233,241,247,.26) 0%,rgba(233,241,247,0) 42%,rgba(11,13,16,.06) 70%,rgba(11,13,16,.5) 100%);
}
.hero__rim{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible}
.hero__caption{
  position:relative;margin-top:.875rem;padding-left:2.5rem;
  font-size:1rem;line-height:1.45;color:var(--on-dark-2);
}
.hero__caption::before{content:"";position:absolute;left:0;top:.75em;width:1.75rem;height:1px;background:currentColor}

/* ————— Approach —————————————————————————————————————————————————————————— */
.approach{background:var(--cream)}
.approach__title{
  margin-top:clamp(1.25rem,2.5vw,2rem);
  font-size:clamp(3rem,1rem + 12vw,5.5rem);font-weight:900;line-height:.88;letter-spacing:-.03em;
  text-transform:var(--caps);text-wrap:balance;
}
.approach__intro{max-width:38ch;margin-top:clamp(1.75rem,3.5vw,3rem);font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(3.5rem,7vw,6.5rem);border-top:2px solid var(--ink)}
.step{padding-block:1.75rem 2.5rem;border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0;padding-bottom:0}
.step__num{
  display:block;font-size:var(--fs-num);font-weight:900;line-height:.78;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--signal);margin-left:-.04em;
}
.step__title{margin-top:clamp(1.25rem,2.5vw,2rem);font-size:var(--fs-h3);font-weight:900;line-height:1;letter-spacing:-.01em;text-transform:var(--caps)}
.step__loop{display:inline-block;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.04em;color:var(--signal)}
.step__text{max-width:32ch;margin-top:.875rem;color:var(--ink-2)}
.steps__cycle{display:none}

/* ————— Projects —————————————————————————————————————————————————————————— */
.projects{background:var(--cream-2)}
.projects__title{
  margin-top:clamp(1rem,2vw,1.5rem);
  font-size:clamp(4.25rem,23vw,9rem);font-weight:900;line-height:.8;letter-spacing:-.04em;
}
.projects__num{color:var(--signal)}
.projects__summary{display:grid;gap:1.75rem;margin-top:clamp(2.25rem,5vw,4rem)}
.projects__body{max-width:44ch;font-size:var(--fs-lead);line-height:1.45}
.status{
  max-width:46ch;padding:1.125rem 1.25rem 1.125rem 1.5rem;
  background:var(--cream);border-left:4px solid var(--signal);color:var(--ink-2);
}
.status__label{color:var(--ink)}

/* the facts as a site board: a black sheet, hairline cells on desktop, ruled label/value rows below */
.board{
  position:relative;display:grid;margin-top:clamp(3rem,6vw,5rem);
  padding:.375rem clamp(1.25rem,3vw,2rem);background:var(--ink);color:var(--on-dark);
}
.board::before{  /* the four bolts in its corners */
  content:"";position:absolute;inset:.625rem;pointer-events:none;
  background:
    radial-gradient(circle,rgba(253,245,236,.32) 0 1.6px,transparent 2.3px) 0 0/6px 6px no-repeat,
    radial-gradient(circle,rgba(253,245,236,.32) 0 1.6px,transparent 2.3px) 100% 0/6px 6px no-repeat,
    radial-gradient(circle,rgba(253,245,236,.32) 0 1.6px,transparent 2.3px) 0 100%/6px 6px no-repeat,
    radial-gradient(circle,rgba(253,245,236,.32) 0 1.6px,transparent 2.3px) 100% 100%/6px 6px no-repeat;
}
.board__cell{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.375rem 1.25rem;
  padding-block:1.125rem;border-top:1px solid rgba(253,245,236,.16);
}
.board__cell:first-child{border-top:0}
.board dt{font-size:var(--fs-xs);font-weight:800;line-height:1.3;letter-spacing:.14em;text-transform:var(--caps);color:var(--on-board-2)}
.board dd{
  margin-left:auto;font-size:clamp(1.5rem,1.1rem + 1.8vw,2rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;
  text-align:right;font-variant-numeric:tabular-nums;text-wrap:balance;
}
.board__unit{font-size:.6em;font-weight:700;letter-spacing:0}
.board__note{display:block;margin-top:.45rem;font-size:var(--fs-sm);font-weight:600;line-height:1.3;letter-spacing:0;color:var(--on-dark-2)}

.gallery{display:grid;gap:clamp(2.75rem,5vw,4.5rem);margin-top:clamp(3.5rem,7vw,6rem)}
.pair,.duo{display:grid;gap:clamp(1.75rem,3vw,2.25rem) var(--gap);align-items:start}
.shot{margin:0}
.shot__media{position:relative}
.shot__frame{position:relative;overflow:hidden;background:#D9D0C2}
.shot__frame img{width:100%;height:100%;object-fit:cover}
.shot figcaption{max-width:52ch;margin-top:.875rem;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-3);text-wrap:balance}
/* the before/after pair is cut from the mark's letters: the photo takes the F's top-left curve, the render
   the S's top-left and bottom-right curves (outer radius 55 on a 143-unit letter: 38.5 % of the height) */
.shot--today .shot__frame{aspect-ratio:1;border-top-left-radius:38.5%}
.shot--facade .shot__frame{aspect-ratio:16/9;border-radius:21.66% 0 21.66% 0/38.5% 0 38.5% 0}
.shot--facade img{object-position:50% 4%}          /* keeps the render's bottom black band out of frame */
.shot--today figcaption{padding-right:3.75rem}
.pair__arrow{   /* from the building today to the render, on the axis the two share */
  position:absolute;z-index:1;right:1.25rem;top:100%;
  display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--hair);border-radius:50%;
  background:var(--cream);color:var(--signal);transform:translateY(-50%) rotate(90deg);
}
.pair__arrow svg{width:1.125rem;height:1.125rem}
.pair__note{
  position:relative;max-width:62ch;padding-left:2.625rem;
  font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);
}
.pair__note::before{content:"";position:absolute;left:0;top:.68em;width:1.75rem;height:2px;background:var(--signal)}
.shot--roof .shot__frame{aspect-ratio:3/2}
.shot--lounge .shot__frame{aspect-ratio:4/3}
.shot--lounge img{object-position:42% 50%}

.projects__foot{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:clamp(3.5rem,7vw,6rem);padding-top:2rem;border-top:2px solid var(--ink)}
.fineprint{max-width:56ch;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3)}
.channel__note{max-width:40ch;font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);font-weight:700;line-height:1.4;text-wrap:balance}
/* the four links to the MVR 19 site, as stacked wayfinding signs of equal weight */
.signs{display:grid;gap:2px;margin-top:1.5rem}
.sign{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:4rem;padding:.875rem clamp(.875rem,.5rem + 1.5vw,1.25rem) .875rem clamp(1rem,.6rem + 1.8vw,1.5rem);
  background:var(--ink);color:var(--on-dark);text-decoration:none;
  font-size:clamp(.9375rem,.75rem + .9vw,1.25rem);font-weight:800;line-height:1.25;letter-spacing:-.01em;
  transition:background-color .2s ease;
}
.sign__label{min-width:0}
.sign__icon{flex:none;width:1.25rem;height:1.25rem;color:#8DAAF0;transition:transform .2s ease,color .2s ease}
@media (hover:hover){
  .sign:hover{background:var(--signal)}
  .sign:hover .sign__icon{color:#fff;transform:translate(3px,-3px)}
}
.sign:focus-visible{outline:3px solid var(--cream);outline-offset:-7px;box-shadow:none}   /* inset: a ring outside would hide under the next sign */

/* ————— B2B: the signal-blue hoarding sheet; the sign-in itself stays a quiet, plain list ——————————————— */
.b2b{
  position:relative;isolation:isolate;background:var(--signal);color:#fff;
  --ring:var(--cream);--ring-shadow:0 0 0 3px var(--ink);
  padding-bottom:0;
}
.b2b__grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.b2b__title{
  margin-top:clamp(1rem,2vw,1.5rem);
  font-size:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--cream);
}
.b2b__body{max-width:44ch;margin-top:clamp(1.25rem,2.5vw,1.75rem);font-size:var(--fs-lead);line-height:1.5}
.b2b__steps{border-top:1px solid var(--hair-signal)}
.b2b__step{display:flex;align-items:center;gap:1rem;padding-block:.875rem;border-bottom:1px solid var(--hair-signal);font-size:1.0625rem;font-weight:600;line-height:1.3}
.b2b__n{
  flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:2px solid currentColor;border-radius:50%;
  font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.b2b__cta{margin-top:1.5rem}
.b2b__small{margin-top:1rem;font-size:var(--fs-sm);color:var(--on-signal-2)}
/* the hoarding band: the tagline repeated in black, fading out (decorative; aria-hidden in the page) */
.band{
  position:relative;z-index:-1;overflow:hidden;height:clamp(8.5rem,30vw,20rem);margin-top:clamp(3.5rem,7vw,6rem);
  -webkit-mask-image:linear-gradient(#000 30%,transparent 97%);mask-image:linear-gradient(#000 30%,transparent 97%);
}
.band__rows{display:flex;flex-direction:column;align-items:flex-end}
.band__row{display:flex;flex-direction:column;align-items:flex-end;color:var(--ink)}
.band__big{font-family:var(--font-sign);font-size:clamp(3rem,14.6vw,7rem);font-weight:900;line-height:.84;letter-spacing:-.008em;text-transform:var(--caps);white-space:nowrap}
.band__small{margin-top:.06em;font-family:var(--font-sign);font-size:clamp(1.45rem,7vw,3.36rem);font-weight:900;line-height:.9;letter-spacing:.004em;text-transform:var(--caps);white-space:nowrap}
.band__row:nth-child(2){opacity:.8}
.band__row:nth-child(3){opacity:.56}
.band__row:nth-child(4){opacity:.32}
.band__row:nth-child(5){opacity:.13}

/* ————— Footer: set like the business card ——————————————————————————————————— */
.site-footer{background:var(--ink);color:var(--on-dark);--ring:var(--cream);--ring-shadow:0 0 0 3px var(--ink);padding-block:clamp(4rem,2rem + 6vw,7rem) 2.5rem}
.footer__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.5rem 3rem;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--hair-dark);
}
.brand--footer .brand__lockup{height:clamp(5.5rem,3.5rem + 6vw,9rem)}
.footer__tagline{font-family:var(--font-sign);font-weight:900;line-height:.86;text-transform:var(--caps);text-align:right;margin-left:auto}
.footer__tag-small{display:block;font-size:clamp(1rem,.8rem + .7vw,1.5rem);letter-spacing:.004em}
.footer__tag-big{display:block;margin-top:.08em;font-size:clamp(2.5rem,1.1rem + 5vw,5.5rem);letter-spacing:-.008em}
.footer__nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 3rem;
  padding-block:1.5rem;border-bottom:1px solid var(--hair-dark);
}
.footer__links{display:flex;flex-wrap:wrap;gap:0 2rem}
.footer__links a,.footer__lang a{
  display:inline-flex;align-items:center;gap:.4em;min-height:2.75rem;font-weight:600;text-decoration:none;
}
@media (hover:hover){.footer__links a:hover,.footer__lang a:hover{text-decoration:underline;text-decoration-thickness:2px}}
.footer__out{width:.9em;height:.9em}
.footer__lang{display:flex;gap:1.5rem}
.footer__lang a[aria-current]{color:var(--on-dark-2);font-weight:500}
.footer__legal{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;padding-top:1.5rem;font-size:var(--fs-xs);line-height:1.5;color:var(--on-dark-2)}

/* ————— 404 ———————————————————————————————————————————————————————————————— */
.notfound{
  position:relative;isolation:isolate;color:var(--on-dark);--ring:var(--cream);--ring-shadow:0 0 0 3px var(--ink);
  min-height:min(100vh,62rem);min-height:min(100svh,62rem);display:flex;flex-direction:column;justify-content:center;
  padding-block:7rem 4rem;background-color:var(--ink);
  background-image:
    /* the hero's letterbox shade under the header keeps the nav legible over the bloom (4.5:1 or more) */
    linear-gradient(180deg,rgba(11,13,16,.38) 0%,rgba(11,13,16,0) 6.5rem),
    radial-gradient(38% 54% at 100% 0%,rgba(246,250,252,.9) 0%,rgba(204,234,242,.6) 14%,rgba(128,196,228,.32) 32%,rgba(64,136,210,.12) 56%,rgba(34,83,198,0) 78%),
    radial-gradient(72% 92% at 96% 6%,rgba(1,70,134,.96) 0%,rgba(1,56,116,.7) 40%,rgba(1,49,104,0) 74%),
    linear-gradient(158deg,#0B0D10 0%,#09111D 36%,#0A1A33 64%,#012A5A 100%);
}
.notfound__grid{display:grid;gap:3rem}
.notfound__block+.notfound__block{padding-top:2.5rem;border-top:1px solid var(--hair-dark)}
.notfound__title{
  margin-top:1.25rem;font-size:clamp(2.5rem,1.2rem + 6vw,5.5rem);font-weight:900;line-height:.9;letter-spacing:-.03em;
  text-transform:var(--caps);color:var(--cream);text-wrap:balance;
}
.notfound__text{max-width:40ch;margin-top:1.25rem;font-size:var(--fs-lead);line-height:1.45;color:#E4E9F1}
.notfound__cta{margin-top:1.75rem}
.notfound-footer{background:var(--ink);color:var(--on-dark-2);padding-block:1.5rem;font-size:var(--fs-xs)}

/* ————— Narrow phones: the header stays on one row down to 352px (Greek: 360px, its labels run longer,
   so below 416px they drop to 12px); narrower still, the nav takes its own row on purpose ———————————— */
@media (max-width:25.95em){
  .hero__ctas .btn__icon{display:none}
  :root:lang(el) .nav__link:not(.nav__lang),:root:lang(el) .nav .btn--sm{font-size:.75rem}
}
@media (max-width:22.4375em){
  :root:lang(el){--head-compact:6.75rem}
  :root:lang(el) .nav{flex-basis:100%}
  :root:lang(el) .hero{padding-top:9.25rem}
}
@media (max-width:21.95em){
  :root{--head-compact:6.75rem}
  .nav{flex-basis:100%}
  .hero{padding-top:9.25rem}
  .notfound{padding-top:9.5rem}
  /* the band's word cannot break: below 326px (Greek, ΞΑΝΑΧΤΙΖΕΤΑΙ is 6.45em wide) and 312px (English, 6.17em)
     it is sized to the screen less one gutter, so its first letter is not cut off at the left edge */
  .band__big{font-size:min(clamp(3rem,14.6vw,7rem),calc((100vw - var(--gutter))/6.17))}
  :lang(el) .band__big{font-size:min(clamp(3rem,14.6vw,7rem),calc((100vw - var(--gutter))/6.45))}
}
/* short landscape phones (narrower than 45em, 480px tall or less): the headline on the mockup's two lines,
   WHERE VALUE / GETS REBUILT, so the lead still fits on the first screen; the vh term follows the desktop rules.
   The Greek keeps its own size (:lang(el) .hero__title below) and pairs its lines the same way */
@media (max-width:44.99em) and (max-height:30em){
  .hero__pair{display:block}
  .hero__ln{display:inline}
  .hero__title{font-size:clamp(2.5rem,min(16.4vw,15vh),4.75rem)}
}

/* ————— ≥ 45em (720px): tablet ——————————————————————————————————————————————— */
@media (min-width:45em){
  :root{--head-compact:4rem}
  .site-header__bar{gap:.75rem 1.25rem}
  .brand__lockup{height:clamp(2.75rem,2.1rem + 1.3vw,3.5rem)}
  .is-solid .brand__lockup{height:2.625rem}
  .nav__list{gap:.25rem clamp(.75rem,.2rem + 1.6vw,2rem)}
  .nav__link{font-size:.875rem}
  .nav .btn--sm{padding-inline:1rem;font-size:.875rem}
  .nav__lang{padding-inline:.5rem}

  .hero{padding-top:calc(5.75rem + clamp(1rem,3vw,2.25rem))}
  .hero__grid{row-gap:clamp(2.25rem,5vw,3rem)}
  .hero__eyebrow{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
  .hero__title{font-size:clamp(4.5rem,11vw,7rem)}
  .hero__pair{display:block}
  .hero__ln{display:inline}
  .hero__lead,.hero__ctas{margin-top:clamp(1.75rem,3vw,2rem)}
  .hero__ctas{gap:.75rem}
  .hero__visual{width:82%;justify-self:end}

  .approach__title{font-size:clamp(4rem,10.5vw,6.25rem)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
  .step,.step:last-child{padding-block:2rem 2.75rem;border-bottom:1px solid var(--hair)}
  .step:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}

  .projects__title{font-size:clamp(6rem,19vw,13rem)}

  .pair{grid-template-columns:minmax(0,1fr) minmax(0,1.7778fr)}
  .pair__note{grid-column:1/-1}
  .pair__arrow{right:auto;top:50%;left:calc(100% + var(--gap)/2);transform:translate(-50%,-50%)}
  .shot--today figcaption{padding-right:0}
  .duo{grid-template-columns:minmax(0,1.5fr) minmax(0,1.07fr)}
  .shot--lounge .shot__frame{aspect-ratio:1.07}

  .band__rows{padding-left:30%}
  .band__big{font-size:clamp(4rem,9.6vw,7rem)}
  .band__small{font-size:clamp(1.92rem,4.6vw,3.36rem)}
}

/* ————— ≥ 62em (992px): desktop —————————————————————————————————————————————— */
@media (min-width:62em){
  .hero__grid{grid-template-columns:minmax(min-content,44fr) minmax(0,56fr);column-gap:var(--gap);align-items:center}
  .hero__title{font-size:clamp(5rem,min(8.6vw,13.5vh),8.1rem)}
  .hero__pair{display:inline}
  .hero__ln{display:block}
  .hero__visual{width:auto;justify-self:stretch}
  .hero__lead{max-width:40ch}

  /* quarters: the intro, the project status, the enquiries and the sign-in start on the 50 % line + gap */
  .approach__head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .approach__head>*{grid-column:1/-1}
  .approach__title{font-size:clamp(4.5rem,7.4vw,6.9rem)}
  .approach__head .approach__intro{grid-column:3/span 2;padding-left:var(--gap)}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}
  .step,.step:last-child,.step:nth-last-child(-n+2){padding:2rem var(--gap) 0;border-bottom:0;border-left:1px solid var(--hair)}
  .step:first-child{padding-left:0;border-left:0}
  .step:last-child{padding-right:0}
  /* the cycle closes: a line from Repeat back to Buy, under the four steps */
  .steps__cycle{
    display:block;position:relative;width:calc(75% + var(--gap));height:3.5rem;margin:2.75rem 0 0 1.375rem;
    border:2px solid var(--signal);border-top:0;border-radius:0 0 1.5rem 1.5rem;
  }
  .steps__cycle::before{   /* the arrowhead, pointing up at Buy */
    content:"";position:absolute;left:-1px;top:-2px;width:.75rem;height:.75rem;
    border-top:2px solid var(--signal);border-left:2px solid var(--signal);transform:translate(-50%,0) rotate(45deg);transform-origin:50% 50%;
  }

  .projects__title{font-size:clamp(8rem,20vw,18rem)}
  .projects__summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .projects__summary .status{align-self:start;margin-left:var(--gap)}
  .board{grid-template-columns:minmax(min-content,.9fr) minmax(min-content,1.4fr) minmax(min-content,.8fr) minmax(min-content,1.05fr) minmax(min-content,.95fr);padding:0}
  .board__cell{display:block;padding:1.75rem clamp(1rem,1.6vw,1.5rem) 2rem;border-top:0;border-left:1px solid rgba(253,245,236,.16)}
  .board__cell:first-child{border-left:0;padding-left:clamp(1.5rem,2.2vw,2rem)}
  /* a fact label may take two lines (ΕΚΤΙΜΩΜΕΝΗ ΠΑΡΑΔΟΣΗ does at every desktop width), so every label reserves
     two and the values start on one line */
  .board dt{min-height:2.6em}
  /* the values stop growing where the board stops widening (85rem of content at about 1490px): larger, they
     would break inside a range or a date */
  .board dd{margin:1rem 0 0;text-align:left;font-size:clamp(1.625rem,.6rem + 1.9vw,2.375rem)}

  .projects__foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .projects__foot .channel{padding-left:var(--gap)}

  .b2b__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;align-items:start}
  .b2b__access{padding-left:var(--gap)}
  .band__rows{padding-left:50%}
  .band__big{font-size:clamp(4rem,7.3vw,7rem)}
  .band__small{font-size:clamp(1.92rem,3.5vw,3.36rem)}
}

/* ————— Short desktop viewports (800px tall or less): keep the hero CTAs above the fold ———————— */
@media (min-width:62em) and (max-height:50em){
  .hero{padding-block:7.375rem 2.25rem}
  .hero__title{font-size:clamp(5rem,min(8.6vw,12.5vh),8.1rem)}
  .hero__lead,.hero__ctas{margin-top:1.5rem}
}

/* ————— Greek (el.html): uppercase Greek runs much longer than the English (the longest word,
   ΞΑΝΑΧΤΙΖΕΤΑΙ., is 7.8em wide in Inter 900), so the display lines get their own measures ——————— */
:lang(el) .hero__title{font-size:min(3.25rem,calc((100vw - 2*var(--gutter))/9.8));line-height:.9}   /* room for the 1.4.12 spacing override */
:lang(el) .approach__title{font-size:min(3.5rem,calc((100vw - 2*var(--gutter))/8.6))}
:lang(el) .footer__tag-big{font-size:min(5.5rem,calc((100vw - 2*var(--gutter))/8.6))}
@media (min-width:45em){
  :lang(el) .hero__title{font-size:min(5.5rem,calc((100vw - 2*var(--gutter))/9.8))}
  :lang(el) .approach__title{font-size:min(8.4vw,5rem)}
}
@media (min-width:62em){
  :lang(el) .hero__title{font-size:clamp(2.5rem,min(4.8vw,9.5vh),4.6rem)}
  :lang(el) .approach__title{font-size:clamp(3rem,6.8vw,6.4rem)}
  :lang(el) .step__title{font-size:min(var(--fs-h3),2.2vw)}
}
@media (min-width:62em) and (max-height:50em){
  :lang(el) .hero__title{font-size:clamp(2.5rem,min(4.8vw,9vh),4.6rem)}
}

/* ————— Motion, contrast modes, print ———————————————————————————————————————— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .hero__render{transform:none}
}
@media (forced-colors:active){
  .btn,.nav__lang,.tab,.sign{border:2px solid ButtonText}
  .hero__grain,.band,.board::before{display:none}
  .status{border-left-color:CanvasText}
  .steps__cycle,.steps__cycle::before{border-color:CanvasText}
  /* the sign arrows' light blue is 2.3:1 on a white Canvas (and the hover rule would turn them white on it);
     the tab's notch, a border triangle, would show as a square */
  .sign__icon,.sign:hover .sign__icon{color:LinkText}
  .tab::after{display:none}
}
/* print and Save as PDF, background graphics off by default: black on white, the header printed once at the
   top (a fixed header repeats on every page), and the brand pieces that need their colours kept */
@media print{
  .site-header .nav,.hero__grain,.band,.skip,.steps__cycle{display:none}
  .site-header,.js-sticky .site-header{position:static;color:#000;background:none;box-shadow:none}
  .page-dark{background:#fff}
  .hero,.b2b,.site-footer,.board,.sign,.notfound,.notfound-footer{background:#fff;color:#000}
  .hero__title,.hero__lead,.b2b__title,.board dt,.board__note,.hero__caption,.b2b__small,.footer__legal,.eyebrow--on-signal,.footer__lang a[aria-current],.notfound__title,.notfound__text{color:#000}
  .btn--line{--btn-fg:#000;--btn-bd:#000}
  /* the mark's mask and overlay are skipped or printed opaque without background graphics: keep them */
  .hero__mark,.tab,.btn--signal{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .eyebrow{break-after:avoid}
  .section{padding-block:2rem}
}