/* ==========================================================================
   Aksamit Recruitment - stylesheet
   Hand-written, no framework, no build step.

   To re-brand: change the values in the :root block below. Everything else
   derives from them.
   ========================================================================== */

:root {
  /* --- Brand palette -------------------------------------------------- */
  /* Sampled directly from the Aksamit logo artwork: the charcoal-slate card
     and the warm taupe metal of the AR monogram. */
  --ink:            #2a2f2e;   /* charcoal slate - body text, 13.6:1 on white */
  --ink-soft:       #4c5251;   /* 8.0:1 */
  --muted:          #666c6a;   /* lightest text tone that still passes AA on every surface */
  --line:           #e2e0dc;
  --surface:        #ffffff;
  --surface-warm:   #f7f5f2;
  --surface-deep:   #262b2a;   /* the logo card's own charcoal */

  /* Slate blue-grey. A cool neutral that sits beside the charcoal rather than
     competing with it. The logo taupe is kept below for the mark itself. */
  --accent:         #7d99a5;   /* light slate - decorative use only, 2.5:1 */
  --accent-deep:    #3a5561;   /* 7.9:1 on white - safe for text and buttons */
  --accent-darker:  #2c414c;   /* 10.4:1 - button hover */
  --accent-tint:    #e9eff2;

  /* Button on the dark call-to-action band: light, not coloured. A slate
     button on charcoal goes muddy; cream on charcoal reads as intended. */
  --btn-on-dark-bg: #f2efe9;
  --btn-on-dark-hv: #ffffff;

  /* --- Type ------------------------------------------------------------
     One scale, and nothing outside it.

     This block replaced 29 distinct font-size values spread across 46
     declarations, fifteen of them inside a single 0.29rem band and several
     differing by less than a tenth of a pixel. Sizes that close cannot read
     as hierarchy; they only read as inconsistency, which is exactly how the
     page felt. If a new size seems necessary, the answer is almost always
     that an existing one is being used in the wrong place.

     THE RULE: never set font-size, font-weight or letter-spacing to a
     literal value anywhere below, and never in the HTML. Use these tokens.
     --------------------------------------------------------------------- */
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;

  /* Headings. h1 and h2 share one size on purpose: every page has a single
     h1 and it is a section heading like any other. They previously differed
     by 1.6px, which is not a hierarchy, it is a rounding error. */
  --fs-display: clamp(2.15rem, 1.45rem + 2.9vw, 3.4rem);  /* h1, h2 */
  --fs-h3:      clamp(1.35rem, 1.18rem + 0.7vw, 1.8rem);  /* card headings */
  --fs-h4:      clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem); /* aside headings */

  /* Body. Four steps, each a visible one. */
  --fs-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);  /* section intro */
  --fs-body:  1.0625rem;                                /* default */
  --fs-small: 0.95rem;                                  /* supporting text */
  --fs-xs:    0.875rem;                                 /* captions, meta */
  --fs-label: 0.8rem;                                   /* uppercase labels */

  /* Serif set at a light weight: pull-statements and testimonials. These are
     not headings, which is why they are allowed to be lighter than one. */
  --fs-statement: clamp(1.45rem, 1.1rem + 1.5vw, 2.25rem);
  --fs-quote:     clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);

  /* Display ornaments: the stat figures, the decorative quote marks, the
     step numbers. Outside the text hierarchy by design. */
  --fs-stat: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-mark: 3rem;
  --fs-num:  1.6rem;

  /* Weights. The stylesheet previously used 550 and 650, which no weight in
     the system-ui stack actually provides, so browsers rounded them to a
     neighbour differently on different platforms. Four real weights only. */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking. Four near-identical negative values collapsed into one. */
  --ls-tight: -0.018em;
  --ls-wide:   0.12em;

  /* --- Space & shape --------------------------------------------------- */
  --container: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.75rem, 8vw, 7rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(42, 47, 46, .05),
               0 2px 8px rgba(42, 47, 46, .04);
  --shadow-md: 0 12px 32px -12px rgba(42, 47, 46, .18),
               0 2px 8px rgba(42, 47, 46, .05);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchored targets clear of the sticky header. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  margin: 0 0 .6em;
  text-wrap: balance;
}

/* The scale has to be applied, not just declared. Without these, h2 and h3 fell
   back to the browser defaults (1.5em and 1.17em) and every change to --fs-h2
   did nothing at all. */
h1, h2 { font-size: var(--fs-display); }
h3      { font-size: var(--fs-h3); }
h4      { font-size: var(--fs-h4); }

/* Two named exceptions, replacing eleven inline font-size overrides that used
   to live in the HTML. Those overrides were the real cause of the site feeling
   inconsistent: an h2 rendered at 56px in some sections and 27.84px in others,
   and an h3 at 27.84px in one place and 16.8px in another, so the tag no
   longer told you anything about the size.

   A heading that titles a SECTION is always display size. These two are for
   headings that title something smaller, and they are the only sanctioned way
   to make a heading smaller than its level. */
.h-panel { font-size: var(--fs-h3); }   /* titles a panel or column, not a section */
.h-sm    { font-size: var(--fs-h4); }   /* titles a small card or aside */

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

::selection { background: var(--accent-tint); color: var(--ink); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--warm { background: var(--surface-warm); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.15rem;
}

.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; }

/* An intro block whose text runs to more than one paragraph keeps one
   treatment throughout. Marked explicitly rather than with `.lead + p`,
   because that also caught the standfirst-then-article-body shape of the
   biography on why-choose-us, where the step down IS the hierarchy. Two
   different shapes, so they need two different answers. */
.intro p { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Uses --accent-deep rather than --accent so white label text clears WCAG AA
   (5.4:1). The lighter --accent is reserved for non-text decoration. */
.btn--accent { --btn-bg: var(--accent-deep); }
.btn--accent:hover { --btn-bg: var(--accent-darker); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { --btn-bg: var(--surface-warm); border-color: var(--ink); }

.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(42, 47, 46, .05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand picture { flex: none; display: block; line-height: 0; }
.brand__mark { width: 38px; height: 38px; flex: none; border-radius: 9px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.brand__tag {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding-block: .35rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: var(--fw-semibold); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(60rem 30rem at 78% -10%, var(--accent-tint), transparent 60%),
    radial-gradient(50rem 28rem at 8% 105%, #eef0ee, transparent 62%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: .5em; }
.hero .lead { max-width: 34rem; margin-bottom: 2rem; }

.hero__accent { color: var(--accent-deep); font-style: italic; }

/* Credential strip */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin: 2.75rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.stat__label {
  display: block;
  margin-top: .5rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--muted);
}

/* Portrait */
.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, #eceeec, #f1ebe4);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.portrait__caption {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.portrait__name { font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.portrait__role { font-size: var(--fs-xs); color: var(--muted); }

/* Placeholder shown until a real image is dropped in */
.img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background:
    repeating-linear-gradient(135deg, rgba(169,152,137,.07) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, #eceeec, #f1ebe4);
}
.img-placeholder svg { opacity: .35; }

/* ==========================================================================
   Cards
   ========================================================================== */

/* Explicit column counts rather than auto-fit: auto-fit was leaving an
   orphaned card on its own row at common desktop widths. */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d9d0de; }
.section--warm .card { background: var(--surface); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 1.15rem;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.card h3 { font-size: var(--fs-h3); margin-bottom: .7rem; }
.card p { color: var(--ink-soft); font-size: var(--fs-small); }

.card--link { display: block; text-decoration: none; color: inherit; }
.card--link .card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent-deep);
}
.card--link:hover .card__more .arrow { transform: translateX(3px); }
.card__more .arrow { transition: transform .25s var(--ease); }

/* Numbered process cards */
.card--step .card__num {
  font-family: var(--font-display);
  font-size: var(--fs-num);
  color: var(--accent-deep);
  line-height: 1;
  margin-bottom: .9rem;
  display: block;
}

/* ==========================================================================
   Role pills
   ========================================================================== */

.pills { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.pill {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background-color .25s var(--ease);
}
.pill:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }

/* ==========================================================================
   Split content (bio)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.split__media { position: sticky; top: 100px; }
@media (max-width: 860px) { .split__media { position: static; max-width: 22rem; } }

/* ==========================================================================
   Quote
   ========================================================================== */

/* Three-up testimonial cards */
.quote-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 1.9rem);
  margin: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.quote-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d5d1cb; }

.quote-card__mark {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: .55;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.quote-card blockquote {
  margin: 0 0 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  flex: 1 1 auto;
}
.quote-card figcaption {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.45;
}
.quote-card figcaption strong { display: block; color: var(--ink); font-weight: var(--fw-semibold); }


.quote {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.quote blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-mark);
  line-height: .6;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.quote figcaption { font-size: var(--fs-xs); color: var(--muted); }
.quote figcaption strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta {
  background: var(--surface-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% auto;
  width: 32rem; height: 32rem;
  background: radial-gradient(circle, rgba(169,152,137,.30), transparent 65%);
  pointer-events: none;
}
.cta h2 { color: #fff; }
.cta p { color: #c8c5c0; max-width: 38rem; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 2rem; position: relative; z-index: 1; }
.cta .btn--accent { --btn-bg: var(--btn-on-dark-bg); --btn-fg: var(--ink); }
.cta .btn--accent:hover { --btn-bg: var(--btn-on-dark-hv); }
.cta .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.cta .btn--ghost:hover { --btn-bg: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-wrap,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin-bottom: .45rem;
  color: var(--ink);
}
.field .hint { font-weight: var(--fw-normal); color: var(--muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-warm);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(128,106,88,.16);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #c0392b; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot - hidden from humans, catches naive bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 1rem; }

.form-status {
  margin-top: 1.15rem;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  font-size: var(--fs-small);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #edf7ef; border: 1px solid #bfe3c8; color: #1e6b34; }
.form-status--err { background: #fdefed; border: 1px solid #f3c8c2; color: #96291b; }

.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* ==========================================================================
   Contact details list
   ========================================================================== */

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-item { display: flex; gap: .95rem; align-items: flex-start; }
.contact-item__icon {
  flex: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.contact-item__label {
  font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--muted); margin-bottom: .15rem;
}
.contact-item__note { color: var(--muted); font-size: var(--fs-xs); }
.contact-item a {
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: none;
}
.contact-item a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--surface-deep);
  color: #b9b5af;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: var(--fs-small);
}
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 2.5rem;
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__grid .brand { color: #fff; }
.footer__grid .brand__tag { color: rgba(255,255,255,.55); }
.footer__blurb { margin-top: 1.1rem; max-width: 24rem; color: #a8a49e; font-size: var(--fs-small); }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #a8a49e;
  margin-bottom: 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: #a8a49e;
}

.social { display: flex; gap: .6rem; }
.social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
.social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); transform: translateY(-2px); }

/* ==========================================================================
   Scroll reveal - deliberately restrained
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Stagger children slightly */
.reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Utilities & print
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1.15rem; }

@media print {
  .site-header, .site-footer, .cta, .nav-toggle { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Statement band (the "Aksamit Recruitment is Aksana Rusakova." moment)
   ========================================================================== */

.statement {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}
.statement__line {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: .9rem;
}
.statement__body {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46rem;
  margin-inline: auto;
}

/* ==========================================================================
   Full-width feature image
   ========================================================================== */

.feature { margin: 0; }
.feature img {
  width: 100%;
  height: clamp(200px, 34vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.feature__caption {
  margin-top: .9rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Side-by-side image + text */
.media-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
@media (max-width: 820px) { .media-split { grid-template-columns: minmax(0, 1fr); } }
.media-split img {
  width: 100%;
  height: clamp(220px, 32vw, 400px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Ticked service lists
   ========================================================================== */

.ticks {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.ticks li {
  position: relative;
  padding-left: 1.65rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.45;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .55rem;
  height: .3rem;
  border-left: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: rotate(-45deg);
}

/* Pin the call to action to the bottom of the card. Cards are grid items and
   therefore already equal height; without this the link floats up behind
   whichever card has less text, and the two feet sit at different heights.

   Measured before the fix: aligned at 1024px and above, but out by 66px at
   900px, 88px at 860px and 94px at 820px, entirely because the longer bullet
   list in the second card wrapped sooner. Shortening the heading helped only
   at the narrowest of those; this holds at every width and survives anyone
   editing a bullet later. */
.card__foot { margin: 0 0 0; margin-top: auto; padding-top: 1.25rem; font-size: var(--fs-small); }
.card__foot a {
  font-weight: var(--fw-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.card__foot a:hover { text-decoration: underline; }
.card__foot a:hover .arrow { transform: translateX(3px); }
.card__foot .arrow { transition: transform .25s var(--ease); }

/* Three-line portrait caption needs tighter leading */
.portrait__role { line-height: 1.45; }

/* ==========================================================================
   Contact page: form beside details
   Replaces an inline grid-template-columns that used to beat the responsive
   rule below, leaving the page two-up (and overflowing) on phones.
   ========================================================================== */

.split--form { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 860px) {
  .split--form { grid-template-columns: minmax(0, 1fr); }
}

/* No overflow-x:hidden here on purpose. It masks layout bugs rather than
   fixing them, and on html/body it can break position:sticky (which the
   header relies on). Overflow is fixed at source instead; see the
   long-string rules at the end of this file. */

/* ==========================================================================
   Long-string safety
   aksana.rusakova@aksamit.co.nz is 29 unbreakable characters. It overflowed
   the contact list at 320px and the three-column footer at 768px, so both
   places are allowed to break it mid-string, and the footer drops to two
   columns earlier.
   ========================================================================== */

.contact-item a,
.footer__list a { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* Section head sitting inside a media-split: the column already constrains it,
   so drop the standalone max-width and trailing margin. */
.media-split .section-head { max-width: none; margin-bottom: 0; }
.media-split picture { display: block; }

/* Supporting photograph in a sidebar column. Capped in height so it supports
   the column rather than stretching it past the form beside it. */
.side-photo img {
  width: 100%;
  height: clamp(220px, 26vw, 320px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Additions for the third feedback round
   ========================================================================== */

/* Force a heading to break at a chosen point rather than wherever it lands.
   Used where a two-sentence title was splitting mid-thought. */
.h-line { display: block; }
h1:has(.h-line), h2:has(.h-line) { text-wrap: normal; }

/* Larger caption under a feature image, and less air beneath it */
.feature__caption {
  margin-top: 1.1rem;
  font-size: var(--fs-body);
  color: var(--ink-soft);
}

.section--tight-bottom { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section--tight-top    { padding-top:    clamp(2rem, 4vw, 3rem); }

/* Capacity note: a quiet aside, not another card competing with the three
   above it. */
.aside-note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.35rem, 2.5vw, 1.9rem) clamp(1.5rem, 3vw, 2.25rem);
  border-left: 3px solid var(--accent);
  background: var(--surface-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.section--warm .aside-note { background: var(--surface); }
.aside-note h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.card--note h3 { font-size: var(--fs-h4); }
/* Sits directly beneath the form on the contact page, so it takes the form's
   radius and shadow rather than the grid-card treatment used elsewhere. */
.card--note { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.aside-note p { color: var(--ink-soft); margin-bottom: 0; }
.aside-note p + p { margin-top: .8rem; }

/* Service lists: even rows so the two cards read as a matched pair */
.ticks--detailed li { line-height: 1.5; }
.ticks--detailed li strong { color: var(--ink); font-weight: var(--fw-semibold); }



/* ==========================================================================
   Contact page: make the two columns end together
   --------------------------------------------------------------------------
   `.split` uses align-items:start, so each column sizes to its own content.
   On the contact page the details column ran 266px past the form, which left
   a void down the left side.

   Two things fix it, and both are needed. The "Sending a CV?" note moves to
   the left column, under the form it is actually about - that balances the
   two columns, and it is where someone who has just realised the form takes
   no attachments is already looking. Then the columns stretch and the
   photograph takes up the remaining height, so the bottoms line up exactly
   whatever the content does.

   Moving the note alone is not enough, and stretching alone is worse: with
   the note left in the right column, the right column is taller than the
   form no matter what, so stretching just relocates the void inside the form
   card. Both renders were checked before choosing this one.
   ========================================================================== */
@media (min-width: 861px) {
  .split--form { align-items: stretch; }
  .split--form > .stack { display: flex; flex-direction: column; }
  /* flex-basis 0, not auto. With `auto` the photograph contributes its own
     intrinsic height when the grid measures the row, so the row ends up
     taller than the form column and the left side keeps ~10px of slack.
     Zeroing the basis lets the form column decide the height and the
     photograph fill exactly what is left. */
  .split--form .side-photo { flex: 1 1 0; min-height: clamp(220px, 26vw, 320px); }
  .split--form .side-photo picture { display: block; height: 100%; }
  .split--form .side-photo img { height: 100%; display: block; }
}

/* The details column gets the same card treatment as the form, so the two
   headings sit inside matching containers and share a baseline rather than
   one starting 40px above the other. The photograph stays outside the card:
   inset inside one it reads as a thumbnail pinned to a board rather than an
   image, which was checked and discarded. */
@media (min-width: 861px) {
  .contact-aside > .panel { margin-bottom: 0; }
}