/* ==========================================================================
   Korepetitoriai — landing page
   Values ported 1:1 from design-reference/Main.dc.html
   ========================================================================== */

:root {
  --ink: #121417;
  --paper: #FAFAF8;
  --white: #FFFFFF;
  --muted: #56585D;
  --rule: #D8E3ED;
  --ph-bg: #ECEDEF;

  /* "Notebook" pen (blue) and "Brand" margin colour (red) */
  --pen: #2456D3;
  --pen-light: #9CB3EB;      /* pen lightened 55% */
  --accent: #D62C2B;
  --accent-light: #E88B8A;   /* accent lightened 45% */

  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-swift: cubic-bezier(.3, .7, .2, 1);
  --ease-fill: cubic-bezier(.6, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); }

:where(a) { color: var(--ink); }
:where(a:hover) { color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Page shell: ruled notebook paper + red margin line
   -------------------------------------------------------------------------- */

.mg {
  --rail-x: 212px;
  --pad-l: 260px;
  --pad-r: 72px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 999px) {
  .mg { --rail-x: 14px; --pad-l: 34px; --pad-r: 20px; }
}

.mg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px);
  transition: opacity .6s ease;
}
.mg.notes-off::before { opacity: 0; }

.mg main,
.mg .site { position: relative; z-index: 1; }
.mg section[id] { scroll-margin-top: 80px; }

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  z-index: 6;
  width: 2px;
  background-color: var(--accent);
  pointer-events: none;
  transform-origin: 50% 0;
  animation: rail 1.6s cubic-bezier(.7, 0, .15, 1) both;
}
@keyframes rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.cq { container-type: inline-size; }
.container { max-width: 1180px; }
.dot { color: var(--accent); }

/* --------------------------------------------------------------------------
   Hand-drawn annotations ("tutor notes")
   -------------------------------------------------------------------------- */

.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0;
}

.ink { position: absolute; overflow: visible; pointer-events: none; }
.ink-i { display: inline-block; flex: none; overflow: visible; vertical-align: middle; }
.ink path,
.ink-i path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.thick path { stroke-width: 3.4px; }

.ann,
.tape { transition: opacity .3s ease, visibility .3s; }
.notes-off .ann,
.notes-off .tape { opacity: 0; visibility: hidden; }

.notes-on .ann { animation: write .9s cubic-bezier(.45, .05, .2, 1) both; }
@keyframes write {
  from { clip-path: inset(-30% 100% -30% -12%); }
  to   { clip-path: inset(-30% -12% -30% -12%); }
}
.d1 { animation-delay: .45s !important; }
.d2 { animation-delay: .7s !important; }
.d3 { animation-delay: .95s !important; }
.d4 { animation-delay: 1.2s !important; }
.d5 { animation-delay: 1.45s !important; }

.rise { animation: rise 1s var(--ease-out) .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Wrapper for a word that gets circled / underlined */
.mark { position: relative; display: inline-block; }

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  background-color: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--paper); }
.btn--lg { gap: 12px; min-height: 58px; padding: 0 28px; font-size: 17px; }
.btn--block { justify-content: center; padding: 0 24px; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease-swift); }
.btn:hover .arr { transform: translateX(5px); }

.text-link { font-size: 17px; font-weight: 500; text-underline-offset: 5px; }

.fl:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--paper);
  border-bottom: 1px solid rgba(18, 20, 23, .12);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 76px;
  padding: 12px var(--pad-r) 12px var(--pad-l);
  box-sizing: border-box;
}
.site-header__actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }

.logo {
  color: var(--ink);
  font-size: clamp(20px, 6.4vw, 27px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -.045em;
  text-decoration: none;
}
.logo:hover { color: var(--ink); }

.nav-links { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; }

/* Reading-mode toggle (on = notes hidden) */
.tg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.tg-track {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  box-sizing: border-box;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background-color: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.tg-knob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--ink);
  transition: transform .3s var(--ease-swift), background-color .25s ease;
}
.tg[aria-pressed="true"] .tg-track { background-color: var(--pen); border-color: var(--pen); }
.tg[aria-pressed="true"] .tg-knob { background-color: var(--paper); transform: translateX(16px); }
.tg-short { display: none; }

/* --------------------------------------------------------------------------
   Sections (shared)
   -------------------------------------------------------------------------- */

.section { padding: 112px var(--pad-r) 128px var(--pad-l); }
.section--pb-136 { padding-bottom: 136px; }
.section--dark { padding-bottom: 120px; background-color: var(--ink); color: var(--paper); }
.section--accent { background-color: var(--accent); color: var(--white); }

.sec-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 56px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sec-label__num { color: var(--accent); }
.sec-label--dark { margin-bottom: 8px; border-top-color: rgba(250, 250, 248, .55); }
.sec-label--dark .sec-label__num { color: var(--accent-light); }
.sec-label--accent { border-top-color: rgba(255, 255, 255, .6); }
.sec-label--accent .sec-label__num { color: inherit; }

.h2 {
  margin: 0;
  font-size: clamp(34px, 6cqi, 76px);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-top: 76px; padding-bottom: 120px; }
.hero__inner { position: relative; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 40px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero__headline { position: relative; }
/* Sized so the longest word ("Korepetitoriai,", ~8.05em) always fits its line */
.hero__title {
  margin: 0;
  font-size: clamp(30px, 10.6cqi, 132px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .9;
  letter-spacing: -.05em;
}
.hero__circle { left: -6%; top: -4%; width: 112%; height: 132%; color: var(--pen); }

.hero-note {
  max-width: 460px;
  text-wrap: balance;
  margin: 22px 0 0;
  color: var(--pen);
  font-size: 27px;
  transform: rotate(-3deg);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px 64px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.hero__lead {
  flex: 1 1 340px;
  max-width: 520px;
  margin: 0;
  font-size: clamp(18px, 1.9cqi, 22px);
  line-height: 1.45;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero__start {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 0 20px;
  color: var(--pen);
  font-size: 27px;
  transform: rotate(-2deg);
}
.hero__start span { padding-top: 12px; }

/* --------------------------------------------------------------------------
   01 — Method
   -------------------------------------------------------------------------- */

.method__title { max-width: 14em; }
.underline { position: relative; display: inline-block; white-space: nowrap; }
.underline .ink { left: -2%; bottom: -.16em; width: 104%; height: .3em; color: var(--pen); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 48px 40px;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}
.step { padding-top: 18px; border-top: 1px solid var(--ink); }
.step__num { color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; }
.step__title {
  margin: 36px 0 12px;
  font-size: clamp(26px, 2.7cqi, 34px);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.step__text { max-width: 32ch; margin: 0; font-size: 18px; line-height: 1.5; }
.step__note { margin: 16px 0 0; color: var(--pen); font-size: 26px; transform: rotate(-1.5deg); }

/* --------------------------------------------------------------------------
   02 — Subjects
   -------------------------------------------------------------------------- */

.subject-list { margin: 0; padding: 0; list-style: none; }

.srow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(250, 250, 248, .2);
  color: var(--paper);
  text-decoration: none;
}
.srow:hover { color: var(--paper); }
.srow:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

.sfill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  z-index: 0;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--ease-fill);
}
.snum,
.sname,
.sarr { position: relative; z-index: 1; }
.snum { width: 40px; color: var(--accent-light); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.sname {
  flex: 1 1 auto;
  font-size: clamp(34px, 7cqi, 88px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -.045em;
  transition: transform .45s var(--ease-fill);
}
.sarr {
  color: rgba(250, 250, 248, .55);
  font-size: clamp(24px, 2.6cqi, 34px);
  line-height: 1;
  transition: transform .45s var(--ease-fill), color .2s ease;
}

.srow:hover .sfill,
.srow:focus-visible .sfill { transform: scaleX(1); }
.srow:hover .sname { transform: translateX(12px); }
.srow:hover .sarr { color: var(--white); transform: translateX(6px); }
.srow:hover .snum { color: var(--white); }

/* --------------------------------------------------------------------------
   03 — Tutors
   -------------------------------------------------------------------------- */

.tutors__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 64px;
}
.tutors__title { flex: 1 1 420px; }
.tutors__text { flex: 1 1 300px; max-width: 440px; margin: 0; font-size: 20px; line-height: 1.5; text-wrap: pretty; }

.tutors__board { position: relative; margin-top: 64px; }

/* Margin note — sits left of the red rail on desktop */
.mnote { top: 18%; margin: 0; color: var(--pen); font-size: 26px; transform: rotate(-4deg); }
.mnote .ink-i { display: block; margin: 6px 0 0 auto; }

.tutor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 36px 24px;
}

.tcard { position: relative; margin: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.notes-on .tilt-1 { transform: rotate(-2.2deg); }
.notes-on .tilt-2 { transform: rotate(1.6deg) translateY(10px); }
.notes-on .tilt-3 { transform: rotate(-1.2deg) translateY(-4px); }
.notes-on .tilt-4 { transform: rotate(2.4deg) translateY(6px); }

.tape {
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 2;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  background: rgba(200, 210, 226, .72);
  transform: rotate(-3deg);
}

.tcard__photo {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 14px;
  box-sizing: border-box;
  background-color: var(--ph-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ph { background-image: repeating-linear-gradient(135deg, rgba(18, 20, 23, .06) 0, rgba(18, 20, 23, .06) 1px, transparent 1px, transparent 11px); }

.tcard__caption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }
.tcard__name { font-size: 18px; font-weight: 700; }
.tcard__subject { color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------------------------
   04 — Parents
   -------------------------------------------------------------------------- */

.parents__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px 72px;
}
.parents__price { flex: 1 1 340px; }

.price {
  margin: 0;
  font-size: clamp(72px, 14cqi, 188px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .9;
  letter-spacing: -.05em;
}
.price__circle { left: -10%; top: -8%; width: 120%; height: 128%; color: var(--pen); }
.price__unit { margin: 24px 0 0; font-size: 22px; line-height: 1.4; }

.quote { flex: 1 1 340px; max-width: 560px; margin: 0; padding: 0; }
.quote__text {
  margin: 0;
  font-size: clamp(24px, 2.7cqi, 32px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.quote__mark { color: var(--accent); }
.quote__author { margin-top: 20px; color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------------------------
   05 — Booking
   -------------------------------------------------------------------------- */

.book__title {
  max-width: 11em;
  margin: 0;
  font-size: clamp(44px, 10cqi, 140px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .92;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.book__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px 72px;
  margin-top: 56px;
}
.book__copy { flex: 1 1 300px; max-width: 440px; }
.book__text { margin: 0; font-size: 20px; line-height: 1.5; }
.book__note { margin: 28px 0 0; color: var(--white); font-size: 31px; transform: rotate(-3deg); }

.book-form {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
  padding: clamp(22px, 3.4cqi, 36px);
  box-sizing: border-box;
  background-color: var(--paper);
  color: var(--ink);
}
.book-form .btn { margin-top: 6px; }
.book-form__meta { margin: 0; color: var(--muted); font-size: 14px; }
.book-form__status { margin: 0; padding-left: 12px; border-left: 3px solid #2E7D4F; color: var(--ink); font-size: 15px; line-height: 1.4; }
.book-form__status.is-error { border-left-color: var(--accent); }
.book-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .6; cursor: progress; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.fld {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site { padding: 64px var(--pad-r) 40px var(--pad-l); background-color: var(--ink); color: var(--paper); }
.site a { color: var(--paper); }

.site__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px 64px;
}
.site__brand { display: flex; flex-direction: column; gap: 14px; }
.site__logo {
  font-size: clamp(28px, 9vw, 44px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -.045em;
  text-decoration: none;
}
.site__tagline { margin: 0; color: rgba(250, 250, 248, .72); font-size: 15px; }
.site__login { font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.site__note { margin: 4px 0 0; color: var(--pen-light); font-size: 26px; transform: rotate(-2deg); }

.site__contacts { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-style: normal; line-height: 1.4; }

.site__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid rgba(250, 250, 248, .18);
  color: rgba(250, 250, 248, .62);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .mnote { position: absolute; right: calc(100% + 64px); width: 180px; text-align: right; }
  .logo {
    position: absolute;
    font-size: 21px;
    left: 0;
    top: 50%;
    width: calc(var(--rail-x) - 18px);
    text-align: right;
    transform: translateY(-50%);
  }
}
@media (max-width: 999px) {
  .mnote { margin: 0 0 12px; }
  .desk-only { display: none !important; }
}

@media (max-width: 1319px) { .nav-links { display: none; } }
@media (max-width: 720px)  { .nav-cta { display: none; } }
@media (max-width: 600px)  { .site-header__inner { gap: 20px; } .tg-long { display: none; } .tg-short { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail,
  .rise,
  .notes-on .ann { animation: none !important; }
  .tcard,
  .tg-knob,
  .sfill,
  .sname,
  .sarr,
  .btn .arr { transition: none !important; }
}