/* ==========================================================================
   Spicemedia, disainisüsteem
   Soe kreem, süvasinine tekst, kollane aktsent, seriifkiri.
   ========================================================================== */

:root {
  /* Värvid */
  --cream:      #F6F2E7;   /* lehe põhitaust */
  --cream-lift: #FBF8F1;   /* heledam vöönd */
  --ink:        #16324E;   /* pealkirjad, põhitekst */
  --ink-deep:   #12283E;   /* jalus, logo */
  --body:       #38536C;   /* lõiguteksti toon */
  --muted:      #566A7E;   /* AA väikesele tekstile kreemil, 4.99:1 */
  --line:       #D9D2C1;
  --line-soft:  #E7E1D2;
  --yellow:     #F4D25A;   /* nuppude ring */
  --yellow-hi:  #FFE182;
  --orange:     #FF8F4A;   /* logo säde */

  /* Kiri */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --font-micro:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mõõdud */
  --pad:  clamp(1.25rem, 5vw, 3.5rem);
  --sect: clamp(4rem, 9vw, 7.5rem);
  --max:  1320px;

  color-scheme: light;
}

/* ---------- lähtestus ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.18rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

::selection { background: var(--yellow); color: var(--ink-deep); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-deep); color: var(--cream);
  padding: .7rem 1.2rem; font-family: var(--font-micro); font-size: .85rem;
}
.skip:focus { left: 0; }

/* ---------- korduvad osad ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  font-family: var(--font-micro);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.h1 { font-size: clamp(2.6rem, 5.2vw, 4.3rem); }
.h2 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.15; }

h1 em, h2 em, .em { font-style: italic; }

.lead {
  font-size: clamp(1.12rem, 1.55vw, 1.32rem);
  line-height: 1.55;
  color: var(--body);
  max-width: 46ch;
}

.section { padding-block: var(--sect); }
.section--lift { background: var(--cream-lift); }

.sect-head { max-width: min(46rem, 100%); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sect-head .lead { margin-top: 1.35rem; }

/* ---------- kollane ringnupp ---------- */
.dot-cta {
  display: inline-flex; align-items: center; gap: 1.15rem;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-micro);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
}
.dot-cta__dot {
  flex: none;
  width: 4.2rem; height: 4.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  transition: transform .25s ease, background-color .25s ease;
}
.dot-cta__dot svg { width: 1.5rem; height: 1.5rem; stroke: var(--ink-deep); }
.dot-cta__label {
  padding-bottom: .28rem;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s ease;
}
.dot-cta:hover .dot-cta__dot { transform: translateX(4px); background: var(--yellow-hi); }
.dot-cta:hover .dot-cta__label { border-color: var(--ink); }
.dot-cta--sm .dot-cta__dot { width: 3.2rem; height: 3.2rem; }
.dot-cta--sm .dot-cta__dot svg { width: 1.15rem; height: 1.15rem; }


/* ---------- päis ---------- */
.hdr {
  position: absolute; inset: 0 0 auto; z-index: 40;
  padding-block: clamp(1.35rem, 2.6vw, 2.2rem);
}
.hdr--solid { position: sticky; top: 0; background: var(--cream); border-bottom: 1px solid var(--line-soft); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand img { height: clamp(1.5rem, 2.6vw, 1.95rem); width: auto; }

.hdr__nav[hidden] { display: none; }
.hdr__nav { display: flex; align-items: center; gap: clamp(1.4rem, 3.2vw, 2.9rem); }
.hdr__nav a {
  text-decoration: none; color: var(--ink);
  font-family: var(--font-micro); font-size: .72rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  padding-bottom: .2rem; border-bottom: 1px solid transparent;
}
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { border-color: var(--ink); }
/* Kontakti menüüpunkti ei ole: laual viib kontakti kollane nupp, telefonis
   hero "Kirjuta meile", teenuste "Võta ühendust" ja jaluse link. */

.pill {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .6rem 1.1rem .6rem 1.2rem;
  border-radius: 999px;
  background: var(--yellow); color: var(--ink-deep);
  text-decoration: none;
  font-family: var(--font-micro);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease;
}
.pill svg { width: 1.2rem; height: .6rem; stroke: currentColor; transition: transform .25s ease; }
.pill:hover { background: var(--yellow-hi); }
.pill:hover svg { transform: translateX(4px); }
.hdr__cta { flex: none; }

.burger {
  display: none; width: 2.6rem; height: 2.6rem; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer;
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  position: absolute; left: 50%; width: 1.05rem; height: 1.5px;
  background: var(--ink); transform: translateX(-50%); content: "";
}
.burger span { top: 50%; margin-top: -.75px; }
.burger span::before { top: -5px; left: 0; transform: none; }
.burger span::after  { top:  5px; left: 0; transform: none; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; order: 3; }
  .hdr__cta { display: none; }
  .hdr__nav {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 1.1rem; padding-top: 1.6rem; margin-top: 1.3rem;
    border-top: 1px solid var(--line);
  }
  .hdr__in { flex-wrap: wrap; }
  .hdr { background: var(--cream); position: sticky; top: 0; }
  .hdr--overlay { position: sticky; }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; }
/* Kitsas ekraan: foto on sees, aga mitte cover'iga. 4:3 fotost jääks portree-
   kujulise hero puhul alles kitsas keskriba. Selle asemel on taust kahekordses
   suuruses ja ankurdatud vasakusse ülanurka: nähtavale jääb hele sein, mille
   peal tekst on loetav, ja diivan tuleb sisse all paremal.
   Gradient jääb foto alla varuplaaniks. */
.hero { min-height: 0; }
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(110% 95% at 70% 14%, #EBCB9C 0%, #D3AC7B 32%, #A8804F 64%, #4E3A24 100%);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/hero.jpg");
  background-size: 200% auto;
  background-position: 15% top;
  background-repeat: no-repeat;
}
/* Gradient on läbiv soe pesu, mitte eraldi riba teksti kohal. Nii ei teki päise
   ja teksti vahele tühja ala. Stopid on pikslites, et pesu tugevus ei sõltuks
   sellest, kui kõrgeks hero venib. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(246,242,231,.52) 0, rgba(246,242,231,.6) 55%,
      rgba(246,242,231,.78) 100%),
    linear-gradient(100deg, rgba(246,242,231,.3) 0%, rgba(246,242,231,0) 62%);
}
.hero__in { padding-top: clamp(2.25rem, 8vw, 3.25rem); padding-bottom: clamp(3rem, 10vw, 4.5rem); }
.hero__copy { max-width: none; }
.hero .lead { margin-top: clamp(1.4rem, 2.6vw, 2rem); max-width: 34ch; }
.hero .dot-cta { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* Piisav laius: foto läheb üle terve hero laiuse ja tekst tuleb otse selle peale,
   nagu disaininäidisel. Vasakul on fotol sile valgusega sein, seega tekst on seal
   loetav. Kerge kreemipesu hoiab kontrasti ka seina tumedamate varjuribade kohal.
   Gradient jääb foto alla varuplaaniks. */
@media (min-width: 900px) {
  .hero { min-height: min(92vh, 900px); }
  .hero__media::after { background-size: cover; background-position: 50% 46%; }
  .hero__scrim {
    background:
      radial-gradient(58% 40% at 6% 86%, rgba(246,242,231,.5) 0%, rgba(246,242,231,0) 100%),
      linear-gradient(96deg, rgba(246,242,231,.5) 0%, rgba(246,242,231,.4) 24%,
        rgba(246,242,231,.16) 42%, rgba(246,242,231,0) 56%),
      linear-gradient(to bottom, rgba(246,242,231,.52) 0%, rgba(246,242,231,0) 18%);
  }
  .hero__in { padding-top: clamp(7rem, 13vw, 10rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
  .hero__copy { max-width: min(34rem, 48%); }
  .hero .lead { max-width: 34ch; }
}

/* ---------- teenuste ruudustik ---------- */
.svcs { display: grid; grid-template-columns: repeat(3, 1fr); }
.svc {
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.2rem) clamp(2rem, 3.6vw, 2.8rem);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.svc:nth-child(3n) { border-right: 0; }
.svc:first-child, .svc:nth-child(2), .svc:nth-child(3) { border-top: 0; }
.svcs { border-bottom: 1px solid var(--line); }
.svc:first-child, .svc:nth-child(3n+1) { padding-left: 0; }
.svc:nth-child(3n) { padding-right: 0; }
.svcs__cta { margin-top: clamp(2.2rem, 4vw, 3rem); }
.svc p { font-size: 1.06rem; line-height: 1.5; max-width: 26ch; }

@media (max-width: 860px) {
  .svcs { grid-template-columns: repeat(2, 1fr); }
  .svc { border-right: 1px solid var(--line); border-top: 1px solid var(--line); padding-inline: clamp(1rem,4vw,1.8rem); }
  .svc:nth-child(3n)   { border-right: 1px solid var(--line); padding-right: clamp(1rem,4vw,1.8rem); }
  .svc:nth-child(2n)   { border-right: 0; padding-right: 0; }
  .svc:nth-child(2n+1) { padding-left: 0; }
  .svc:nth-child(3n+1) { padding-left: 0; }
  .svc:nth-child(3)    { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .svcs { grid-template-columns: 1fr; }
  .svc { border-right: 0 !important; padding-inline: 0 !important; }
  .svc:nth-child(1) { border-top: 0; }
  .svc:nth-child(n) { border-top: 1px solid var(--line); }
  .svc:first-child { border-top: 0; }
}

/* ---------- protsess ---------- */
.steps { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
.step {
  padding: clamp(1.5rem,2.6vw,2rem) clamp(1.2rem,2.2vw,1.8rem) 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.step:last-child { border-right: 0; padding-right: 0; }
.step:first-child { padding-left: 0; }
.step__n {
  font-family: var(--font-micro); font-size: .7rem; font-weight: 500;
  letter-spacing: .24em; color: var(--orange); margin-bottom: 1rem;
}
.step h3 { margin-bottom: .6rem; }
.step p { font-size: 1.04rem; line-height: 1.5; }
/* Samme on kolm, seega 2-veeruline vahepealne laotus jätaks viimase sammu
   üksinda poolikusse ritta koos poolele laiusele ulatuva joonega. Kolm veergu
   püsivad kuni 720px-ni ja lähevad siis otse ühte veergu. */
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; padding-inline: 0; padding-bottom: 1.6rem; }
}

/* ---------- kaks veergu ---------- */
.split {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.prose p + p { margin-top: 1.15rem; }
.prose p { max-width: 54ch; }

.reasons { display: grid; gap: 0; }
.reason { display: flex; gap: 1.4rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.reason:first-child { border-top: 0; padding-top: 0; }
.reason svg { flex: none; width: 1.5rem; height: 1.5rem; stroke: var(--ink); stroke-width: 1.4; fill: none; margin-top: .35rem; }
.reason h3 { font-size: 1.32rem; margin-bottom: .3rem; }
.reason p { font-size: 1.04rem; line-height: 1.5; }

.card {
  background: var(--cream-lift);
  border: 1px solid var(--line-soft);
  padding: clamp(1.6rem, 3.4vw, 2.5rem);
}
.card h3 { margin-bottom: 1rem; }
.stack-list li { position: relative; padding-left: 1.6rem; margin-bottom: .75rem; font-size: 1.05rem; line-height: 1.45; }
.stack-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange);
}

.values { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); }
.value { padding: 1.8rem clamp(1.2rem,2.2vw,1.8rem) 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.value:last-child { border-right: 0; padding-right: 0; }
.value:first-child { padding-left: 0; }
.value__n { font-family: var(--font-micro); font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: .9rem; }
.value h3 { font-size: 1.32rem; margin-bottom: .4rem; }
.value p { font-size: 1.02rem; line-height: 1.5; }
@media (max-width: 860px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .value { border-right: 1px solid var(--line); padding-inline: clamp(1rem,4vw,1.6rem); }
  .value:nth-child(2n) { border-right: 0; padding-right: 0; }
  .value:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } .value { border-right: 0; padding-inline: 0; padding-bottom: 1.4rem; } }

/* ---------- tööd, tulekul ---------- */
.teaser { text-align: center; padding-block: clamp(3rem, 6vw, 5rem); border-block: 1px solid var(--line); }
.teaser .lead { margin: 1.3rem auto 0; }
.teaser .dot-cta { margin-top: 2.2rem; }

/* ---------- lõpu CTA ---------- */
.cta { position: relative; overflow: hidden; padding-block: var(--sect); }
.cta__mark {
  position: absolute; right: -4%; bottom: -18%; width: min(46%, 460px);
  opacity: .12; pointer-events: none; z-index: 0;
}
.cta .wrap { position: relative; z-index: 1; }
.cta .lead { margin-top: 1.5rem; }
.cta .dot-cta { margin-top: clamp(2rem, 3.6vw, 2.8rem); }
.cta__alt { margin-top: 1.6rem; font-size: 1.02rem; }
.cta__alt a { color: var(--ink); text-underline-offset: .25em; }

/* ---------- kontaktivorm ---------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.35rem; font-family: var(--font-micro); }
.field-row { display: grid; gap: 1.35rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.field .hint { letter-spacing: .06em; text-transform: none; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: .85rem .95rem;
  width: 100%;
}
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #9FAFBD; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; border-color: var(--ink); }

.hp { position: absolute; left: -9999px; }

.form__status { font-size: .95rem; display: none; padding: .8rem 1rem; border-left: 3px solid var(--line); background: var(--cream-lift); }
.form__status.is-on { display: block; }
.form__status--ok  { border-color: #2E7D5B; color: #1F5C42; }
.form__status--err { border-color: #B4402F; color: #8E3322; }
.form__note { font-size: .85rem; color: var(--muted); max-width: 48ch; }

.btn-submit {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 1.1rem;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--font-micro); font-size: .74rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
}
.btn-submit .dot-cta__dot { width: 3.6rem; height: 3.6rem; }
.btn-submit:disabled { opacity: .55; cursor: progress; }

.info { display: grid; gap: 1.25rem; }
.info__card { background: var(--cream-lift); border: 1px solid var(--line-soft); padding: clamp(1.3rem, 2.6vw, 1.9rem); }
.info__card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.info__row { display: flex; gap: .95rem; align-items: flex-start; padding-block: .55rem; }
.info__row svg { flex: none; width: 1.25rem; height: 1.25rem; stroke: var(--ink); stroke-width: 1.5; fill: none; margin-top: .3rem; }
.info__row .k { display: block; font-family: var(--font-micro); font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.info__row a, .info__row .v { color: var(--ink); font-size: 1.05rem; text-underline-offset: .22em; }
.info__card p { font-size: 1rem; line-height: 1.55; }

/* ---------- jalus ---------- */
.ftr { background: var(--ink-deep); color: #C6D3DF; padding-block: clamp(3.2rem, 6vw, 4.8rem) 2rem; }
.ftr__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__grid > :first-child { grid-column: 1 / -1; } }
.ftr img { height: 1.55rem; width: auto; margin-bottom: 1.2rem; }
.ftr p { font-size: 1.02rem; line-height: 1.55; max-width: 34ch; }
.ftr h4 { font-family: var(--font-micro); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #7E93A8; margin-bottom: 1.1rem; }
.ftr li { margin-bottom: .6rem; }
.ftr li a { text-decoration: none; border-bottom: 1px solid transparent; }
.ftr li a:hover { border-color: currentColor; }
.ftr :focus-visible { outline-color: var(--yellow); }
.ftr__btm {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(198,211,223,.18);
  font-family: var(--font-micro); font-size: .74rem; letter-spacing: .12em; color: #7E93A8;
}

/* ---------- ilmumine kerimisel ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }