/* ==========================================================================
   v2: «Swiss workshop»
   Loaded after style.css. It changes the design language and nothing about
   what the page does:

   - Surfaces: neutral workshop paper (not cream), with the charcoal panels
     kept for the dark chapters.
   - One accent: the red of the centaur emblem. Gold is retired. Burgundy stays
     the colour of the primary action.
   - Geometry: square corners and flat surfaces. No offset shadows. Structure
     comes from ruled lines, the way a spec sheet or a sample-book page is
     ruled.
   - Buttons are solid blocks that sink when pressed, not neobrutalist stickers.

   Design read: local trades lead-gen for Athens homeowners and building
   managers, in a Swiss Industrial Print language (industrial-brutalist-ui,
   light mode), with the brand's red as the single hazard accent.
   Dials 6 / 6 / 4.
   ========================================================================== */

:root {
  --bone:   #EEEDE8;          /* workshop paper, neutral, not the cream default */
  --bone-2: #E2E0D9;
  --bone-3: #8F8B82;          /* muted text on charcoal: 5.35:1 */
  --marble: #F8F7F4;
  --ink-3:  #5E5A52;          /* muted text on paper: 5.85:1 */

  /* the emblem's red replaces brass everywhere brass was used */
  --brass:      #E8514A;      /* on charcoal 4.94:1 */
  --brass-lite: #EC5F57;      /* on charcoal 5.48:1 */
  --brass-deep: #B3221C;      /* on paper 5.66:1 */
  --line-brass: color-mix(in srgb, #E8514A 45%, transparent);

  --edge-radius: 0px;
  --edge-x: 0px;
  --edge-y: 0px;

  --line:      color-mix(in srgb, var(--ink) 18%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 10%, transparent);
  --rule: 2px solid currentColor;
}

html { overscroll-behavior-y: none; }
::selection { background: var(--wine); color: var(--marble); }

/* --------------------------------------------------------- buttons */
/* Solid block, square, no offset. Hover darkens the fill and slides the arrow;
   press sinks it by a pixel. The on-dark variant is a ruled outline that fills. */
.btn {
  border: 0; border-radius: 0; box-shadow: none;
  padding: 1.05rem 1.6rem;
  letter-spacing: .02em;
  transition: background .35s var(--ease), color .35s var(--ease), transform .12s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: none; box-shadow: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { --btn-bg: var(--wine); --btn-fg: var(--marble); }
.btn--primary:hover, .btn--primary:focus-visible { --btn-bg: var(--ink); }
.section--ink .btn--primary:hover, .hero .btn--primary:hover,
.quote .btn--primary:hover, .repair .btn--primary:hover { --btn-bg: var(--brass-deep); }
.btn--on-dark {
  --btn-bg: transparent; --btn-fg: var(--bone);
  box-shadow: inset 0 0 0 1.5px var(--bone);
}
.btn--on-dark:hover, .btn--on-dark:focus-visible {
  --btn-bg: var(--bone); --btn-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--bone);
}
.btn svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--brass-lite); outline-offset: 3px; }

/* header controls: ruled, square, no offset */
.header-phone, .is-stuck .header-phone {
  border-width: 1.5px; box-shadow: none;
}
.header-phone:hover, .header-phone:focus-visible { transform: none; box-shadow: none; }
@media (max-width: 1240px) {
  .nav-toggle { border-width: 1.5px; box-shadow: none; }
  .nav-toggle:hover, .nav-toggle:focus-visible, .nav-open .nav-toggle { transform: none; box-shadow: none; background: var(--ink); color: var(--bone); }
}
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--brass-lite); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }

/* --------------------------------------------------------- section heads */
/* Every chapter opens on a full-width rule, like a new page of the spec book.
   The short gradient underline under the title is gone. */
.section__head {
  max-width: none;
  border-top: var(--rule);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
}
.section__head > * { max-width: 62ch; }
.section__head .section__title::after { display: none; }
.section__title { letter-spacing: -.012em; }
.eyebrow::before { height: 2px; width: 1.4rem; }
.eyebrow { color: var(--wine); }
.eyebrow--light { color: var(--brass-lite); }

/* --------------------------------------------------------- trust strip */
.trust__grid { border-top: 1px solid rgba(238,237,232,.14); }
.trust__item { border-left: 1px solid rgba(238,237,232,.14); }
.trust__item:first-child { border-left: 0; }
.trust__k { color: var(--brass-lite); }

/* --------------------------------------------------------- the catalogue */
.catalog { display: grid; gap: 0; }
.catalog__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.catalog__item { border-bottom: 1px solid var(--line); }
.catalog__row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(.9rem, 1.6vw, 1.15rem) 0; min-height: 56px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem); line-height: .95; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  transition: color .35s var(--ease), padding .5s var(--ease);
  position: relative;
}
.catalog__row::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: .5rem;
  background: var(--brass-deep); transform: translateY(-50%) scale(0);
  transition: transform .45s var(--ease);
}
.catalog__row:hover, .catalog__row:focus-visible { color: var(--ink); }
.catalog__item.is-on .catalog__row { color: var(--ink); padding-left: 1.1rem; }
.catalog__item.is-on .catalog__row::before { transform: translateY(-50%) scale(1); }
.catalog__row:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* plus → minus on phones; hidden on desktop where the stage shows the choice */
.catalog__mark { position: relative; width: 18px; height: 18px; flex: none; }
.catalog__mark::before, .catalog__mark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: currentColor; transition: transform .4s var(--ease);
}
.catalog__mark::after { transform: rotate(90deg); }
.catalog__item.is-on .catalog__mark::after { transform: rotate(0deg); }

.catalog__detail { display: none; padding: 0 0 1.6rem; }
.catalog__item.is-on .catalog__detail { display: grid; gap: 1rem; }
.catalog__item.is-on .catalog__detail .catalog__media { animation: catWipe .8s var(--ease) both; }
.catalog__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone-2); }
.catalog__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog__text { margin: 0; color: var(--ink-3); max-width: 52ch; font-size: var(--step-0); line-height: 1.6; }
.catalog__cta { justify-self: start; }
.catalog__stage { display: none; }

@keyframes catWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes catZoom { from { transform: scale(1.08); } to { transform: none; } }

@media (min-width: 900px) {
  .catalog {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
  }
  .catalog__mark { display: none; }
  .catalog__item.is-on .catalog__detail { display: none; }
  .catalog__stage { display: block; position: sticky; top: 104px; }
  .catalog__stage .catalog__media { aspect-ratio: 5 / 4; }
  .catalog__stage .catalog__media.is-wipe { animation: catWipe .75s var(--ease) both; }
  .catalog__stage .catalog__media.is-wipe img { animation: catZoom 1.1s var(--ease) both; }
  .catalog__stagebody {
    display: grid; gap: .9rem; padding-top: 1.25rem; margin-top: 1.25rem;
    border-top: 2px solid var(--ink);
  }
  .catalog__stagetitle { font-size: var(--step-3); }
}

/* --------------------------------------------------------- coverage */
.reach__rlabel span { border-radius: 0; }
.reach__all { border-width: 1.5px; box-shadow: none; }
.reach__all:hover, .reach__all:focus-visible,
.reach__all[aria-pressed="true"] { transform: none; box-shadow: none; }

/* --------------------------------------------------------- media frames */
/* Photographs sit square in ruled frames: no rounded corners, no drop shadow. */
.erga img, .gallery img, .sun, .pania__shot, .pania__big { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .catalog__media, .catalog__media img, .catalog__detail .catalog__media { animation: none !important; }
  .catalog__row, .catalog__row::before { transition: none; }
}

/* --------------------------------------------------------- round 2 (critic fixes) */
/* Frames sit flat on the page: no soft drop shadows anywhere, a hairline instead. */
.works__reel, .slideshow, .sun__stage, .repair__card, .wizard, .contact__map {
  border-radius: 0; box-shadow: inset 0 0 0 1px var(--line);
}
.section--ink .sun__stage, .quote .wizard, .repair .repair__card, .section--ink .contact__map {
  box-shadow: inset 0 0 0 1px rgba(238,237,232,.16);
}
/* No labels printed over photographs (design-taste-frontend 9.F). */
.works__tag { display: none; }

/* Region chips: square, ruled, no offset. */
.reach__region { border-radius: 0; box-shadow: none; border-width: 1px; }
.reach__region:hover, .reach__region:focus-visible,
.reach__region[aria-pressed="true"] { transform: none; box-shadow: none; }

/* The repair list used an em-dash as its bullet: a short red bar now. */
.repair__list li::before { content: ""; width: .9rem; height: 2px; margin-top: .72em; background: var(--brass-lite); }

/* Phone: the headline holds two lines instead of orphaning «σου,». */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.2rem, 10.6vw, 2.6rem); max-width: none; }
}

/* powered by stathisparas: discreet signature, bottom right of the footer */
a.sp-sig.sp-sig{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:.5em;margin:0 0 0 auto!important;padding:0!important;color:inherit;opacity:.55;text-decoration:none!important;font-size:11px!important;letter-spacing:.04em;line-height:1!important;font-weight:400;white-space:nowrap;background:none!important;border:0!important;transition:opacity .25s ease}
a.sp-sig.sp-sig:hover,a.sp-sig.sp-sig:focus-visible{opacity:1}
.sp-sig .sp-sig__by,.sp-sig .sp-sig__url{text-transform:none;white-space:nowrap}
.sp-sig svg{height:20px!important;width:auto!important;max-width:none!important;display:block;flex:none;transform-origin:left center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.sp-sig:hover svg{transform:rotate(-3deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){.sp-sig svg{transition:none}a.sp-sig:hover svg{transform:none}}
.site-footer__inner .sp-sig.sp-sig{flex-basis:100%;justify-content:flex-end}
@media (max-width:600px){a.sp-sig.sp-sig{justify-content:flex-start!important;margin-left:0!important;flex-basis:100%}}