/* ═════════════════════════════════════════════════════════════════════════
   AudioGuide — "Signal" design system, Elementor build
   Load order: ag-fonts.css → ag-elementor-reset.css → ag-design.css
   Nothing here should ever be duplicated in a widget Style tab.

   Elementor DOM note: a widget renders as
     .elementor-widget.ag-CLASS > .elementor-widget-container > <real element>
   so every ag- class sits on the WRAPPER, and rules reach through it.
   Container rules are written .e-con.ag-CLASS so they out-specify
   Elementor's own .e-con{display:var(--display)} without !important.
   ═════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────── TOKENS */
:root{
  --ag-porcelain:#EAEEEF;
  --ag-paper:#F6F8F9;
  --ag-cream:#F5EFE5;
  --ag-petrol:#071C22;
  --ag-petrol-2:#0C2932;
  --ag-graphite:#58686E;
  --ag-signal:#17A2C6;          /* emitted signal only — never a fill      */
  --ag-signal-ink:#0C7590;      /* the accessible cyan for light grounds   */
  --ag-ember:#E1957F;           /* the second transmitter, and only that   */
  --ag-coral-ink:#A54F38;
  --ag-coral-num:#BC6248;

  --ag-hair:rgba(7,28,34,.15);
  --ag-hair-2:rgba(7,28,34,.08);
  --ag-hair-inv:rgba(234,238,239,.16);

  --ag-display:"Geologica",system-ui,-apple-system,sans-serif;
  --ag-body:"Commissioner",system-ui,-apple-system,sans-serif;

  --ag-edge:clamp(20px,5vw,72px);
  --ag-max:1420px;
  --ag-band:clamp(42px,5.25vw,73px);
  --ag-ease:cubic-bezier(.22,.61,.36,1);
}

/* ───────────────────────────────────────────────────────────────── BASE */
body{
  background:var(--ag-porcelain);color:var(--ag-petrol);
  font-family:var(--ag-body);font-size:1.0625rem;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}
/* form fields stay selectable/editable — the rule above would otherwise
   block selecting text inside an input while typing/correcting it */
input,textarea,select{-webkit-user-select:text;-moz-user-select:text;user-select:text}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ag-signal-ink);outline-offset:3px;border-radius:2px}
a:hover {color:var(--ag-coral-ink);border-bottom-color:var(--ag-coral-ink)}
#apps,#prep,#quote{scroll-margin-top:84px}

/* ───────────────────────────────────────────────────────────────── SHELL */
.e-con.ag-wrap{width:min(100%,var(--ag-max));margin-inline:auto;
  padding-inline:var(--ag-edge)}
.e-con.ag-band{padding-block:var(--ag-band)}
.ag-band--dark{background:var(--ag-petrol);color:var(--ag-porcelain)}
.ag-band--dark .ag-lead p{color:rgba(234,238,239,.62)}
.ag-band--dark .ag-label p{color:rgba(234,238,239,.5)}
.e-con.ag-section-head{max-width:60ch;margin-bottom:clamp(24px,3vw,42px)}

/* ────────────────────────────────────────────────────────────────── TYPE */
.ag-d1 .elementor-heading-title,
.ag-d2 .elementor-heading-title,
.ag-d3 .elementor-heading-title{
  font-family:var(--ag-display);font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.ag-d1 .elementor-heading-title{font-size:clamp(1.87rem,4.25vw,3.89rem);line-height:.98;
  letter-spacing:-.045em;font-weight:300;max-width:19ch}
.ag-d2 .elementor-heading-title{font-size:clamp(1.76rem,3.15vw,2.97rem);line-height:1.13;font-weight:300}
.ag-d3 .elementor-heading-title{font-size:clamp(1.22rem,1.8vw,1.76rem);line-height:1.2;
  letter-spacing:-.03em;font-weight:400}
/* default gap after a heading/lead that follows a label — sections that need
   a different value (hero, dual) override these on their own wrapper */
.ag-d2{margin-top:18px}
.ag-lead{margin-top:22px}
.ag-lead p{font-size:clamp(.93rem,1.13vw,1.1rem);line-height:1.56;
  color:var(--ag-graphite);max-width:46ch;font-weight:300}
.ag-label p{font-family:var(--ag-display);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ag-graphite)}

/* ────────────────────────────────────────────────────────────── CONTROLS */
.ag-btn .elementor-button{
  display:inline-flex;align-items:center;min-height:50px;padding:0 1.5rem;
  border-radius:999px;border:1px solid var(--ag-petrol);
  background:var(--ag-petrol);color:var(--ag-porcelain);
  font-family:var(--ag-display);font-size:.9rem;font-weight:400;letter-spacing:-.005em;
  transition:transform .25s var(--ag-ease),background .25s var(--ag-ease);
}
.ag-btn .elementor-button:hover{transform:translateY(-2px);
  background:var(--ag-petrol-2);color:var(--ag-porcelain)}
.ag-band--dark .ag-btn .elementor-button{background:var(--ag-porcelain);
  border-color:var(--ag-porcelain);color:var(--ag-petrol)}

.ag-tlink{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ag-display);
  font-size:.9rem;font-weight:400;padding-bottom:3px;
  border-bottom:1px solid var(--ag-signal-ink);
  transition:gap .25s var(--ag-ease),color .2s,border-color .2s}
.ag-tlink:hover{gap:.85em;color:var(--ag-coral-ink);border-bottom-color:var(--ag-coral-ink)}
.ag-tlink i{font-style:normal;display:flex;color:var(--ag-signal-ink);transition:color .2s}
.ag-tlink:hover i{color:var(--ag-coral-ink)}
.ag-band--dark .ag-tlink:hover{color:var(--ag-ember);border-bottom-color:var(--ag-ember)}
.ag-band--dark .ag-tlink:hover i{color:var(--ag-ember)}
.ag-band--dark .ag-tlink,.ag-dual .ag-tlink{border-bottom-color:var(--ag-signal)}
.ag-band--dark .ag-tlink i,.ag-dual .ag-tlink i{color:var(--ag-signal)}

/* ────────────────────────────────────────────────────────────────── HERO */
.e-con.ag-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(86vh,860px);justify-content:center}
.ag-hero__fieldslot,.ag-hero__fieldslot .elementor-widget-container{
  position:absolute;inset:0;z-index:0}
.ag-field{display:block;width:100%;height:100%}
.e-con.ag-hero__human{position:absolute;inset:0;z-index:1;opacity:0;
  pointer-events:none;overflow:hidden}
.ag-hero__humanimg,.ag-hero__humanimg .elementor-widget-container{height:100%}
.ag-hero__humanimg img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transform-origin:60% 50%}
.ag-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,var(--ag-porcelain) 24%,
    rgba(234,238,239,.80) 45%,rgba(234,238,239,.10) 72%)}
.e-con.ag-hero__in{position:relative;z-index:3;padding-block:clamp(72px,9vw,120px)}
.ag-hero__in .ag-d1{margin-top:20px}
.ag-hero__in .ag-lead{margin-top:26px}
.e-con.ag-hero__act{flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:38px;width:auto}
.ag-hero__capslot{position:absolute;right:var(--ag-edge);bottom:26px;z-index:4;width:auto}
.ag-hero__cap{display:flex;align-items:center;gap:.7em;margin:0;
  font-family:var(--ag-display);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ag-graphite)}
.ag-hero__dot{width:5px;height:5px;border-radius:50%;background:var(--ag-signal-ink);display:block}

/* ──────────────────────────────────────────────────────────── SPEC PLATE */
.e-con.ag-plate{border-block:1px solid var(--ag-hair);background:var(--ag-paper)}
.e-con.ag-plate__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.e-con.ag-plate__it{padding:28px 24px 30px}
.ag-plate__it+.ag-plate__it{border-left:1px solid var(--ag-hair-2)}
.ag-plate__dt p{font-family:var(--ag-display);font-size:.625rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ag-graphite)}
.ag-plate__dd{margin-top:14px}
.ag-plate__dd p{font-family:var(--ag-display);font-variant-numeric:tabular-nums;
  font-weight:200;letter-spacing:-.03em;
  font-size:clamp(1.5rem,2.1vw,2.05rem);line-height:1;white-space:nowrap}
.ag-plate__dd .ag-u{font-style:normal;font-size:.46em;letter-spacing:.02em;
  color:var(--ag-graphite);margin-left:.3em}
.ag-plate__dd .ag-u--pre{margin-left:0;margin-right:.42em}

/* ──────────────────────────────────────────────────────────── APPLICATIONS */
.e-con.ag-apps__grid{display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);align-items:start}
.e-con.ag-apps__frame{position:sticky;top:104px;aspect-ratio:4/5;
  background:var(--ag-petrol);overflow:hidden;isolation:isolate}
.ag-apps__shot,.ag-apps__shot .elementor-widget-container{position:absolute;inset:0}
.ag-apps__shot img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);
  transition:opacity .6s var(--ag-ease),transform 1.1s var(--ag-ease)}
.ag-apps__shot.ag-is-on img{opacity:1;transform:scale(1)}
.e-con.ag-apps__list{border-top:1px solid var(--ag-hair);gap:0}
.e-con.ag-apps__row{
  position:relative;flex-wrap:nowrap;align-items:baseline;gap:1rem;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--ag-hair);
  cursor:pointer;transition:padding-left .35s var(--ag-ease)}
.ag-apps__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ag-coral-ink);transform:scaleY(0);transform-origin:top;
  transition:transform .38s var(--ag-ease)}
.ag-apps__row::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  transition:opacity .38s var(--ag-ease);
  background:linear-gradient(90deg,rgba(23,162,198,.09),rgba(23,162,198,0) 58%)}
.ag-apps__title{flex:1 1 auto}
.ag-apps__title p{font-family:var(--ag-display);font-size:clamp(1.02rem,1.74vw,1.66rem);
  font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--ag-graphite);
  transition:color .3s var(--ag-ease)}
.ag-apps__meta{flex:0 0 auto}
.ag-apps__meta p{font-family:var(--ag-display);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:transparent;transition:color .3s var(--ag-ease)}
.ag-apps__row.ag-is-on,.ag-apps__row:hover{padding-left:18px}
.ag-apps__row.ag-is-on .ag-apps__title p,
.ag-apps__row:hover .ag-apps__title p{color:var(--ag-petrol)}
.ag-apps__row.ag-is-on::before,.ag-apps__row:hover::before{transform:scaleY(1)}
.ag-apps__row.ag-is-on::after{opacity:1}
.ag-apps__row.ag-is-on .ag-apps__meta p{color:var(--ag-coral-ink)}
.ag-apps__thumb{display:none;flex:0 0 auto}
.ag-apps__more{margin-top:44px;width:auto}

/* ─────────────────────────────────────────────────────────────────── WHY */
.ag-why{background:var(--ag-porcelain)}
.e-con.ag-why__grid{display:grid;
  grid-template-columns:minmax(0,.56fr) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);align-items:start}
.e-con.ag-why__head{position:sticky;top:120px}
.e-con.ag-why__col{gap:0}
.e-con.ag-why__it{padding-block:clamp(34px,3.8vw,52px);
  border-top:1px solid rgba(7,28,34,.13)}
.ag-why__it:first-child{border-top:0;padding-top:0}
.ag-why__n p{font-family:var(--ag-display);font-weight:200;
  font-size:clamp(2.4rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.05em;
  color:var(--ag-coral-num);font-variant-numeric:tabular-nums}
.ag-why__rule{width:34px;height:2px;background:var(--ag-signal-ink)}
.ag-why__ruleslot{margin:18px 0 22px;width:auto}
.ag-why__copy{margin-top:16px}
.ag-why__copy p{color:#4E5C61;max-width:50ch;font-weight:300}

/* ────────────────────────────────────────────────────────────────── DUAL */
.e-con.ag-dual{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(680px,88vh,1000px);justify-content:center;
  padding-block:clamp(96px,11vw,150px)}
.ag-dual__fieldslot,.ag-dual__fieldslot .elementor-widget-container{
  position:absolute;inset:0;z-index:0}
.ag-dual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,var(--ag-petrol) 26%,
    rgba(7,28,34,.82) 47%,rgba(7,28,34,0) 72%)}
.e-con.ag-dual__wrap{position:relative;z-index:2}
.e-con.ag-dual__in{max-width:47ch}
.ag-dual__in .ag-d2{margin-top:20px}
.ag-dual__in .ag-lead{margin-top:24px}
.ag-dual__legendslot{margin-top:34px;width:auto}
.ag-dual__legend{display:flex;flex-direction:column;gap:.85rem;
  font-family:var(--ag-display);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.ag-dual__legend span{display:flex;align-items:center;gap:.7em;
  color:rgba(234,238,239,.42);opacity:.34;transform:translateY(4px);
  transition:opacity .6s var(--ag-ease),transform .6s var(--ag-ease),color .6s var(--ag-ease)}
.ag-dual__legend span.ag-is-live{opacity:1;transform:none;color:rgba(234,238,239,.78)}
.ag-dual__legend i{width:8px;height:8px;border-radius:50%;display:block;flex:0 0 auto}
.ag-dual__act{margin-top:36px;width:auto}

/* ─────────────────────────────────────────────────────── PREP + MANIFEST */
.e-con.ag-prep__top{display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(40px,6vw,80px);align-items:center}
.e-con.ag-prep__fig{aspect-ratio:3/2;overflow:hidden}
.ag-prep__img,.ag-prep__img .elementor-widget-container{height:100%}
.ag-prep__img img{width:100%;height:100%;object-fit:cover}

.e-con.ag-man{margin-top:clamp(56px,7vw,96px);border-block:1px solid var(--ag-hair);
  display:grid;grid-template-columns:repeat(5,1fr)}
.e-con.ag-man__row{display:flex;flex-direction:column;
  padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,26px) clamp(24px,2.8vw,32px)}
.ag-man__row+.ag-man__row{border-left:1px solid var(--ag-hair-2)}
/* space for the icon added in Elementor — margin only appears once
   something actually precedes the title, so it costs nothing today */
.ag-man__dt:not(:first-child){margin-top:.9rem}
.ag-man__dt p{font-family:var(--ag-display);font-size:clamp(1.02rem,1.4vw,1.26rem);
  font-weight:400;letter-spacing:-.02em}
.ag-man__dd{margin-top:.65rem}
.ag-man__dd p{color:var(--ag-graphite);font-weight:300}
.ag-man__ok{display:none}

/* ─────────────────────────────────────────────────────────────── PROCESS */
.e-con.ag-proc{margin-top:clamp(80px,9vw,124px)}
.e-con.ag-proc__head{max-width:52ch}
.e-con.ag-proc__track{position:relative;margin-top:clamp(44px,5vw,68px)}
.ag-proc__ruleslot{position:absolute;left:0;right:0;top:0;width:auto}
.ag-proc__rule{height:1px;background:var(--ag-petrol);transform-origin:left}
.e-con.ag-proc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.e-con.ag-proc__it{padding:28px 26px 0 0;position:relative}
.ag-proc__it+.ag-proc__it{padding-left:26px;border-left:1px solid var(--ag-hair)}
.ag-proc__it::before{content:"";position:absolute;top:-4px;left:0;width:8px;height:8px;
  border-radius:50%;background:var(--ag-petrol);transform-origin:center}
.ag-proc__it+.ag-proc__it::before{left:26px;transform:translateX(-26px)}
.ag-proc__n p{font-family:var(--ag-display);font-size:.625rem;letter-spacing:.15em;
  color:var(--ag-graphite)}
.ag-proc__title{margin-top:14px}
.ag-proc__title .elementor-heading-title{font-family:var(--ag-display);
  font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:400;letter-spacing:-.025em}
.ag-proc__copy{margin-top:10px}
.ag-proc__copy p{color:var(--ag-graphite);font-size:.97rem;font-weight:300}

/* ─────────────────────────────────────────────────────────────────── CTA */
.ag-cta{position:relative;isolation:isolate;
  border-top:1px solid var(--ag-hair-2)}
/* well above the shared --ag-band value specifically for the CTA — every
   other band shrank with that token, this one needed to stay roomier. */
.e-con.ag-band.ag-cta{padding-block:clamp(72px,9vw,130px)}
/* scrim + color wash as a translucent layer over whatever background
   Elementor's own Background control sets on .ag-cta (image, video,
   gradient…) — this never touches that property, so it keeps working if
   the image changes. The near-opaque porcelain base is load-bearing: a
   photo behind text needs guaranteed contrast, not just a decorative
   tint — the two accent gradients sit on top of it, not instead of it. */
.ag-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(105% 88% at 6% 0%,rgba(23,162,198,.22),rgba(23,162,198,0) 54%),
    radial-gradient(52% 60% at 100% 100%,rgba(225,149,127,.32),rgba(225,149,127,0) 62%),
    rgba(234,238,239,.72)}
.e-con.ag-cta__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
  gap:clamp(40px,6vw,88px);align-items:end}
.ag-cta__need{margin-top:34px}
.ag-cta__need p{display:flex;flex-wrap:wrap;gap:.5em .5em;
  font-family:var(--ag-display);font-size:.72rem;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ag-signal-ink)}
.ag-cta__need b{font-weight:500}
.ag-cta__need s{text-decoration:none;color:rgba(12,117,144,.45)}
.e-con.ag-cta__act{margin-top:20px;width:auto}
.ag-contact__list{display:flex;flex-direction:column;gap:.55rem;font-size:1.1rem}
.ag-contact .ag-label{margin-bottom:.6rem}
.ag-contact__list a{border-bottom:1px solid transparent;transition:border-color .2s;width:fit-content}
.ag-contact__list a:hover{border-bottom-color:var(--ag-coral-ink)}
.ag-contact__list span{color:var(--ag-graphite)}

/* Generic content icon-list — Elementor's native Icon List widget, styled
   for LIGHT grounds (contact panels, body content generally). Same shape
   and rules as .ag-foot__iconlist above, just the light-ground half of
   that pair: signal-ink icons, never plain signal on light per the
   design system's own contrast rule (2.56:1, fails for any UI mark),
   coral-ink is the light-ground hover accent. */
.ag-content__iconlist ul{list-style:none;margin:0;padding:0}
.ag-content__iconlist li+li{margin-top:1.1rem}
/* matches .ag-contact__list's own size (1.1rem) — the block this list
   sits directly under — rather than the smaller default body size. */
.ag-content__iconlist a,.ag-content__iconlist .elementor-icon-list-text{
  display:inline-flex;align-items:center;gap:.65em;color:var(--ag-petrol);
  text-decoration:none;font-family:var(--ag-body);font-size:1.1rem;
  line-height:1.7;font-weight:400;transition:color .2s}
.ag-content__iconlist .elementor-icon-list-icon{color:var(--ag-signal-ink);
  flex:0 0 auto;display:inline-flex}
.ag-content__iconlist .elementor-icon-list-icon svg{fill:currentColor;width:15px;height:15px}
.ag-content__iconlist a:hover{color:var(--ag-coral-ink)}
.ag-content__iconlist a:hover .elementor-icon-list-icon{color:var(--ag-coral-ink)}
/* dark-ground variant — same pair-switch .ag-tlink already does: petrol
   text/signal-ink icons on light become porcelain/signal on dark, ember
   replaces coral-ink as the hover accent (design-system.md's ground-aware
   rule). Applies wherever ag-band--dark is added alongside ag-contact, as
   it now is here. */
.ag-band--dark .ag-contact__list span{color:rgba(234,238,239,.7)}
.ag-band--dark .ag-contact__list b{color:var(--ag-porcelain)}
.ag-band--dark .ag-content__iconlist a,
.ag-band--dark .ag-content__iconlist .elementor-icon-list-text{color:var(--ag-porcelain)}
.ag-band--dark .ag-content__iconlist .elementor-icon-list-icon{color:var(--ag-signal)}
.ag-band--dark .ag-content__iconlist a:hover{color:var(--ag-ember)}
.ag-band--dark .ag-content__iconlist a:hover .elementor-icon-list-icon{color:var(--ag-ember)}

/* ──────────────────────────────────────────────────── CONTACT PAGE */
/* Επικοινωνία — form and contact details side by side. A dedicated class
   rather than reusing .ag-cta__grid: that one is align-items:end (tuned
   for a short copy block sitting level with a short contact list), which
   would bottom-align a five-field form against four lines of contact
   info and leave a large gap above the shorter column. */
.e-con.ag-contact-grid{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
  gap:clamp(40px,6vw,88px);align-items:start}
.ag-contact .ag-d2+.ag-contact__slot{margin-top:22px}
/* -25% off the shared ag-d2 size for just these two headings — ag-d2 is
   used for full section headings elsewhere and stays as-is there. */
.ag-contact-form .ag-d2 .elementor-heading-title,
.ag-contact .ag-d2 .elementor-heading-title{font-size:clamp(1.12rem,1.99vw,1.9rem)}
@media(max-width:1080px){
  .e-con.ag-contact-grid{grid-template-columns:1fr;gap:40px}
}

/* Ενοικίαση form intro — heading and lead side by side (50/50) instead of
   stacked, same divided-pair grammar as .ag-callout__grid elsewhere. */
.e-con.ag-rental-form__intro{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);align-items:start;margin-bottom:clamp(40px,5vw,64px)}
.ag-rental-form__intro .ag-d2{margin-top:0}
.ag-rental-form__intro .ag-lead{margin-top:0;max-width:none;
  padding-left:clamp(40px,6vw,80px);border-left:1px solid var(--ag-hair)}
@media(max-width:1080px){
  .e-con.ag-rental-form__intro{grid-template-columns:1fr;gap:24px}
  .ag-rental-form__intro .ag-lead{padding-left:0;border-left:0}
}

/* the form widget's own markup (Elementor Pro Form) — scoped to .ag-form
   so nothing here reaches any other widget. Flat, hairline underlines
   rather than boxed inputs, matching the rest of the site's "no card
   chrome" language; no widget Style-tab settings used anywhere. Field
   widths (2-up vs full-width) come from each field's own "width" setting
   in the JSON — Elementor emits that as elementor-col-50/100, which this
   only re-guttering, not redefining. Reused as-is by any future form
   (e.g. Ενοικίαση) that carries the same ag-form class. */
.ag-contact-form{margin-top:0}
.ag-contact-form .ag-d2+.ag-form{margin-top:clamp(28px,3.4vw,40px)}
/* Elementor Pro's own form skin (boxed white fields, full-width submit
   button) ships in its own plugin stylesheet and turned out to beat the
   rules below on every property that matters — background, border,
   radius, width — regardless of the source order this file assumed.
   !important here is the same justified exception as the hamburger-icon
   rules elsewhere in this file: fighting a plugin's own CSS with no
   other reliable way to out-specify it. */
/* one gutter value, used both here and by the panel fields below —
   letting the panel rule use a different, larger padding without also
   updating this cancelling margin was throwing off Elementor's own
   row-wrap math (the wrapper stayed narrower than the fields actually
   needed), which showed up as a disconnected floating box in the
   Πρόσθετα panel. */
/* !important: Elementor Pro ships its own default gutter margin on this
   exact element (confirmed via computed styles: -10px/-10px/-30px, not
   anything derived from this file) at equal-or-later specificity, so it
   was winning the tie and silently overriding this rule — the whole
   negative-margin/positive-padding cancellation below was never actually
   applying at its intended -32px, only at Elementor's own -10px, which is
   why .e-form__buttons (padding-inline:32px, matching the INTENDED -32px
   bleed) was landing short of the edge it's meant to touch. */
.ag-form .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;
  margin-inline:calc(clamp(20px,3vw,32px) * -1)!important;
  margin-bottom:0!important}
.ag-form .elementor-field-group{box-sizing:border-box;
  padding-inline:clamp(20px,3vw,32px);margin-bottom:28px}
.ag-form .elementor-field-label{display:block;margin-bottom:8px;
  font-family:var(--ag-display);font-size:.7rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ag-graphite)}
/* Confirmed from the real rendered markup (outerHTML dump): text/email/
   tel/textarea inputs carry BOTH .elementor-field and .elementor-field-
   textual on the SAME element, so matching either was fine there. But
   .elementor-field also lands on two elements this rule must NOT touch:
   the select's outer wrapper div (.elementor-select-wrapper — styled
   separately below, or this doubles its border with the select's own)
   and the checkbox <input> itself (styled separately below, or it
   inherits width:100%/padding meant for a text field). */
.ag-form .elementor-field:not(.elementor-select-wrapper):not([type="checkbox"]),
.ag-form .elementor-field-textual{
  box-sizing:border-box!important;
  width:100%!important;border:none!important;
  border-bottom:1px solid var(--ag-hair)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  padding:10px 2px!important;
  font-family:var(--ag-body);font-size:1rem;color:var(--ag-petrol);
  transition:border-color .2s var(--ag-ease)}
.ag-form .elementor-field::placeholder{color:var(--ag-graphite);opacity:.85}
.ag-form .elementor-field:focus,
.ag-form .elementor-field-textual:focus{
  outline:none!important;border-bottom-color:var(--ag-signal-ink)!important;
  box-shadow:none!important}
.ag-form textarea.elementor-field{min-height:130px;resize:vertical}
/* the select: .elementor-field is on the WRAPPER div, not the <select> —
   the <select> only carries .elementor-field-textual (already styled by
   the shared rule above). Elementor renders its own real caret SVG in
   .select-caret-down-wrapper; hidden in favour of the same minimal
   pseudo-element caret every other custom control on the site uses,
   rather than running two carets side by side. */
.ag-form .elementor-select-wrapper{
  display:flex!important;align-items:center;position:relative;
  border:none!important;background:transparent!important;padding:0!important}
.ag-form .elementor-select-wrapper .select-caret-down-wrapper{display:none!important}
/* Same root cause as the .e-form__buttons overflow: Elementor Pro's own
   default select skin (native OS box — border, background, padding)
   was winning the cascade tie against this rule because appearance
   wasn't !important here, so the border/background/padding below never
   actually reached the real select box, only its wrapper (which was
   already correctly transparent/borderless). Once appearance:none
   actually applies, the native chrome — and its own arrow, which was
   what threw the custom arrow's alignment off — disappears. */
.ag-form .elementor-select-wrapper select.elementor-field-textual{
  appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;
  border:none!important;background:transparent!important;background-image:none!important;
  box-shadow:none!important;padding:10px 1.4rem 10px 2px!important;
  cursor:pointer}
.ag-form .elementor-select-wrapper::after{content:"";position:absolute;
  right:6px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:1px solid var(--ag-graphite);border-bottom:1px solid var(--ag-graphite);
  transform:translateY(-70%) rotate(45deg)}

/* ═══════════ boxed variant — ag-form--boxed ═════════════════════════════
   An alternate field skin: filled, bordered, rounded fields instead of
   the hairline-underline style above. Additive, not a replacement — add
   this class ALONGSIDE ag-form on a specific form widget to opt it in;
   ag-form alone still renders the original minimal style untouched.
   Colours stay inside the Signal palette (paper fill, hairline border,
   signal-ink focus) rather than the cream/orange of whatever reference
   prompted this — those aren't tokens in this system. Selectors mirror
   the base rules' own :not() structure so specificity actually wins
   (both sides use !important, so specificity is compared before source
   order — a plain "more specific" class chain wouldn't have been enough
   on its own if it were LESS specific than what it's overriding). */
.ag-form.ag-form--boxed .elementor-field:not(.elementor-select-wrapper):not([type="checkbox"]),
.ag-form.ag-form--boxed .elementor-field-textual{
  box-sizing:border-box!important;
  background:var(--ag-paper)!important;border:1px solid var(--ag-hair)!important;
  border-radius:14px!important;padding:14px 18px!important}
.ag-form.ag-form--boxed .elementor-field:focus,
.ag-form.ag-form--boxed .elementor-field-textual:focus{
  border-color:var(--ag-signal-ink)!important;background:var(--ag-porcelain)!important}
.ag-form.ag-form--boxed textarea.elementor-field{min-height:130px}
.ag-form.ag-form--boxed .elementor-select-wrapper{
  box-sizing:border-box!important;
  background:var(--ag-paper)!important;border:1px solid var(--ag-hair)!important;
  border-radius:14px!important;padding:5px 18px!important}
.ag-form.ag-form--boxed .elementor-select-wrapper::after{right:18px}
/* Confirmed from the live Styles panel: the base select rule above
   (.ag-form .elementor-select-wrapper select.elementor-field-textual)
   is more specific than the boxed wrapper rule (extra `select` type
   selector), so it kept winning even under .ag-form--boxed and kept
   applying its own 10px/1.4rem/10px/2px padding on TOP of the wrapper's
   own 14px 18px — stacking into an oversized box. This re-specifies for
   the select itself in boxed mode: the wrapper alone carries the visual
   box now, the select stays neutral, keeping only enough right padding
   to clear the arrow. */
.ag-form.ag-form--boxed .elementor-select-wrapper select.elementor-field-textual{
  padding:0 1.4rem 0 4px!important;border:none!important;background:transparent!important}
.ag-form.ag-form--boxed .elementor-field-group{margin-bottom:22px}
/* labels go plainer/larger here too — sentence case, no tracking — a
   deliberate part of "traditional" rather than an oversight: the tiny
   tracked-caps label is a Signal signature used everywhere else in this
   file, but pairing it with a boxed field read as an odd mix rather
   than a coherent alternate style. Tell me if you'd rather keep the
   tracked-caps label even here. */
.ag-form.ag-form--boxed .elementor-field-label{
  text-transform:none;letter-spacing:normal;font-family:var(--ag-body);
  font-size:.95rem;font-weight:400;color:var(--ag-petrol);padding-bottom:5px !important; padding-left:18px}
/* the button stays the same solid-petrol pill used everywhere on the
   site — not the reference's orange, which isn't in this palette, and
   not uppercase, since Greek display type set in caps loses its tonos
   and reads as shouting (greek-copy.md) — just a size bump for more
   presence, matching the reference's larger, more assertive CTA. */
.ag-form.ag-form--boxed .elementor-button{
  min-height:56px!important;padding:0 2rem!important;font-size:1rem!important;
  font-weight:500!important}

/* Acceptance (checkbox) — the <input> itself carries .elementor-field
   (excluded from the shared rule above), and its actual DOM parent for
   layout purposes is .elementor-field-option, one level inside
   .elementor-field-subgroup — NOT the outer .elementor-field-group,
   which also holds the "Αποδοχή Όρων" label above the checkbox and must
   stay in normal block flow rather than being pulled into the same row. */
.ag-form .elementor-field-option{
  display:flex;align-items:flex-start;gap:.6em;margin-top:4px}
.ag-form input[type="checkbox"].elementor-field{
  width:16px!important;height:16px!important;margin:3px 0 0!important;
  padding:0!important;border:1px solid var(--ag-hair)!important;
  border-radius:2px!important;background:transparent!important;
  box-shadow:none!important;flex:0 0 auto;accent-color:var(--ag-petrol);
  cursor:pointer}
.ag-form .elementor-field-option label{
  font-size:.75em;line-height:1.7;color:var(--ag-graphite);
  font-weight:300;margin:0}

/* the acceptance field-group and the submit button are both col-50, so
   they share a row by default; align-self:flex-end sits the (short)
   button against the bottom of the (taller, multi-line) acceptance
   block instead of its top. */
/* the form widget itself carries elementor-button-align-stretch (real
   class, confirmed from the outerHTML dump) — that's what was forcing
   the button to fill its row regardless of the field-group's own
   elementor-col-50 width. e-form__buttons is the actual submit
   field-group's own class in this markup. */
/* Actual root cause of the persistent overflow: unlike every real field
   (which sets box-sizing:border-box explicitly, below), this element
   never did — so width:100% plus this padding-inline added the padding
   ON TOP of that 100% instead of carving it out, making the rendered
   box 64px wider than its container. That's the whole bug; the
   width:auto→width:100% rework earlier was a real improvement but
   couldn't have fixed this on its own. */
.ag-form.elementor-button-align-stretch .e-form__buttons,
.ag-form .e-form__buttons{
  box-sizing:border-box!important;
  width:100%!important;max-width:none!important;flex:0 0 100%!important;
  margin-left:0!important;align-self:auto;
  padding-inline:clamp(20px,3vw,32px);
  display:flex!important;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.ag-form.elementor-button-align-stretch .e-form__buttons .elementor-button,
.ag-form .e-form__buttons .elementor-button{width:auto!important}
.ag-form .e-form__buttons__wrapper{flex:0 0 auto;margin:0!important}
.ag-form .e-form__buttons__wrapper__button{white-space:nowrap}
/* Previous is the secondary action — an outline treatment, not the same
   solid fill as Next/Submit. A deliberate, scoped exception to "no
   ghost button" (design-system.md): that rule is about a marketing
   page's single CTA never competing with a second one; a multi-step
   form genuinely needs a visually weaker back-action beside the
   primary one, which a landing page never has to express. */
.ag-form .e-form__buttons__wrapper__button-previous{
  background:transparent!important;border-color:var(--ag-hair)!important;
  color:var(--ag-graphite)!important}
.ag-form .e-form__buttons__wrapper__button-previous:hover{
  border-color:var(--ag-petrol)!important;color:var(--ag-petrol)!important;
  background:transparent!important}
.ag-form .elementor-button{
  display:inline-flex!important;width:auto!important;align-items:center;
  min-height:50px;padding:0 1.5rem;border-radius:999px!important;
  border:1px solid var(--ag-petrol);background:var(--ag-petrol);
  color:var(--ag-porcelain);font-family:var(--ag-display);font-size:.9rem;
  font-weight:400;letter-spacing:-.005em;
  transition:transform .25s var(--ag-ease),background .25s var(--ag-ease)}
.ag-form .elementor-button:hover{transform:translateY(-2px);background:var(--ag-petrol-2)}
.ag-form .elementor-button .elementor-button-text{color:inherit}

/* Ενοικίαση — multi-step form, step indicator. Verified against the real
   rendered markup (outerHTML dump) — Elementor's own default styling
   here is bright green, unrelated to any token in this file; every rule
   below overrides it. Elementor exposes only two states via CSS
   (--state-active / --state-inactive) — no distinct "completed" class —
   so this can style "current step" clearly but can't visually
   distinguish an already-finished step from one not yet reached. Layout
   (flex/columns) is left alone: it's already working, and touching it
   without knowing whether it's flex, grid, or absolute positioning
   underneath risked breaking something that isn't actually broken. */
.e-form__indicators__indicator__number{
  display:flex!important;align-items:center;justify-content:center;
  width:28px;height:28px;margin:0 0 10px;border-radius:50%;
  border:1px solid var(--ag-hair);background:transparent;
  font-family:var(--ag-display)!important;font-variant-numeric:tabular-nums;
  font-size:.8rem!important;font-weight:400!important;
  color:var(--ag-graphite)!important;transition:all .25s var(--ag-ease)}
.e-form__indicators__indicator__label{
  font-family:var(--ag-display)!important;font-size:.78rem!important;
  font-weight:400!important;letter-spacing:.01em;
  color:var(--ag-graphite)!important;line-height:1.35}
.e-form__indicators__indicator--state-active .e-form__indicators__indicator__number{
  color:var(--ag-porcelain)!important;background:var(--ag-petrol);
  border-color:var(--ag-petrol)}
.e-form__indicators__indicator--state-active .e-form__indicators__indicator__label{
  color:var(--ag-petrol)!important}
.e-form__indicators__indicator__separator{background:var(--ag-hair)!important}

/* Acceptance consent text — in this markup the full consent sentence is
   the field's own field_label (there's no separate inner label the way
   the Επικοινωνία form's did), so it was inheriting the tiny tracked
   uppercase style meant for short field names like "EMAIL" — a whole
   sentence in small-caps reads as shouting and is genuinely hard to
   read, not a style preference. */
.ag-form .elementor-field-type-acceptance .elementor-field-label{
  text-transform:none!important;letter-spacing:normal!important;
  font-family:var(--ag-body)!important;font-size:.92rem!important;
  font-weight:400!important;line-height:1.6;color:var(--ag-petrol);
  margin-bottom:10px}

.ag-form__terms,.ag-form__disclaimer{font-size:.85rem;color:var(--ag-graphite);
  font-weight:300;line-height:1.6;margin:0}
.ag-form__terms a{color:var(--ag-signal-ink);border-bottom:1px solid var(--ag-signal-ink)}
.ag-form__terms a:hover{color:var(--ag-coral-ink);border-bottom-color:var(--ag-coral-ink)}
@media(max-width:640px){
  .ag-form .elementor-field-group.elementor-col-50{width:100%!important}
  .ag-form .elementor-field-type-html{flex-basis:100%;margin-bottom:20px}
}

/* ═══════════════════════════════════════ INNER PAGES — shared kit
   Reused across Συσκευές / Εφαρμογές / Υπηρεσίες / Ενοικίαση / Επικοινωνία.
   Same tokens, same hairline-and-numeral grammar as the homepage — no new
   colour, no new type role — recombined for catalogue content the homepage
   deliberately doesn't carry (design.md §6 anti-repetition rule). */

/* Page hero — the quiet variant. The animated field is the site's one
   signature move and appears exactly twice by design (the two homepage
   canvases); repeating it on every inner page would cheapen it, so this is
   copy only, on porcelain, pulled closer to the plate that follows it. */
.e-con.ag-page-hero{padding-bottom:clamp(48px,6vw,84px)}
.ag-page-hero .ag-d1{max-width:16ch}

/* Page hero — media variant: the homepage hero's scale and composition
   (min-height, big display type, diagonal scrim, copy anchored left) but
   backed by a real photo — set via the container's own Background: Image
   control in Elementor — instead of the canvas field, which stays
   exclusive to the homepage so it doesn't get diluted by a third instance.
   Pair with ag-band--dark on the SAME container: that's what recolours
   ag-d1/ag-lead/ag-label light for free (see the .ag-band--dark rules
   near the top of this file) — a photo needs the darker, petrol-based
   scrim design.md §3.4 specifies for text-on-image, not the porcelain one
   the canvas-only homepage hero uses. */
.e-con.ag-page-hero.ag-page-hero--media{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(86vh,860px);justify-content:center;
  padding-block:clamp(72px,9vw,120px)}
.ag-page-hero--media::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(102deg,var(--ag-petrol) 22%,
    rgba(7,28,34,.86) 42%,rgba(7,28,34,.25) 68%,rgba(7,28,34,.05) 100%)}
.ag-page-hero--media>.ag-wrap{position:relative;z-index:1}
@media(max-width:760px){
  .ag-page-hero--media::before{background:linear-gradient(180deg,
    rgba(7,28,34,.15) 0%,rgba(7,28,34,.55) 55%,rgba(7,28,34,.88) 100%)}
}

/* Page hero — two-up variant: add ag-page-hero--split alongside
   ag-band/ag-page-hero on the SAME outer container when an image sits
   beside the copy (Layout tab already has flex_direction: row on it).
   This one modifier centres + edge-pads the pair as a single 1420px
   block — standing in for .ag-wrap, which a text-only hero still uses as
   a nested child — and lays the two children out as a row. The two
   children then only need a role class each: ag-page-hero__copy on the
   text column, ag-page-hero__fig on the image's own container. Putting
   the row/centring behaviour on the OUTER container (not split across
   the two children) avoids the trap that broke this the first time:
   renaming a container's existing CSS Classes value in the editor only
   updates css_classes — the legacy _css_classes field is left stale —
   and containers render from css_classes alone, so the OLD class quietly
   disappears the moment you type a replacement into that same field. */
.e-con.ag-page-hero.ag-page-hero--split{
  width:min(100%,var(--ag-max));margin-inline:auto;padding-inline:var(--ag-edge);
  align-items:center;flex-wrap:wrap;gap:clamp(32px,5vw,72px)}
.e-con.ag-page-hero__copy{flex:1 1 420px;min-width:0}
.ag-page-hero__copy .ag-d1{max-width:none}
.e-con.ag-page-hero__fig{flex:1 1 400px;min-width:0;
  /*aspect-ratio:4/5;
  border-radius:var(--ag-radius-xl);*/ 
  overflow:hidden}
.ag-page-hero__fig img,
.ag-page-hero__fig .elementor-widget-container{width:100%;height:100%}
.ag-page-hero__fig img{object-fit:cover;display:block}
@media(max-width:760px){
  .e-con.ag-page-hero__fig{aspect-ratio:16/9;order:-1}
}

/* Kit grid — "what's in the system": title, description, a hairline —
   the homepage manifest's grammar (.ag-man), never a card grid. */
.e-con.ag-kit__grid{margin-top:clamp(20px,2.5vw,32px);
  border-block:1px solid var(--ag-hair);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0}
/* modifier for a group of exactly 2 items (Υπηρεσίες "Κατά τη χρήση") —
   keeps the row at 2 real columns instead of leaving an empty 3rd cell in
   the base 3-column grid. Same specificity as the base rule (both 2
   classes) and placed before the 1080/520 breakpoint overrides further
   down, so those still win at narrower widths exactly as they already do
   for the 3-item case. */
.e-con.ag-kit__grid--2{grid-template-columns:repeat(2,1fr)}
.e-con.ag-kit__it{padding:clamp(26px,3vw,34px) clamp(22px,2.4vw,28px)}
.ag-kit__it+.ag-kit__it{border-left:1px solid var(--ag-hair-2)}
.ag-kit__it:nth-child(n+4){border-top:1px solid var(--ag-hair-2)}
.ag-kit__it:nth-child(3n+1){border-left:0}
.ag-kit__dt p{font-family:var(--ag-display);font-size:clamp(1.02rem,1.3vw,1.2rem);
  font-weight:400;letter-spacing:-.02em}
.ag-kit__dd{margin-top:.65rem}
.ag-kit__dd p{color:var(--ag-graphite);font-weight:300;font-size:.96rem}

/* Steps list — a real causal sequence (turn on → wear → transmits → hear),
   so it keeps the homepage rental process's muted tabular marker, not the
   Why section's large coral numeral: that reads "ranked reason", this
   reads "step" — the same distinction greek-copy.md draws on the homepage,
   carried onto an inner page because the order here is equally real. */
.e-con.ag-steps__list{margin-top:clamp(20px,2.5vw,32px);gap:0}
.e-con.ag-steps__it{align-items:baseline;gap:clamp(20px,2.6vw,32px);
  padding-block:clamp(20px,2.4vw,28px);border-top:1px solid var(--ag-hair)}
.ag-steps__it:first-child{border-top:0;padding-top:0}
.ag-steps__n{flex:0 0 auto;width:44px}
.ag-steps__n p{font-family:var(--ag-display);font-variant-numeric:tabular-nums;
  font-size:.8rem;letter-spacing:.06em;color:var(--ag-graphite)}
.ag-steps__copy p{color:var(--ag-petrol);font-weight:300;max-width:62ch}

/* Dark two-up callout — .ag-band--dark verbatim. Two features, not three:
   no numerals at all, so it doesn't borrow the Why section's "ranked
   reasons" meaning for content that isn't ranked. */
.e-con.ag-callout__grid{margin-top:clamp(20px,2.5vw,32px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px)}
.ag-callout__it:nth-child(2){padding-left:clamp(40px,6vw,80px);
  border-left:1px solid var(--ag-hair-inv)}
.ag-callout__it .ag-lead{margin-top:14px}

/* Field variant — add ag-band--field alongside ag-band--dark on the outer
   container when the homepage's dual-transmitter canvas (reused as-is,
   including its ag-dual__fieldslot wrapper) sits behind this callout.
   position:relative/isolate gives that absolutely-positioned canvas layer
   a containing block sized to THIS section rather than some ancestor
   further up the tree; min-height + justify-content:flex-end make the
   section tall and push the copy toward the bottom instead of the
   default top-aligned column flow. */
.ag-band--dark.ag-band--field{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:110vh;justify-content:flex-end}
.ag-band--field .ag-wrap{position:relative;z-index:10}

/* FAQ — label (+ heading, where a page has a sourced one) fixed in a
   narrow left column, accordion list in the wider right column. Answers
   are open by default (.ag-faq__it .ag-faq__a-wrap has no height limit
   without JS) — the collapse/expand and the +/× glyph are BOTH scoped to
   .ag-js, same contract as every other motion feature in this file: if
   the script never runs, every answer just renders open instead of stuck
   shut, so a JS failure can never hide content from a reader or a
   crawler. faqAccordion() in ag-signal.js opens the first item per list
   by default and closes the others, one open at a time. */
.e-con.ag-faq__grid{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);align-items:start}
.e-con.ag-faq__head{position:sticky;top:20px}
/* scoped down from the shared ag-d2/ag-d3 sizes — those are also used for
   full section headings and the callout elsewhere, so the reduction is
   targeted at this context specifically rather than changing the shared
   classes themselves. */
.ag-faq__head .ag-d2 .elementor-heading-title{font-size:clamp(1.22rem,2.16vw,2.07rem)}
.ag-faq__q .ag-d3 .elementor-heading-title{font-size:clamp(.97rem,1.44vw,1.4rem)}
.e-con.ag-faq__list{gap:0}
.e-con.ag-faq__it{border-top:1px solid var(--ag-hair);
  padding-bottom:clamp(24px,2.8vw,34px)}
.ag-faq__it:first-child{border-top:0}
.e-con.ag-faq__q{align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-top:clamp(24px,2.8vw,34px)}
.ag-faq__it:first-child .ag-faq__q{padding-top:0}
.ag-faq__q .ag-d3{max-width:52ch}
.ag-faq__a{margin-top:10px}
.ag-faq__a p{color:var(--ag-graphite);font-weight:300;max-width:62ch}
.ag-js .ag-faq__q{cursor:pointer}
.ag-js .ag-faq__q::after{content:"+";flex:0 0 auto;font-family:var(--ag-display);
  font-weight:300;font-size:1.5rem;line-height:1;color:var(--ag-graphite);
  transition:transform .3s var(--ag-ease)}
.ag-js .ag-faq__it.ag-is-open .ag-faq__q::after{transform:rotate(45deg)}
/* minmax(0,__fr), not a bare __fr: an unconstrained fr track's implicit
   minimum is its content size, not zero, so "grid-template-rows:0fr"
   alone never actually collapses — this is what makes the row shrink
   past its own content instead of just sitting at content height
   regardless of state. */
.ag-js .ag-faq__a-wrap{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;
  transition:grid-template-rows .4s var(--ag-ease)}
.ag-js .ag-faq__it.ag-is-open .ag-faq__a-wrap{grid-template-rows:minmax(0,1fr)}
@media(max-width:1080px){
  .e-con.ag-faq__grid{grid-template-columns:1fr;gap:24px}
  .e-con.ag-faq__head{position:static}
}

/* Applications list (Εφαρμογές) — deliberately unnumbered (these six are
   not a sequence — greek-copy.md names this exact list as the case where
   numbering doesn't apply). Plain 2-column grid, 3 rows, same
   sibling/nth-child responsive technique as .ag-kit__grid elsewhere in
   this file: a hairline divides the two columns, a hairline divides each
   row, both fall away in favour of a single stacked column on mobile.
   Row shape inside each item: label (category) → ag-d3 (headline) → copy
   → an optional context list reusing .ag-cta__need verbatim rather than a
   new tag component for the same short-list-of-terms shape.
   gap:0 with padding doing the spacing (not column-gap/row-gap) is
   deliberate — a non-zero grid gap leaves a hole in the horizontal
   divider exactly where it should cross the vertical one, since each
   item's own border-top stops at its own box edge rather than reaching
   into the gutter. Zero gap means adjacent items' borders sit flush and
   read as one continuous line, the same way .ag-plate__it/.ag-kit__it
   already do it elsewhere in this file. */
.e-con.ag-app__list{margin-top:clamp(20px,2.5vw,32px);
  display:grid;grid-template-columns:1fr 1fr;gap:0}
.e-con.ag-app__it{padding:clamp(28px,3.2vw,40px) clamp(20px,3vw,40px)}
.ag-app__it:nth-child(2n+1){padding-left:0}
.ag-app__it:nth-child(2n){padding-right:0;border-left:1px solid var(--ag-hair-2)}
.ag-app__it:nth-child(n+3){border-top:1px solid var(--ag-hair)}
.ag-app__it:nth-child(-n+2){padding-top:0}
.ag-app__it .ag-label+.ag-d3{margin-top:8px}
.ag-app__it .ag-d3{max-width:52ch}
.ag-app__copy{margin-top:10px}
.ag-app__copy p{color:var(--ag-graphite);font-weight:300;max-width:62ch}
.ag-app__it .ag-cta__need{margin-top:16px}
@media(max-width:760px){
  .e-con.ag-app__list{grid-template-columns:1fr}
  .ag-app__it:nth-child(2n+1),.ag-app__it:nth-child(2n){
    padding-left:0;padding-right:0;border-left:0}
  .ag-app__it:nth-child(n+2){border-top:1px solid var(--ag-hair);
    padding-top:clamp(28px,3.2vw,40px)}
}

/* ════════════════════════════════════════════════════════════════ MOTION
   Every hidden state is scoped to .ag-js, which ag-signal.js adds to <html>
   on its first line. If the script never runs, the page renders complete. */
.ag-js .ag-rise{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ag-ease),transform .8s var(--ag-ease)}
.ag-js .ag-rise.ag-is-in{opacity:1;transform:none}
.ag-js .ag-rise[data-seq]{transition-delay:calc(var(--ag-i,0)*70ms)}

.ag-js .ag-man__row{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ag-ease),transform .7s var(--ag-ease)}
.ag-js .ag-man.ag-is-in .ag-man__row{opacity:1;transform:none;
  transition-delay:calc(var(--ag-r)*90ms)}

.ag-js .ag-proc__rule{transform:scaleX(0);transition:transform .9s var(--ag-ease)}
.ag-js .ag-proc__it::before{transform:scale(0)}
.ag-js .ag-proc__it+.ag-proc__it::before{transform:translateX(-26px) scale(0)}
.ag-js .ag-proc__it>*{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ag-ease),transform .6s var(--ag-ease)}
.ag-js .ag-proc__track.ag-is-in .ag-proc__rule{transform:scaleX(1)}
.ag-js .ag-proc__track.ag-is-in .ag-proc__it::before{transform:scale(1);
  transition:transform .4s var(--ag-ease);transition-delay:calc(var(--ag-s)*160ms + 320ms)}
.ag-js .ag-proc__track.ag-is-in .ag-proc__it+.ag-proc__it::before{transform:translateX(-26px) scale(1)}
.ag-js .ag-proc__track.ag-is-in .ag-proc__it>*{opacity:1;transform:none;
  transition-delay:calc(var(--ag-s)*160ms + 420ms)}

/* ────────────────────────────────────────────────────────────── RESPONSIVE
   Set Elementor → Settings → Breakpoints to tablet 1024 / mobile 767 so the
   editor's preview matches these. */
@media(max-width:1080px){
  .e-con.ag-plate__in{grid-template-columns:repeat(2,1fr)}
  .ag-plate__it:nth-child(3){border-top:1px solid var(--ag-hair-2);border-left:0}
  .e-con.ag-man{grid-template-columns:repeat(3,1fr)}
  .ag-man__row:nth-child(n+4){border-top:1px solid var(--ag-hair-2)}
  .ag-man__row:nth-child(4){border-left:0}
  .e-con.ag-why__grid,.e-con.ag-prep__top,.e-con.ag-cta__grid{grid-template-columns:1fr;gap:40px}
  .e-con.ag-why__head{position:static}
  /* relative, not static: .ag-apps__shot images inside are position:absolute
     and need SOME positioned ancestor to size against. Sticky elements
     provide that; static ones don't. Losing it here made the images fall
     back to the next positioned ancestor up the tree — none — so they sized
     against the viewport instead of the frame: full width, covering the list. */
  .e-con.ag-apps__frame{position:relative;top:5px}
  .e-con.ag-proc__grid{grid-template-columns:repeat(2,1fr)}
  .ag-proc__it:nth-child(n+3){padding-top:48px}
  .ag-proc__it:nth-child(3){padding-left:0;border-left:0}
  /* the rule + dot only make sense as one straight line across a single
     row — once steps wrap onto a second row their dots have nothing real
     to align to and just float. The step numbers already carry the
     sequence, so below this width the graphic simply steps aside. */
  .ag-proc__ruleslot{display:none}
  .ag-proc__it::before{display:none}
  .e-con.ag-kit__grid{grid-template-columns:repeat(2,1fr)}
  .ag-kit__it:nth-child(2n){border-left:1px solid var(--ag-hair-2)}
  .ag-kit__it:nth-child(2n+1){border-left:0}
  .ag-kit__it:nth-child(n+3){border-top:1px solid var(--ag-hair-2)}
  .e-con.ag-callout__grid{grid-template-columns:1fr;gap:40px}
  .ag-callout__it:nth-child(2){padding-left:0;padding-top:40px;
    border-left:0;border-top:1px solid var(--ag-hair-inv)}
}
@media(max-width:860px){
  :root{--ag-graphite:#4A585E}
  .ag-lead p{font-weight:400}
  .ag-label p,.ag-hero__cap{font-size:.75rem}
  .e-con.ag-apps__grid{grid-template-columns:1fr}
  .e-con.ag-apps__frame{display:none}
  .e-con.ag-apps__row{display:grid;grid-template-columns:72px 1fr;gap:18px;
    align-items:center;padding-left:0}
  .ag-apps__row::before,.ag-apps__row::after{display:none}
  .ag-apps__row .ag-apps__title p{color:var(--ag-petrol)}
  .ag-apps__meta{display:none}
  .ag-apps__thumb{display:block}
  .ag-apps__thumb img{width:72px;height:88px;object-fit:cover}
  .ag-why__copy p{color:#41504F}
  .ag-hero__capslot{display:none}
  .ag-hero::after{background:linear-gradient(180deg,rgba(234,238,239,0) 3%,
    rgba(234,238,239,.45) 18%,rgba(234,238,239,.45) 82%,rgba(234,238,239,0) 98%)}
  .ag-dual::after{background:linear-gradient(180deg,rgba(7,28,34,0) 2%,
    rgba(7,28,34,.45) 15%,rgba(7,28,34,.45) 85%,rgba(7,28,34,0) 98%)}
}
@media(max-width:520px){
  .e-con.ag-man{grid-template-columns:repeat(2,1fr)}
  .ag-man__row:nth-child(3){border-top:1px solid var(--ag-hair-2)}
  .ag-man__row:nth-child(3),
  .ag-man__row:nth-child(5){border-left:0}
  .ag-man__row:nth-child(5){grid-column:1/-1}
  .e-con.ag-proc__grid{grid-template-columns:1fr}
  .e-con.ag-proc__it{padding:28px 0 0;border-left:0}
  .e-con.ag-kit__grid{grid-template-columns:1fr}
  .ag-kit__it+.ag-kit__it{border-left:0}
  .ag-kit__it:nth-child(n+2){border-top:1px solid var(--ag-hair-2)}
}
@media(prefers-reduced-motion:reduce){
  .ag-js .ag-rise{opacity:1;transform:none}
  .ag-js .ag-man__row{opacity:1;transform:none}
  .ag-js .ag-proc__rule{transform:scaleX(1)}
  .ag-js .ag-proc__it::before{transform:scale(1)}
  .ag-js .ag-proc__it+.ag-proc__it::before{transform:translateX(-26px) scale(1)}
  .ag-js .ag-proc__it>*{opacity:1;transform:none}
  .ag-dual__legend span{opacity:1;transform:none;color:rgba(234,238,239,.78)}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════ HEADER (Theme Builder template) */
.e-con.ag-nav{position:sticky;top:0;z-index:60;padding-top:24px;
  background:rgba(234,238,239,.78);backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ag-ease),background .3s var(--ag-ease)}
.ag-nav.ag-is-stuck{border-bottom-color:var(--ag-hair-2);background:rgba(234,238,239,.94)}
.e-con.ag-nav__in{flex-direction:row;align-items:center;gap:2rem;min-height:68px;flex-wrap:nowrap}
.ag-nav__brand{flex:0 0 auto}
.ag-nav__brand img{width:154px;height:auto}
.ag-nav__links{margin-left:auto;flex:0 1 auto}
.ag-nav__links .elementor-nav-menu{gap:1.85rem}
.ag-nav__links .elementor-item{padding:0;font-family:var(--ag-display);font-size:.85rem;
  font-weight:400;color:var(--ag-graphite);transition:color .2s;fill:currentColor}
.ag-nav__links .elementor-item:hover,
.ag-nav__links .elementor-item.elementor-item-active{color:var(--ag-petrol);background:none}
.ag-nav__links .elementor-item::before,.ag-nav__links .elementor-item::after{display:none}
.ag-nav__links .elementor-menu-toggle{background:none;color:var(--ag-petrol);
  border:1px solid var(--ag-hair);border-radius:999px;width:44px;height:44px}
/* the open/close icon swap is driven off aria-expanded ourselves — the
   panel can close via the overlay or Escape as well as this button, and
   Elementor's own icon-swap only ever hears about clicks on the button
   itself, so it was left showing the close (X) icon after those. */
/* !important because Elementor's own toggle handler is still attached and
   swaps these icons by setting inline style="display:..." on every click —
   that beats any class-based rule outright, regardless of specificity, so
   there's no way to win here without it */
.ag-nav__links .elementor-menu-toggle__icon--open{display:block!important}
.ag-nav__links .elementor-menu-toggle__icon--close{display:none!important}
.ag-nav__links .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open{display:none!important}
.ag-nav__links .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close{display:block!important}
/* the toggle now opens the custom OffCanvasMenu widget instead — keep
   Elementor's own built-in dropdown panel from ever appearing */
.ag-nav__links .elementor-nav-menu--dropdown{display:none!important}

/* OffCanvasMenu: ag-signal.js drives aria-hidden directly, so the actual
   slide/fade lives here rather than in Elementor's own animation-class
   system — self-contained, doesn't depend on anything internal.
   --e-off-canvas-justify-content defaults to flex-start (docks left);
   our own transform slides in from the right, so without this override the
   panel animated in from the right edge but came to rest docked left. */
.e-off-canvas[aria-label="OffCanvasMenu"] .e-off-canvas__main{
  justify-content:flex-end}
.e-off-canvas[aria-label="OffCanvasMenu"] .e-off-canvas__content{
  transition:transform .4s var(--ag-ease)}
.e-off-canvas[aria-label="OffCanvasMenu"][aria-hidden="true"] .e-off-canvas__content{
  transform:translateX(100%)}
.e-off-canvas[aria-label="OffCanvasMenu"] .e-off-canvas__overlay{
  background-color:rgba(7,28,34,.08);
  transition:opacity .4s var(--ag-ease);opacity:1}
.e-off-canvas[aria-label="OffCanvasMenu"][aria-hidden="true"] .e-off-canvas__overlay{
  opacity:0}
/* Elementor's own [aria-hidden=true] rule sets opacity:0/visibility:hidden
   on the OUTER wrapper with no transition at all, so it vanishes instantly
   the moment we set the attribute — before the content/overlay above ever
   get to play their .4s exit. Overriding it to only actually hide itself
   .4s later gives them that time; the outer wrapper stays visible+opaque
   throughout, the visible motion is entirely the two rules above. */
.e-off-canvas[aria-label="OffCanvasMenu"]{
  opacity:1;visibility:visible;transition:opacity 0s,visibility 0s}
.e-off-canvas[aria-label="OffCanvasMenu"][aria-hidden="true"]{
  opacity:0;visibility:hidden;transition:opacity 0s .4s,visibility 0s .4s}
@media(prefers-reduced-motion:reduce){
  .e-off-canvas[aria-label="OffCanvasMenu"] .e-off-canvas__content,
  .e-off-canvas[aria-label="OffCanvasMenu"] .e-off-canvas__overlay{transition:none}
}
.ag-nav__cta{flex:0 0 auto}

/* ═══════════════════════════════════════ FOOTER (Theme Builder template) */
.e-con.ag-foot{background:var(--ag-petrol);color:rgba(234,238,239,.72);
  padding-block:clamp(56px,6vw,84px) 32px}
.e-con.ag-foot__grid{display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:2.5rem}
/* the widget is the real audioguide.svg image now, not a text mark — it
   carries no intrinsic CSS size, so unconstrained it renders at its native
   5848x1513px file dimensions. filter forces it clean white: the logo is
   drawn for a light ground and there's no dark-ground variant yet
   (CLAUDE.md, Open before launch). Swap the filter for a proper light
   variant SVG once that exists. */
.ag-foot__markslot img{width:220px;height:auto;
  filter:brightness(0) invert(1);opacity:.95}
.ag-foot__note{margin-top:14px}
.ag-foot__note p{max-width:34ch;font-size:.95rem;font-weight:300;color:rgba(234,238,239,.58)}
.ag-foot__col{padding-bottom:0;margin-bottom:0}
.ag-foot__h p{font-family:var(--ag-display);font-size:.625rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(234,238,239,.5);margin-bottom:16px}
.ag-foot__h:not(:first-child){margin-top:1.5rem}
/* styled from the slot wrapper down with element selectors, not one
   widget's own class — a WP Nav Menu widget and Elementor's Icon List
   widget have both sat here, with different markup. .ag-foot__iconlist is
   the icon-list widget's own class (Elementor writes it directly on the
   widget, no wrapper to hook), so it's listed alongside the slot class
   everywhere the base list/link treatment applies. */
.ag-foot__listslot ul,.ag-foot__listslot nav,
.ag-foot__iconlist ul{list-style:none;margin:0;padding:0}
.ag-foot__listslot li+li,.ag-foot__iconlist li+li{margin-top:.55rem}
/* set on the <a> AND its text span/menu-item directly — don't rely on
   inherit alone reaching the leaf node past whatever the widget's own
   markup puts in between */
.ag-foot__listslot a,.ag-foot__iconlist a,
.ag-foot__listslot .menu-item a,.ag-foot__iconlist .elementor-icon-list-text{
  display:inline-flex;align-items:center;gap:.5em;color:inherit;text-decoration:none;
  font-family:var(--ag-body);font-size:.97rem;line-height:1.4;font-weight:300;
  transition:color .2s}
.ag-foot__listslot a:hover{color:var(--ag-ember)}
.ag-foot__iconlist .elementor-icon-list-icon{color:var(--ag-signal);flex:0 0 auto;display:inline-flex}
/* the icon svgs ship with no fill attribute, so they render at the SVG
   spec default (black) until something sets fill explicitly — color alone
   on an ancestor does nothing without this */
.ag-foot__iconlist .elementor-icon-list-icon svg{fill:currentColor;width:14px;height:14px}
.ag-foot__iconlist a:hover{color:var(--ag-ember)}
.ag-foot__iconlist a:hover .elementor-icon-list-icon{color:var(--ag-ember)}
.ag-foot__bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  margin-top:clamp(24px,2.5vw,36px);padding-top:22px;border-top:1px solid var(--ag-hair-inv);
  font-size:.8rem;font-weight:300;color:rgba(234,238,239,.5)}
.ag-foot__botslot{margin-top:0}

@media(max-width:860px){
  .ag-nav__links{margin-left:auto}
  .ag-nav__cta{display:none}
  /* brand full width on its own row, the four columns as a clean 2x2 */
  .e-con.ag-foot__grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .ag-foot__grid>:first-child{grid-column:1/-1}
  .ag-foot__listslot li+li,.ag-foot__iconlist li+li{margin-top:.4rem}
}


.ag-band--dark.ag-steps__list { padding: 40px; border-radius: 18px;  }
.ag-band--dark .ag-steps__it .ag-steps__copy p { color: #fff; }
.ag-band--dark .ag-steps__n p { font-weight: 800; color: #fff;  }


.e-form__indicators { margin-bottom:40px;}
.e-form__indicators__indicator { min-width: 200px;}

.e-form__indicators__indicator__label { text-transform: uppercase; }
body.page-id-156 .e-con.ag-page-hero { padding-bottom: 0px; }
body.page-id-271 .e-con.ag-page-hero { padding-bottom: 0px; }