/* ==========================================================================
   GO Firstlight / Green Olive First Light
   Design system per rebuild brief v2 §5. Desktop-first (max-width queries).
   ========================================================================== */

/* --- Tokens (§5.2) ------------------------------------------------------- */
:root {
  --ink:         #161616;
  --black:       #000000;
  --olive:       #6D7467;  /* signature olive/sage — large text & non-text UI only */
  --olive-text:  #636A5D;  /* darkened: #6D7467 on white is 4.4:1, under AA 4.5 */
  --on-dark:     #EDEDED;
  --surface-1:   #F2F2F2;
  --surface-2:   #F5F5F5;
  --card:        #FFFFFF;
  --placeholder: #C4C4C4;
  --hover-fill:  #D9D9D9;
  --rule:        #DCDCDC;
  --body-text:   #555555;  /* observed on the live site */
  --danger:      #A4262C;

  /* Typography. Greek headings use Anton — Oswald has no Greek subset (D1). */
  --font-head:   'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:   'Didact Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:     'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:        1200px;
  --gutter:      clamp(20px, 5vw, 64px);
  --section-y:   clamp(72px, 9vw, 140px);

  /* Vertical rhythm. Two steps only, so every section breathes the same way:
     --gap-head  section heading -> the content it introduces
     --gap-block major block -> major block inside one section (photo, cards) */
  --gap-head:    clamp(34px, 3.2vw, 52px);
  --gap-block:   clamp(46px, 5.6vw, 88px);

  --ease:        cubic-bezier(.22,.61,.36,1);

  /* How far the Call photo rides up over the About/Call boundary.
     .about reserves exactly this much extra bottom padding so the
     lifted photo never lands on top of the About copy. */
  --photo-lift:  clamp(105px, 14.2vw, 205px);
}
/* D1: Oswald has no Greek. Neither do Anton / Archivo Narrow / Barlow Condensed /
   Fjalla One (all verified against the Google Fonts CSS2 API). Roboto Condensed
   serves greek + greek-ext and is the closest condensed face that does. */
:root:lang(el) { --font-head: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; }

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  /* Didact Gothic has a large x-height, so 1.6 leading on a ~55-character
     measure reads better than the 1.65 it was carrying on a wider one. */
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.62;
  color: var(--body-text);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); margin: 0; line-height: 1.02; font-weight: 700; }
/* Paragraph space must clearly exceed the line space or paragraphs mush
   together — 1.1em was 0.68 of a line, this is 0.8. */
p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* --- Utilities ----------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
  font-family: var(--font-ui); text-decoration: none; border-radius: 4px;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--olive-text); outline-offset: 3px; border-radius: 2px;
}

/* Scroll reveal — visible by default so a JS failure never hides content. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- Language switcher --------------------------------------------------- */
/* Padding is tuned so the switcher's optical centre lands on the same line as
   the brand mark opposite it (brand: 26px pad + 28.8px mark => centre 40.4px). */
.langbar { position: absolute; top: 0; right: 0; z-index: 20; padding: 20px var(--gutter); display: flex; gap: 4px; align-items: center; font-family: var(--font-ui); font-size: 15px; }
.langbar a { color: #fff; text-decoration: none; opacity: .62; padding: 6px 9px; letter-spacing: .06em; transition: opacity .2s var(--ease); }
.langbar a:hover { opacity: 1; }
.langbar a { opacity: .92; font-size: clamp(15px, 1.2vw, 17px); line-height: clamp(22px, 2vw, 30px); text-transform: uppercase; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  text-align: center; padding: 96px var(--gutter) clamp(56px, 9vh, 104px);
  background: #000 center/cover no-repeat;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, #000 100%),
    var(--hero-img);
}
.hero__inner { display: grid; justify-items: center; gap: clamp(26px, 4vh, 46px); }
.hero__logo { width: clamp(190px, 26vw, 330px); height: auto; }
/* Measured from the live button: Roboto 400 / 26px / sentence case,
   3px #D9D9D9 border, pill radius, olive mark to the LEFT of the label. */
.hero__cta {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--font-ui); font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px); letter-spacing: normal; text-transform: none;
  text-decoration: none; line-height: 1.1;
  color: var(--surface-1); background: transparent; border: 3px solid var(--hover-fill);
  padding: .62em 1.35em; border-radius: 999px;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.hero__cta-mark { width: 1.05em; height: auto; fill: currentColor; flex: 0 0 auto; transition: fill .25s var(--ease); }
.hero__cta:hover, .hero__cta:focus-visible { background: var(--hover-fill); color: var(--black); border-color: var(--hover-fill); }

/* --- Ticker -------------------------------------------------------------- */
/* Wordmark artwork is black on transparent, so the band must stay light. */
/* Live site shows this wordmark only below laptop width, static, no marquee
   (the PNG carries elementor-hidden-desktop / -laptop and animation: none). */
.wordmark-band { display: none; }
@media (max-width: 1024px) {
  .wordmark-band { display: block; background: var(--card); padding: clamp(28px, 7vw, 46px) var(--gutter); }
  .wordmark-band img { height: auto; width: min(100%, 420px); margin-inline: auto; }
}

/* --- Section heading ----------------------------------------------------- */
/* One heading-to-content step everywhere (--gap-head) instead of the .5em
   that scaled with the heading and left FAQ at 24px and How at 8px. */
.sec-head {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.015em; text-transform: uppercase; margin-bottom: var(--gap-head);
}
.sec-head span { display: block; }
/* Roboto Condensed sets a taller line box than Oswald and needs no negative
   tracking in uppercase Greek. */
:lang(el) .sec-head { letter-spacing: 0; line-height: 1.08; }

/* --- About --------------------------------------------------------------- */
.about { background: var(--surface-1); padding-bottom: calc(var(--section-y) + var(--photo-lift)); }
/* Live: narrow heading column, then two equal body columns. Photo sits above. */
.about__grid { display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,1fr) minmax(0,1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(34px, 4vw, 54px); align-items: start; }
.about__grid .sec-head { margin-bottom: 0; }
/* Greek compromise: "Τι είναι το" is 346px at the shared display size but the
   heading column is only 257px, so it broke and left "ΤΟ" orphaned on its own
   line. 52px pulls the supplied first line back together. English needs no
   change — "WHAT IS" already fits. Reset at <=1024 where the grid collapses
   to one column and the heading gets the full width back. */
:lang(el) .about__grid .sec-head { font-size: clamp(2rem, 4vw, 3.25rem); }
.about__photo { margin-bottom: var(--gap-block); }
.about__photo img { width: 100%; height: auto; object-fit: cover; }

/* --- Call for Projects --------------------------------------------------- */
.call { background: var(--black); color: var(--on-dark); }
.call .sec-head { color: #fff; }
/* Live: photo sits above; heading and lede then run side by side. */
.call__intro {
  display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
  margin-bottom: var(--gap-block);
}
.call__intro .sec-head { margin-bottom: 0; }
/* The lede ran ~96 characters per line. 30em holds it near 66. */
.call__lede { color: var(--on-dark); margin: 0; font-size: 1.08em; line-height: 1.58; max-width: 30em; }
/* Live: the photo straddles the About/Call boundary — roughly its top quarter
   sits up in the light section, with the black beginning behind it. Lift it clear
   of the section's own top padding and keep it painted above the section above. */
.call__photo {
  position: relative; z-index: 1;
  margin-top: calc(-1 * (var(--section-y) + var(--photo-lift)));
  margin-bottom: var(--gap-block);
}
@media (max-width: 768px) {
  .call__photo { margin-top: calc(-1 * (var(--section-y) + var(--photo-lift))); }
}
.call__photo img { width: 100%; height: auto; }
/* Rows need more air than columns: card bodies are ragged, so an equal gap
   made the second row read as a continuation of the first. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(44px, 5vw, 76px) clamp(28px, 3.4vw, 52px); }
.card__num { font-family: var(--font-ui); font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 400; color: var(--olive); line-height: 1; letter-spacing: .01em; margin-bottom: .34em; }
.card__name { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.14; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: .62em; }
.card__desc { font-size: .95em; line-height: 1.58; color: var(--on-dark); opacity: .82; }

/* --- How it works -------------------------------------------------------- */
.how { background: var(--surface-1); }
.how .cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
.how .card__num { color: var(--black); }
.how .card__name { color: var(--ink); }
.how .card__desc { color: var(--body-text); opacity: 1; }
/* Five items in a 3-col grid: last row centres rather than hanging left. */
.how .cards > :nth-child(4) { grid-column: 1 / 2; }
.how .cards > :nth-child(5) { grid-column: 2 / 3; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { background: var(--surface-1); }
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: clamp(20px, 3vw, 40px);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: clamp(20px, 2.2vw, 28px) 0;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  /* Inherited body leading (1.62) was far too loose for a wrapped question —
     the long Greek ones read as two unrelated lines. */
  font-size: clamp(1rem, 1.55vw, 22px); line-height: 1.24; letter-spacing: .03em; color: var(--ink);
}
.faq__q:hover { color: var(--olive-text); }
.faq__icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor;
  transform: translateY(-50%); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__panel { overflow: hidden; height: 0; transition: height .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .faq__panel { transition: none; } }
/* 78ch ran ~97 characters per line — well past comfortable. 58ch lands ~72. */
/* The question spans the full row, so a 58ch answer left half the width empty
   and read as broken. Filling it outright would mean ~148 characters per line,
   so instead the answer flows into two columns above 1024px — the measure stays
   comfortable and the space gets used. Short answers simply fill one column. */
.faq__panel-inner { padding: 0 0 clamp(24px, 2.8vw, 38px); }
@media (min-width: 1025px) {
  .faq__panel-inner {
    columns: 2; column-gap: clamp(40px, 4vw, 72px);
    orphans: 2; widows: 2;
  }
  .faq__panel-inner > * { break-inside: avoid-column; }
  .faq__panel-inner > p:first-child { margin-top: 0; }
}
.faq__panel h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.02em; line-height: 1.24; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin: 1.9em 0 .55em; }
.faq__panel :first-child { margin-top: 0; }
.faq__panel ul { margin: 0 0 .6em; padding-left: 1.2em; }
.faq__panel li { margin-bottom: .35em; }

/* --- Contact ------------------------------------------------------------- */
/* Live: oval centred at the top, heading centred at ~120px full width,
   then a two-column row — lede left, email right-aligned. */
.contact { background: var(--surface-2); overflow: hidden; }
.contact__oval { width: min(560px, 52vw); height: auto; margin: 0 auto clamp(32px, 4.4vw, 64px); }
/* Was clamp(2.4rem, 8.3vw, 120px) — 120px dwarfed everything else on the page.
   86px still makes it the largest type on the site, by a deliberate margin. */
.contact__head {
  text-align: center; width: 100%;
  font-size: clamp(2.4rem, 6.2vw, 86px); line-height: 1;
  margin-bottom: clamp(32px, 3.8vw, 58px);
}
/* Full wrap width, so the lede's left edge lines up with every other column
   on the page instead of sitting on an arbitrary 1000px inset. */
.contact__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 60px); align-items: end;
  max-width: none;
}
.contact__lede { font-size: clamp(1.02rem, 1.4vw, 20px); line-height: 1.55; margin: 0; max-width: 30ch; }
/* 48px forced the address onto two lines against a right edge; 34px sets it
   on one at every breakpoint in both locales. */
.contact__mail {
  justify-self: end; text-align: right;
  font-family: var(--font-head); font-weight: 700; text-transform: none;
  font-size: clamp(1.2rem, 2.5vw, 34px); line-height: 1.08;
  color: var(--ink); text-decoration: none; overflow-wrap: normal; letter-spacing: 0;
}
.contact__mail:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 768px) {
  .contact__row { grid-template-columns: 1fr; gap: 18px; }
  .contact__mail { justify-self: start; text-align: left; }
}

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--black); color: var(--on-dark); padding-block: clamp(52px, 6vw, 84px) 34px; font-size: .92em; line-height: 1.55; }
.site-footer a { color: var(--on-dark); }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)) minmax(0,1.3fr); column-gap: clamp(28px, 4vw, 60px); row-gap: clamp(36px, 4.5vw, 56px); }
/* The city label is a heading for the block under it — .9em read as part of
   the address. The two address paragraphs needed separating for the same reason. */
.footer__city { font-family: var(--font-head); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 1.4em; font-size: .96em; }
.footer__office p { margin-bottom: 1.05em; opacity: .8; }
.footer__tagline { opacity: .8; max-width: 44ch; }
.footer__bottom {
  margin-top: clamp(44px, 5vw, 68px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  font-size: .92em; opacity: .72;
}
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }

/* --- Responsive (§5.3: 1200 / 1024 / 768) -------------------------------- */
@media (max-width: 1200px) {
  .cards, .how .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .how .cards > :nth-child(4), .how .cards > :nth-child(5) { grid-column: auto; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__tagline-cell { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .about__grid { grid-template-columns: 1fr; }
  :lang(el) .about__grid .sec-head { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
  .call__intro { grid-template-columns: 1fr; }
  /* Once stacked, these columns go full width — cap the measure. */
  .about__col { max-width: 56ch; }
  .call__lede { max-width: 34em; }
}
@media (max-width: 768px) {
  :root { --photo-lift: clamp(40px, 9vw, 80px); }
  .cards, .how .cards { grid-template-columns: 1fr; }
  .cards, .how .cards { gap: clamp(40px, 9vw, 56px); }
  .footer__grid { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  /* Matches the brand mark's mobile centre (16px pad + 22px mark). */
  .langbar { padding: 10px var(--gutter); }
  .contact__lede, .about__col, .call__lede { max-width: none; }
}

/* ==========================================================================
   Submission form (§9)
   ========================================================================== */
.formsec { position: relative; background: var(--surface-2); isolation: isolate; overflow: hidden; }
/* Transform-based parallax (brief §11) — never background-attachment: fixed,
   which iOS Safari ignores. Disabled below 1024px. */
.formsec__bg {
  position: absolute; inset: -12% 0 -12% 0; z-index: -1;
  background: url("../assets/images/GOF_Cyta-Landing_image2.jpg") center/cover no-repeat;
  will-change: transform;
}
/* No overlay: the card is opaque, so nothing sits on the image needing
   contrast, and a scrim just desaturated it against the live version. */
@media (max-width: 1024px) { .formsec__bg { inset: 0; transform: none !important; } }

.formcard {
  background: var(--card); padding: clamp(30px, 4.4vw, 72px);
  max-width: 900px; margin-inline: auto; position: relative;
}
.formcard > .sec-head { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-bottom: .4em; }
.form__req-note { font-size: .92em; margin-bottom: clamp(34px, 4vw, 54px); }

/* Fieldset separation must clearly beat the row gap inside a fieldset,
   or "About you" and "About the project" read as one long list. */
.fieldset { border: 0; padding: 0; margin: 0 0 clamp(40px, 4.6vw, 64px); }
.fieldset legend {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: .82em; line-height: 1.3; color: var(--olive-text);
  padding: 0; margin-bottom: 22px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 2.6vw, 36px) clamp(24px, 3vw, 44px); }
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  /* The file row keeps its two columns, so buy the meta column back some
     width by trimming the button and the row's own padding. */
  /* At 390px the Greek button label ("ΕΠΙΛΟΓΗ ΑΡΧΕΙΟΥ") is ~150px wide, which
     squeezed the meta column to 81px and forced mid-word breaks in the labels.
     Trimming the card and row padding buys the meta column back to ~117px —
     enough for the longest Greek label and hint to set on one line. */
  .formcard { padding: 26px 20px; }
  .filerow { padding: 16px 14px; gap: 12px; }
  .btn-file, .btn-remove { font-size: .74em; padding: 11px 14px; letter-spacing: .05em; }
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
/* The hint used to be set larger than the label it sat under — inverted
   hierarchy. Label is now the larger of the two. */
.field label {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: .82em; line-height: 1.3; color: var(--ink);
}
.field .req { color: var(--danger); margin-left: 2px; }
.field .hint { font-size: .8em; line-height: 1.45; color: #6b6b6b; }
/* Live: underline fields — transparent, 2px bottom rule only, no radius. */
.field input, .field select, .field textarea {
  font-family: var(--font-ui); font-size: 1em; line-height: 1.4; color: #111;
  padding: 12px 2px; background: transparent;
  border: 0; border-bottom: 2px solid #7F7F7F; border-radius: 0;
  width: 100%; transition: border-color .18s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23161616' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 12px; padding-right: 28px; }
.field :is(input, select, textarea):hover { border-bottom-color: var(--ink); }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.field .err { font-size: .8em; line-height: 1.45; color: var(--danger); min-height: 0; }
.field .err:empty { display: none; }
.counter { font-size: .78em; color: #6b6b6b; text-align: right; font-variant-numeric: tabular-nums; }
.counter.is-warn { color: var(--danger); }
/* The counter belongs to the textarea above it, so pull it back out of the
   full field row-gap and sit it 10px under the rule. */
.field:has(> .counter) { margin-top: calc(10px - clamp(28px, 2.6vw, 36px)); }

/* File slots */
.files { display: grid; gap: 16px; }
.filerow {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px;
  border: 1px dashed var(--rule); padding: 18px clamp(16px, 1.8vw, 24px); border-radius: 3px;
  background: #fff;
}
.filerow[hidden] { display: none; }
.filerow__meta { min-width: 0; }
/* Label / hint / filename were three lines at body leading with no grouping —
   the label now reads as a heading for the two lines beneath it. */
.filerow__label { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .82em; line-height: 1.3; color: var(--ink); margin-bottom: 7px; }
/* The meta column is minmax(0,1fr), so it can be squeezed below its
   min-content width. Long unbreakable Greek words ("χρονοδιάγραμμα") then
   spilled over the Choose-file button — break them instead. */
.filerow__hint, .filerow__name { font-size: .8em; line-height: 1.45; color: #6b6b6b; }
/* break-word (not `anywhere`) so a word only splits when it genuinely cannot
   fit — otherwise long Greek labels broke mid-word even with room to spare.
   hyphens:auto makes the unavoidable narrow-viewport break read as typography
   rather than as a bug (the locale comes from <html lang>). */
.filerow__label, .filerow__hint { overflow-wrap: break-word; hyphens: auto; }
.filerow__name { overflow-wrap: anywhere; margin-top: 3px; }
.filerow__name.has-file { color: var(--olive-text); font-weight: 600; }
.filerow input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn-file, .btn-remove {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  font-size: .78em; line-height: 1.2; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn-file:hover { background: var(--ink); color: #fff; }
.btn-remove { border-color: var(--rule); color: #6b6b6b; }
.btn-remove:hover { border-color: var(--danger); color: var(--danger); }
.filerow__actions { display: flex; gap: 10px; align-items: center; }
.files__note { font-size: .86em; line-height: 1.5; color: #6b6b6b; margin-top: 18px; }

/* Consent */
.consent { display: grid; gap: 16px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: .94em; line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--olive-text); flex: 0 0 auto; }
.check a { color: var(--olive-text); }

/* Submit + states */
.btn-submit {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(15px, 1.1vw, 17px); padding: 17px 46px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.btn-submit:hover:not(:disabled) { background: var(--hover-fill); color: var(--black); border-color: var(--hover-fill); }
.btn-submit:disabled { opacity: .55; cursor: progress; }

.errsummary { border: 1px solid var(--danger); background: #fdf3f3; padding: 18px 22px; margin-bottom: 30px; border-radius: 3px; }
.errsummary[hidden] { display: none; }
.errsummary h3 { font-family: var(--font-head); font-size: .95em; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; color: var(--danger); margin-bottom: .7em; }
.errsummary ul { margin: 0; padding-left: 1.2em; font-size: .92em; line-height: 1.5; }
.errsummary li { margin-bottom: .3em; }
.errsummary a { color: var(--danger); }

.progress { margin-top: 18px; display: grid; gap: 8px; }
.progress[hidden] { display: none; }
.progress__row { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 12px; align-items: center; font-size: .84em; }
.progress__bar { height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.progress__bar i { display: block; height: 100%; width: 0; background: var(--olive-text); transition: width .25s var(--ease); }

.success { text-align: center; padding: clamp(20px, 3vw, 40px) 0; }
.success[hidden] { display: none; }
.success h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: .6em; }
.success__id { display: inline-block; font-family: var(--font-ui); font-size: 1.15em; line-height: 1.3; letter-spacing: .06em; background: var(--surface-1); border: 1px dashed var(--rule); padding: 14px 24px; margin: 18px 0 10px; }
.success__files { list-style: none; padding: 0; margin: 22px 0 0; font-size: .9em; line-height: 1.5; color: #6b6b6b; }

/* --- Background image bindings (desktop / mobile art direction, §6) ------- */
:root {
  --hero-img: url("../assets/images/Home_4_1.jpg");
}
@media (max-width: 768px) {
  :root { --hero-img: url("../assets/images/GOF_Cyta-Landing_image1_9x16.jpg"); }
}

.hero__title { margin: 0; line-height: 0; }

/* --- Hero brand mark (top-left) ------------------------------------------ */
.hero__brand { position: absolute; top: 0; left: 0; z-index: 20; padding: 26px var(--gutter); line-height: 0; }
.hero__brand img { width: auto; height: clamp(22px, 2vw, 30px); }
@media (max-width: 768px) { .hero__brand { padding: 16px var(--gutter); } }

/* --- Olive mark ---------------------------------------------------------- */
.olive-mark { width: 65px; height: auto; flex: 0 0 auto; }
.olive-mark--ink   { fill: var(--black); }
.olive-mark--light { fill: #fff; }
/* .5em here resolved against the *body* font-size, not the heading's, so the
   How heading sat 8px above the cards and collided with "01.". */
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px); margin-bottom: var(--gap-head);
}
.head-row .sec-head { margin-bottom: 0; }
.footer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: clamp(34px, 5vw, 62px);
}
.footer__top img { width: clamp(150px, 15vw, 205px); height: auto; }
@media (max-width: 768px) { .olive-mark { width: 46px; } }

/* FAQ + form headings run at 48px on the live site, left aligned — not the
   display size used by About / Call. */
.faq .sec-head, .formcard .sec-head { font-size: clamp(1.9rem, 3.4vw, 48px); text-align: left; }

/* Below 768 the Greek file labels ("Χρονοδιάγραμμα παραγωγής") and the
   "ΕΠΙΛΟΓΗ ΑΡΧΕΙΟΥ" button cannot share a ~310px row — the label column drops
   to 100px and wraps to three lines. Stack instead. */
@media (max-width: 768px) {
  .filerow { grid-template-columns: 1fr; gap: 12px; }
  .filerow__actions { justify-content: flex-start; }
  .btn-file { width: 100%; text-align: center; }
}