/* ============ Alesse — static subpages: the page body only ============
   Services and case studies, EN + BG. The chrome (nav, mobile menu, footer,
   contact panel, buttons, eyebrows, chapter rules, Ada) is the homepage's own
   markup, styled by the homepage's own CSS, which these pages link first. This
   file styles only what the homepage does not have: the spec-sheet body.
   The one idea: a ruled spec sheet. Titles live in the left column, content on
   one right-hand axis, and every block hangs off the homepage's numbered
   chapter rule. */

:root {
  /* the gap between the title column and the content axis */
  --col-gap: clamp(32px, 5vw, 96px);
  /* where the content axis starts inside the 4/8 split, so blocks outside a
     grid (lead, spec, screenshot) can sit on the same line as the prose */
  --axis: calc((100% - var(--col-gap)) / 3 + var(--col-gap));
}

h1,
h2,
h3 {
  overflow-wrap: break-word;
}

main:focus {
  outline: none;
}

/* the homepage's nav is fixed over a full-screen hero; here it sits over the
   page, so the page starts below it */
.page {
  padding-top: 72px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ico {
  flex: none;
  transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) {
  .btn:hover .ico {
    transform: translateX(3px);
  }
}

/* ============ skip link ============ */
.skip {
  position: absolute;
  top: 12px;
  left: var(--gutter);
  /* above the fixed nav (130) */
  z-index: 140;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--size-sm);
  font-weight: var(--fw-bold);
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease-out);
}

.skip:focus-visible {
  transform: none;
}

/* ============ breadcrumb ============ */
/* Inline flow, not flex: a long current title wraps under the trail like a
   sentence instead of squeezing into a narrow column beside it. */
.crumbs ol {
  font-size: var(--size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--muted);
}

.crumbs li {
  display: inline;
}

.crumbs li + li::before {
  content: '/';
  margin-inline: 10px;
  color: var(--line-strong);
}

/* 44px targets without a flex row: the link's own line box is the target */
.crumbs a {
  display: inline-block;
  line-height: 44px;
  transition: color 0.2s var(--ease-out);
}

@media (hover: hover) {
  .crumbs a:hover {
    color: var(--amber-dark);
  }
}

.crumbs [aria-current] {
  color: var(--ink);
}

/* On a phone the current crumb is the h1 again, wrapped over two lines right
   above it. It stays in the markup for screen readers (and so the list still
   matches the BreadcrumbList JSON-LD); only the eye skips it. */
@media (max-width: 767px) {
  .crumbs__current {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============ hero ============ */
.page-hero {
  padding-top: clamp(40px, 7vw, 104px);
}

.page-hero__title {
  max-width: 20ch;
  margin-top: 18px;
  font-size: var(--size-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-title);
  line-height: 1.04;
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 60ch;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: var(--size-lead);
  line-height: 1.55;
}

/* ============ spec strip ============ */
/* A ruled sheet with no verticals: every row carries its own top rule and the
   strip closes on one more, so it reads as a spec table at any column count. */
/* Fixed counts, not auto-fit: six facts read as 3x2 on the axis and 2x3 on a
   phone, so no row ends on an orphan and no column is narrow enough to split
   a word. Four facts take 2x2. */
.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line-strong);
}

@media (min-width: 640px) {
  .spec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .spec:has(> .spec__cell:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Subgrid: a label that wraps to two lines pushes its whole row's values down
   together, so values in a row always share a top line. */
.spec__cell {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
  padding: 16px 20px 20px 0;
  border-top: 1px solid var(--line-strong);
}

.spec dt {
  font-size: var(--size-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}

.spec dd {
  margin-top: 8px;
  font-size: var(--size-h4);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  /* only a string wider than the whole cell may break; domains break at <wbr> */
  overflow-wrap: break-word;
  hyphens: manual;
}

/* ============ the live site ============ */
/* The homepage's ink window, reduced to what does work: an address bar that
   names the host and is the real link out, over the screenshot. */
.shot {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 0 8px 8px;
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, #302a3a, #14101c);
  box-shadow:
    0 44px 90px -42px rgba(23, 17, 31, 0.55),
    0 8px 22px -14px rgba(23, 17, 31, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.shot:not(:has(.shot__bar)) {
  padding-top: 8px;
}

.shot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding-inline: 2px 6px;
  font-size: var(--size-xs);
  font-weight: var(--fw-bold);
  color: var(--paper);
}

/* the stretched hit area: the screenshot is part of the link, one name only */
.shot__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.shot__host {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(250, 250, 249, 0.07);
  color: var(--muted-inverse);
}

/* text-overflow only works on the text's own block box, not on a flex item's
   anonymous text run, so the domain gets a span of its own */
.shot__domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On a phone the domain needs the room more than the words "Visit the site":
   the arrow stays, the label stays in the link's name for screen readers. */
@media (max-width: 480px) {
  .shot__bar {
    gap: 10px;
  }

  .shot__visit-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.shot__live {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(250, 157, 19, 0.2);
}

.shot__visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  transition: color 0.25s var(--ease-out);
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
  /* The window is 16:10. The *-case.webp stills already are; the rule keeps
     any other image (e.g. a tall full-page capture) cropped to its top. It
     must be explicit: width/height attributes alone give "auto w/h", and the
     auto hands over to the file's own ratio once it loads. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r-md);
  background: var(--ink-deep);
}

@media (hover: hover) {
  .shot--linked:hover .shot__visit {
    color: var(--amber);
  }

  .shot--linked:hover .shot__visit .ico {
    transform: translate(2px, -2px);
  }
}

/* focus rings the whole window, not the few words in the bar */
@supports selector(:has(a)) {
  .shot__bar:focus-visible {
    outline: none;
  }

  .shot:has(.shot__bar:focus-visible) {
    outline: 2px solid var(--amber-dark);
    outline-offset: 4px;
  }
}

/* ============ the axis ============ */
@media (min-width: 960px) {
  .page-hero__lead,
  .spec,
  .shot {
    margin-inline-start: var(--axis);
  }
}

/* ============ chapters ============ */
.page-chapters > .chapter:first-child {
  margin-top: var(--space-section);
}

.chapter + .chapter {
  margin-top: calc(var(--space-section) * 0.55);
}

/* FAQ and related are their own movements, so they take a longer beat; the
   full section beat left a blank screen after a two-line outcome */
.page-chapters > .chapter--block {
  margin-top: calc(var(--space-section) * 0.8);
}

.chapter__title {
  margin-bottom: 24px;
  font-size: var(--size-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-title);
  line-height: 1.12;
  text-wrap: balance;
}

@media (min-width: 960px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--col-gap);
    align-items: start;
  }

  /* the title stays beside its text while it is being read */
  .chapter__title {
    position: sticky;
    /* clears the condensed nav: 20px margin + 54px bar + air */
    top: 104px;
    margin-bottom: 0;
  }
}

.prose p {
  max-width: 68ch;
  line-height: 1.7;
}

.prose p + p {
  margin-top: 1.1em;
}

/* list items are ruled rows, the same hairline as the sheet */
.ticks {
  max-width: 68ch;
  margin-top: 28px;
  border-bottom: 1px solid var(--line);
}

.prose > .ticks:first-child {
  margin-top: 0;
}

.ticks li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(14px + 0.8em - 1px);
  width: 14px;
  height: 2px;
  background: var(--amber);
}

/* ============ FAQ ============ */
.qa {
  border-bottom: 1px solid var(--line);
}

/* The homepage's closed row keeps its answer's bottom padding (the 0fr grid row
   collapses the text, not the padding), so its rows sit one beat apart more
   than a bare summary. Matched here so both FAQs share one row pitch. */
.qa:not([open]) {
  padding-bottom: clamp(18px, 2.4vw, 26px);
}

.qa:first-child summary {
  padding-top: 0;
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary:focus-visible {
  outline-offset: 4px;
}

.qa__q {
  font-size: var(--size-h4);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.2s var(--ease-out);
}

@media (hover: hover) {
  .qa summary:hover .qa__q {
    color: var(--amber-dark);
  }

  .qa:not([open]) summary:hover .qa__icon {
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
}

/* plus to minus: the vertical bar turns flat, the ring fills amber */
.qa__icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.qa__icon::before,
.qa__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}

.qa__icon::after {
  transform: rotate(90deg);
}

.qa[open] .qa__icon {
  background: var(--amber);
  box-shadow: inset 0 0 0 1.5px var(--amber);
}

.qa[open] .qa__icon::before,
.qa[open] .qa__icon::after {
  background: #2a1c05;
}

.qa[open] .qa__icon::after {
  transform: rotate(0deg);
}

.qa__a {
  padding-bottom: clamp(18px, 2.4vw, 26px);
}

.qa__a p {
  max-width: 64ch;
  color: var(--muted);
  line-height: 1.65;
}

.qa__a p + p {
  margin-top: 0.9em;
}

/* the answer is uncovered, not inflated: a short settle from above */
.qa[open] .qa__a {
  animation: qa-in 0.32s var(--ease-out) both;
}

@keyframes qa-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ============ related ============ */
/* Ruled rows, the FAQ's own hairline, rather than boxed cards: the sheet
   speaks in rows, and three boxes in a two-up grid always left an orphan. */
.cards {
  border-bottom: 1px solid var(--line);
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'kind go'
    'title go'
    'desc go';
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 6px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--line);
  border-radius: 2px;
}

.card:first-child {
  padding-top: 0;
  border-top: 0;
}

.card__kind {
  grid-area: kind;
  font-size: var(--size-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--amber-dark);
}

.card__title {
  grid-area: title;
  font-size: var(--size-h4);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
  transition: color 0.2s var(--ease-out);
}

/* the title link covers the card, so the whole card is one target, one name */
.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__desc {
  grid-area: desc;
  max-width: 60ch;
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* centred on the row, the same ringed control as the FAQ's plus */
.card__go {
  grid-area: go;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

@media (hover: hover) {
  .card:hover .card__title {
    color: var(--amber-dark);
  }

  .card:hover .card__go {
    background: var(--amber);
    box-shadow: inset 0 0 0 1.5px var(--amber);
  }

  .card:hover .card__go .ico {
    transform: translateX(3px);
  }
}

@supports selector(:has(a)) {
  .card__title a:focus-visible {
    outline: none;
  }

  .card:has(a:focus-visible) {
    outline: 2px solid var(--amber-dark);
    outline-offset: 6px;
  }
}

/* ============ 404 ============ */
.notfound {
  padding-bottom: var(--space-section);
}

.notfound__home {
  margin-top: clamp(28px, 3vw, 40px);
}

/* no spec sheet here, so no axis: the note reads down one left edge */
.notfound .page-hero__lead {
  margin-inline-start: 0;
}

.notfound__note + .notfound__note {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

/* ============ contact panel ============ */
/* The homepage's .contact panel. Only what differs: a link in place of the
   form, and a focus ring that can be seen on ink. */
.page > .contact {
  margin-top: var(--space-section);
}

.page-cta__btn {
  margin-top: clamp(32px, 4vw, 52px);
}

.contact__panel :focus-visible {
  outline-color: var(--amber);
}

/* ============ footer ============ */
/* The homepage scrubs the wordmark's ink fill with the scroll and ends full;
   with no GSAP here it is simply set in that final state. */
.footer__word-fill {
  --wy: 100%;
}

/* reduced motion: global.css already cuts transitions and animations */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active {
    transform: none;
  }
}