/* =========================================================================
   SERVICE PAGES
   Loaded after site.css, which owns every token, the reset, the header, the
   footer and the reveal system. Nothing here re-declares a colour or a step —
   if a value is not a var(), it is a layout number and nothing else.

   Sequence is the client's own, taken from the live deified.gr service pages:
     I    title + one line
     II   pull-quote beside the argument, then the pricing link
     III  the brief

   What is NOT here: pins, sticky stages, horizontal tracks. These pages are
   a plain scroll by decision — the homepage owns the choreography, and a
   service page a visitor arrived at from a search result should hand over its
   content without making them perform for it.
   ====================================================================== */

/* The field is a fixed backdrop for the whole document rather than a child of
   any one section: these pages have no pinned stage to anchor it to, and a
   canvas inside a normal-flow section would scroll away with it. */
.svc-field{
  position:fixed;
  inset:0;
  /* A canvas is a REPLACED element: with width:auto it resolves to its
     intrinsic 300x150 and the right/bottom offsets are then discarded as
     over-constrained, so inset:0 alone leaves a 600x300 box in the corner.
     The size has to be stated. */
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  transition:opacity .7s var(--ease);
}
/* Set by service.js while the brief owns the screen. */
.svc-field.quiet{opacity:.32}
@media (prefers-reduced-motion:reduce){ .svc-field{transition:none} }
.svc-body > header,
.svc-body > main,
.svc-body > .wrap{position:relative;z-index:1}

/* --- Progress rail ------------------------------------------------------
   The client's own device, kept. Hidden below the two-column breakpoint,
   where it would sit on top of the text rather than beside it. */
.rail{
  position:fixed;
  inset-inline-end:clamp(1rem,2.4vw,2.2rem);
  inset-block-start:50%;
  transform:translateY(-50%);
  z-index:40;
  display:none;
  flex-direction:column;
  gap:1.1rem;
}
@media (min-width:1000px){ .rail{display:flex} }

.rail__i{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem;
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.12em;
  color:var(--ash);
  opacity:.45;
  transition:opacity .45s var(--ease),color .45s var(--ease);
}
.rail__i::after{
  content:"";
  display:block;
  width:22px;
  height:1px;
  background:currentColor;
  transition:width .45s var(--ease);
}
.rail__i.on{opacity:1;color:var(--bone)}
.rail__i.on::after{width:44px}

/* --- I · title ---------------------------------------------------------- */

.svc-hero{
  min-height:88svh;
  display:grid;
  align-content:center;
  padding-block:9rem 4rem;
}

/* Two words at display size collide on a narrow column ("Social Media
   Marketing", "Strategy & Consulting"), so the service title gets its own
   step: it must survive three words in Greek without hyphenating. */
.svc-hero h1{
  margin-block-start:1.6rem;
  font-size:clamp(2.6rem,7.4vw,5.6rem);
  letter-spacing:-.045em;
}

/* The tag is a label, not part of the word — it must not inherit the
   display step or it reads as a fourth word in the title. */
.svc-hero h1 .hot{
  display:inline-block;
  vertical-align:middle;
  margin-inline-start:.7em;
  padding:.35em .6em;
  border:1px solid var(--hair-strong);
  border-radius:var(--radius-pill);
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.14em;
  color:var(--bone);
}

.svc-hero__rule{
  width:min(300px,42%);
  height:1px;
  margin-block-start:2.6rem;
  background:var(--hair);
}

.svc-hero .sub{
  margin-block-start:2.2rem;
  max-width:34rem;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-weight:var(--w-light);
  color:var(--mist);
}

/* --- II · the argument -------------------------------------------------- */

.svc-arg{padding-block:clamp(3rem,8vw,6rem)}

.svc-arg__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  margin-block-start:3rem;
}
@media (min-width:900px){
  .svc-arg__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}

/* Serif-weight italic at a large step is the one place on this site where a
   sentence is set as an object rather than as running text. It is the
   client's own device on their service pages and it earns its size: it is
   always one sentence, and it is always the argument in miniature. */
.svc-arg__q{
  margin:0;
  padding-inline-start:clamp(1rem,2.4vw,1.8rem);
  border-inline-start:1px solid var(--hair-strong);
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  font-weight:var(--w-light);
  font-style:italic;
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--bone);
}

.svc-arg__body p{
  margin:0;
  max-width:38rem;
  color:var(--mist);
}
.svc-arg__body p + p{margin-block-start:1.4rem}

/* --- The pricing link ---------------------------------------------------
   This replaces the client's "Τι περιλαμβάνει" list. The list restated the
   PDF's own contents one level shallower, so the page said the same thing
   twice and the second telling was the incomplete one. */
.svc-more{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-block-start:clamp(2.5rem,6vw,4rem);
}
.svc-more .pill{display:inline-flex;align-items:center;gap:.6rem}
.svc-more .pill i{font-style:normal}

/* --- III · the brief ---------------------------------------------------- */

.brief{padding-block:clamp(3rem,8vw,6rem) clamp(4rem,10vw,7.5rem)}
.brief__form{margin-block-start:3rem;max-width:44rem}

.pick{border:0;margin:0 0 2.6rem;padding:0}
.pick legend{
  padding:0;
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--bone);
}
.pick__hint{
  margin:.6rem 0 1.4rem;
  font-size:var(--step-caption);
  color:var(--ash);
}
.pick__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.15rem;
}
@media (min-width:700px){ .pick__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem} }

.pick__i{
  position:relative;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding-block:.7rem;
  border-block-end:1px solid var(--hair);
  cursor:pointer;
  color:var(--mist);
  transition:color .3s var(--ease);
}
.pick__i:hover{color:var(--bone)}

/* The native control is moved out of sight but NOT display:none — it stays
   focusable, and the visible box below mirrors its state. */
.pick__i input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  margin:0;
}
.pick__box{
  flex:none;
  width:15px;height:15px;
  border:1px solid var(--hair-strong);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.pick__i input:checked ~ .pick__box{background:var(--bone);border-color:var(--bone)}
.pick__i input:focus-visible ~ .pick__box{outline:2px solid var(--bone);outline-offset:3px}
.pick__t{font-size:.95rem}

.field{margin-block-end:1.8rem}
.field label{
  display:block;
  margin-block-end:.55rem;
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash);
}
.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-block-end:1px solid var(--hair-strong);
  border-radius:0;
  padding:.7rem 0;
  color:var(--bone);
  font-family:inherit;
  font-size:var(--step-body);
  font-weight:var(--w-light);
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:7rem;resize:vertical;line-height:1.5}
.field input::placeholder,
.field textarea::placeholder{color:var(--ash);opacity:.7}
.field input:focus,
.field textarea:focus{outline:0;border-block-end-color:var(--bone)}

/* Validation state is carried by weight and a message, not by hue — the site
   has exactly one colour exception and it is the triangle's refusal. */
.field input.is-bad,
.field textarea.is-bad{border-block-end-color:var(--bone);border-block-end-width:2px}
.field__err{
  display:block;
  min-height:1.1rem;
  margin-block-start:.4rem;
  font-size:var(--step-caption);
  color:var(--ash);
}

.form__status{
  margin-block-start:1.4rem;
  min-height:1.4rem;
  font-size:var(--step-caption);
  color:var(--mist);
}
.form__status[data-state="ok"]{color:var(--bone)}
.form__note{
  margin-block-start:.4rem;
  font-size:var(--step-caption);
  color:var(--ash);
}

.brief .pill[disabled]{opacity:.5;cursor:default;transform:none}

/* --- Client portal ------------------------------------------------------
   Shares this sheet because it shares the furniture: the fixed dust field,
   the .field inputs, the hairline underlines. It has no acts and no rail. */

.portal{
  min-height:82svh;
  display:grid;
  align-content:center;
  padding-block:9rem clamp(4rem,10vw,7.5rem);
  max-width:52rem;
}
.portal h1{margin-block-start:1.6rem;font-size:clamp(2.1rem,5.4vw,3.6rem)}
.portal__sub{margin-block-start:1.8rem;max-width:34rem}

.portal__soon{
  justify-self:start;
  margin-block-start:2rem;
  padding:.45em .9em;
  border:1px solid var(--hair-strong);
  border-radius:var(--radius-pill);
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ash);
}

.portal__form{margin-block-start:3rem;max-width:26rem}
.portal__form fieldset{border:0;margin:0;padding:0}
.portal__why{
  margin:0 0 2rem;
  font-size:var(--step-caption);
  color:var(--ash);
  max-width:30rem;
}

/* The whole form is disabled, and it has to LOOK disabled. A login that
   reads as operational on a page with no backend is worse than no login:
   somebody types a real password into a field that goes nowhere. */
.portal__form fieldset[disabled]{opacity:.42}
.portal__form fieldset[disabled] .pill{cursor:not-allowed}
.portal__form fieldset[disabled] input{cursor:not-allowed}

.portal .mail{font-size:clamp(1.1rem,2.4vw,1.5rem);margin-block-start:2.4rem;justify-self:start}
.portal__back{margin-block-start:2.6rem}

/* Visually hidden, still announced. */
.vh{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* --- Foot nav between services ------------------------------------------ */

.svc-next{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:2.4rem;
  border-block-start:1px solid var(--hair);
}
.svc-next a{
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash);
  transition:color .3s var(--ease);
}
.svc-next a:hover,.svc-next a:focus-visible{color:var(--bone)}

@media (prefers-reduced-motion:reduce){
  .rail__i,.rail__i::after,.pick__i,.pick__box,
  .field input,.field textarea{transition:none}
}