/* ==========================================================================
   Scalematics Private Limited
   Ivory paper · near-black ink · amber accent · centred composition
   1. Tokens   2. Base   3. Backdrop   4. Header   5. Intro   6. Blocks
   7. Rows   8. Figures   9. Tiles   10. Panel   11. Footer
   12. Responsive   13. Motion
   ========================================================================== */

/* ============================== 1. TOKENS ============================== */
:root {
  --paper: #f8f5f0;
  --paper-warm: #f2ede4;
  --card: #fdfcfa;
  --ink: #17161c;
  --ink-mid: #4b4853;
  --ink-soft: #676370;
  --ink-faint: #99949f;

  --accent: #b4531f;
  --accent-light: #e08a4a;

  --line: #e2ddd3;

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  --wrap: 1080px;
  --measure: 46rem;     /* comfortable centred text column */
  --measure-tight: 38rem;
  --gutter: clamp(1.5rem, 1rem + 3vw, 3rem);
  --block-y: clamp(2.35rem, 1.9rem + 2vw, 3.85rem);

  --r-md: 18px;
  --r-lg: 30px;

  --shadow-tile: 0 1px 2px rgba(23, 22, 28, 0.04), 0 14px 30px -20px rgba(23, 22, 28, 0.25);
  --shadow-tile-hi: 0 2px 4px rgba(23, 22, 28, 0.05), 0 26px 46px -24px rgba(23, 22, 28, 0.32);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =============================== 2. BASE =============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -0.005em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

dl,
dd {
  margin: 0;
}

svg {
  display: block;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

figure {
  margin: 0;
}

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

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

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

/* ============================= 3. BACKDROP ============================= */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.backdrop__glow {
  position: absolute;
  top: -34vw;
  left: 50%;
  translate: -50% 0;
  width: 80vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 138, 74, 0.2), rgba(224, 138, 74, 0) 66%);
  filter: blur(26px);
}

.backdrop__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 22, 28, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.4;
  mask-image: radial-gradient(70% 50% at 50% 1%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 50% at 50% 1%, #000, transparent 72%);
}

.backdrop__grain {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 38%, var(--accent-light) 62%, var(--ink) 100%);
}

/* ============================== 4. HEADER ============================== */
/* The wordmark size and the top padding are held as variables because the
   contact box positions itself against both — see .contact below. */
.header {
  --header-pad-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --wordmark-size: clamp(1.9rem, 1.35rem + 2.2vw, 3.1rem);

  /* anchors the contact box to the full viewport width, not the .wrap column */
  position: relative;
  padding-block: var(--header-pad-top) clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Contact box, pinned to the top right corner of the viewport while the
   wordmark stays centred.

   It is a child of .header rather than of the inner .wrap, because .wrap is
   itself position: relative and max-width: 1080px — inside it, `right` resolves
   against the content column and the box stops hundreds of pixels short of the
   corner on a wide screen. Against .header, whose padding box spans the full
   viewport width, `right` is measured from the viewport edge.

   Vertically it centres on the first line of the wordmark — the company name —
   rather than on the wordmark block as a whole, which would pull it downward by
   half the height of the "Private Limited" subline. The name's line box is
   1.1em tall (the .wordmark line-height), so its midpoint is 0.55em below the
   header's top padding. */
.contact {
  position: absolute;
  top: calc(var(--header-pad-top) + (var(--wordmark-size) * 0.55));
  right: var(--gutter);
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.15rem 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(253, 252, 250, 0.72);
  box-shadow: var(--shadow-tile);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  /* digits need room, and the country-code gap has to stay legible */
  letter-spacing: 0.01em;
  word-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    box-shadow 0.35s var(--ease), translate 0.35s var(--ease);
}

.contact__ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(180, 83, 31, 0.1);
  color: var(--accent);
  transition: background 0.35s var(--ease);
}

.contact__ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact:hover {
  border-color: rgba(180, 83, 31, 0.4);
  background: var(--card);
  box-shadow: var(--shadow-tile-hi);
}

.contact:hover .contact__ico {
  background: rgba(180, 83, 31, 0.18);
}

.wordmark {
  font-size: var(--wordmark-size);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.wordmark__sub {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink-faint);
  font-size: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* =============================== 5. INTRO =============================== */
.intro {
  padding-top: clamp(1.5rem, 1.25rem + 2.5vw, 3.25rem);
  padding-bottom: clamp(2rem, 1.75rem + 1.5vw, 3.25rem);
}

.intro__title {
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.85rem + 3.8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.intro__title em {
  display: block;
  color: var(--accent);
  font-style: italic;
  /* italic is only loaded at 500/600 — keep within that to avoid faux bold */
  font-weight: 600;
}

/* hand-drawn underline, centred beneath the italic line */
.flourish {
  display: block;
  width: min(62%, 17rem);
  margin: 0.2em auto clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  color: var(--accent-light);
}

.flourish svg {
  width: 100%;
  height: 0.5rem;
  overflow: visible;
}

.intro__text {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--ink-mid);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.66;
}

.intro__text--sub {
  max-width: var(--measure-tight);
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ============================== 6. BLOCKS ============================== */
.block {
  position: relative;
  padding-block: var(--block-y);
  counter-increment: chapter;
}

.block--tint {
  background: linear-gradient(180deg, var(--paper-warm), rgba(242, 237, 228, 0.25));
}

/* --------------------- 6a. SECTION BREAK (the dinkus) --------------------- */
/* Replaces the plain full-bleed hairline that used to separate sections: a short
   inset rule that fades out at both ends, broken in the middle by three amber
   dots. Drawn with the two pseudo-elements of each section rather than markup at
   every boundary, so there is no repeated ornament in the HTML and nothing extra
   for a screen reader to announce.

   Each section paints the break at its own top edge, which is the boundary with
   the section before it. .block covers the five numbered sections (the first of
   them also closes off the intro), and .outro and .footer carry the last two
   boundaries, so every seam on the page gets the same treatment. */
.block,
.outro,
.footer {
  position: relative;
}

/* The rule carries a fixed 52px gap at dead centre for the dots to sit in.
   The stops are calc(50% ± 26px) rather than percentages so the gap keeps its
   size as the rule narrows on small screens — a percentage gap would shrink
   below the dot cluster and the rule would run straight through it. */
.block::before,
.outro::before,
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: min(34rem, calc(100% - 2 * var(--gutter)));
  height: 1px;
  /* warms from the neutral hairline colour toward a faint accent as it nears the
     gap, so the rule and the dots read as one ornament */
  background: linear-gradient(90deg,
      transparent 0%,
      var(--line) 18%,
      rgba(180, 83, 31, 0.3) calc(50% - 26px),
      transparent calc(50% - 26px),
      transparent calc(50% + 26px),
      rgba(180, 83, 31, 0.3) calc(50% + 26px),
      var(--line) 82%,
      transparent 100%);
}

/* Three dots from one element: the box is the accent centre dot, and the two
   box-shadows are the flanking pair. Their negative spread is what makes them
   smaller than the centre, and at ±16.5px the cluster stays inside the 26px
   half-gap above. */
.block::after,
.outro::after,
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    -15px 0 0 -1.5px var(--accent-light),
    15px 0 0 -1.5px var(--accent-light);
}


.block__head {
  margin-bottom: clamp(1.6rem, 1.35rem + 1vw, 2.4rem);
}

.heading {
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

/* chapter numeral above, short rule below */
.heading::before {
  content: counter(chapter, decimal-leading-zero);
  display: block;
  margin-bottom: 0.9rem;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.heading::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 1.15rem auto 0;
  background: linear-gradient(90deg, rgba(180, 83, 31, 0.15), var(--accent), rgba(180, 83, 31, 0.15));
}

.block__note {
  max-width: 42ch;
  margin: 1.1rem auto 0;
  color: var(--ink-faint);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ========================= 7. ROWS (boxed cards) ========================= */
/* Subsections lay out as a flex row of equal-width boxes in every section. */
.rows {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.15rem);
  margin-inline: auto;
  counter-reset: item;
}

/* Three per line: each box is a fixed third, so a fourth cannot fit alongside
   and wraps down instead. The column count is set explicitly at each breakpoint
   rather than emerging from a min-width, because the "last box is alone on its
   line" rule further down has to infer line breaks from the item count — and
   that inference is only sound if the number of columns is known exactly.
   flex-grow stays 0 so boxes never stretch except where that rule says to. */
.row {
  position: relative;
  flex: 0 1 calc(33.333% - 1rem);
  min-width: 0;
  padding: clamp(1.45rem, 1.25rem + 0.6vw, 1.85rem) clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--card), rgba(248, 245, 240, 0.85));
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  counter-increment: item;
  transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* gradient hairline across the top edge, on hover */
.row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.row::before {
  content: counter(item, decimal-leading-zero);
  display: block;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}

.row:hover {
  translate: 0 -4px;
  border-color: rgba(180, 83, 31, 0.32);
  box-shadow: var(--shadow-tile-hi);
}

.row:hover::before,
.row:hover::after {
  opacity: 1;
}

/* icon badge, shared by boxed rows and tiles. Line art inherits currentColor,
   so a single colour declaration drives the whole glyph. */
.ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 0.9rem;
  border: 1px solid rgba(180, 83, 31, 0.2);
  border-radius: 50%;
  background: rgba(180, 83, 31, 0.06);
  color: var(--accent);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), scale 0.4s var(--ease);
}

.ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.row:hover .ico,
.tile:hover .ico {
  border-color: rgba(180, 83, 31, 0.45);
  background: rgba(180, 83, 31, 0.12);
  scale: 1.06;
}

.row dt {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
  letter-spacing: -0.018em;
}

.row dd {
  max-width: 32rem;
  margin-top: 0.5rem;
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.62;
}

/* A box left on its own on the final line stretches to fill the row rather than
   sitting at a third of the width. "Alone on its line" is not expressible in
   CSS, so it is inferred from position: at three columns the last box is alone
   when its index is 3n+1; at two columns, when it is 2n+1. Each rule is scoped
   to the breakpoint that sets that column count, so the two always agree. */
@media (min-width: 900px) {
  .row:nth-child(3n + 1):last-child {
    flex-basis: 100%;
  }

  /* a wider box earns a wider measure, or the copy runs as a tall narrow
     column with empty space either side */
  .row:nth-child(3n + 1):last-child dd {
    max-width: 46rem;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .row:nth-child(2n + 1):last-child {
    flex-basis: 100%;
  }

  .row:nth-child(2n + 1):last-child dd {
    max-width: 40rem;
  }
}

/* ============================== 8. FIGURES ============================== */
/* Illustration opening a section: it sits between the heading block and the
   boxes, so the spacing hangs below it rather than above. .block__head already
   supplies the gap between the heading and the figure. */
.block__figure {
  margin-bottom: clamp(1.85rem, 1.5rem + 1.5vw, 2.85rem);
}

.block__figure img {
  width: min(100%, 27rem);
}

/* ============================== 9. TILES ============================== */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.35rem);
  counter-reset: tile;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.6rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--card), rgba(248, 245, 240, 0.85));
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  counter-increment: tile;
  transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* gradient hairline across the top edge */
.tile::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

/* numeral sits above the title */
.tile::after {
  content: counter(tile, decimal-leading-zero);
  order: -1;
  margin-bottom: 0.85rem;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}

.tile:hover {
  translate: 0 -5px;
  border-color: rgba(180, 83, 31, 0.32);
  box-shadow: var(--shadow-tile-hi);
}

.tile:hover::before,
.tile:hover::after {
  opacity: 1;
}

.tile h3 {
  margin-bottom: 0.6rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.tile p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.62;
}

/* ============================== 10. PANEL ============================== */
.outro {
  padding-block: clamp(2.35rem, 1.9rem + 2vw, 3.85rem);
}

.panel {
  position: relative;
  padding: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(1.75rem, 1rem + 4vw, 4.25rem);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 130% at 50% 0%, #211f28 0%, var(--ink) 58%);
  color: #f4f1ec;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px -34px rgba(23, 22, 28, 0.55);
}

.panel__glow {
  position: absolute;
  bottom: -46%;
  left: 50%;
  translate: -50% 0;
  z-index: -1;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 138, 74, 0.28), rgba(224, 138, 74, 0) 64%);
}

.panel__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(244, 241, 236, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 236, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 85% at 50% 4%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 85% at 50% 4%, #000, transparent 78%);
}

/* illustrated mark above the closing headline */
.panel__mark {
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 3.25rem + 1.5vw, 4.75rem);
  margin: 0 auto 1.5rem;
  color: var(--accent-light);
}

.panel__mark svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel__title {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.032em;
}

.panel__text {
  max-width: 48ch;
  margin-inline: auto;
  color: rgba(244, 241, 236, 0.74);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.panel__text--sub {
  max-width: 44ch;
  margin-top: 1.1rem;
  color: rgba(244, 241, 236, 0.5);
  font-size: 1rem;
}

/* ============================== 11. FOOTER ============================== */
/* Reads as a closing colophon rather than a line of small print: the name over
   its tracked legal suffix, the four services as chips, and a baseline row
   carrying the phone number and the copyright. */
.footer {
  /* keeps the wash's negative z-index inside the footer, so it layers above the
     fixed .backdrop (also z-index: -1) instead of vanishing behind it */
  isolation: isolate;
  padding-block: clamp(2.6rem, 2.2rem + 1.4vw, 3.6rem) clamp(2rem, 1.75rem + 1vw, 2.75rem);
}

/* Amber light rising from just below the bottom edge over a paper gradient that
   warms as it descends. Sized with `inset: 0` rather than an oversized blurred
   circle so it can never widen the page — the footer is not clipped, because
   overflow: hidden here would cut the section-break ornament in half. */
.footer__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 130% at 50% 124%, rgba(224, 138, 74, 0.18), rgba(224, 138, 74, 0) 72%),
    linear-gradient(to bottom, rgba(242, 237, 228, 0), rgba(242, 237, 228, 0.92));
}

.footer__name {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.15;
}

/* same tracked-uppercase treatment as the header wordmark's subline */
.footer__legal {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-faint);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* A list rather than one string with "·" typed between the names: the chips do
   the separating visually, nothing extra is read out, and a name is never split
   across two lines when the row wraps. */
.footer__services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  max-width: 32rem;
  margin: 1.4rem auto 0;
  padding: 0;
  list-style: none;
}

.footer__services li {
  padding: 0.32rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(253, 252, 250, 0.7);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Baseline row: phone number, separator dot, copyright. Wraps to two lines on a
   narrow screen, which is why the gap is set per axis. */
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.85rem;
  max-width: 30rem;
  margin: clamp(1.6rem, 1.35rem + 0.8vw, 2.1rem) auto 0;
}

.footer__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-mid);
  font-size: 0.8125rem;
  font-weight: 600;
  /* digits need room, and the country-code gap has to stay legible */
  letter-spacing: 0.02em;
  word-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.35s var(--ease);
}

.footer__tel-ico {
  color: var(--accent);
}

.footer__tel-ico svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__tel:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(180, 83, 31, 0.4);
  text-underline-offset: 5px;
}

/* separator between the phone number and the copyright; stays in flow so a wrap
   leaves it at the end of the first line instead of dangling into the margin */
.footer__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

.footer__copy {
  color: var(--ink-faint);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ============================ 12. RESPONSIVE ============================ */
/* Column counts for the boxes are set here and must stay in step with the
   "alone on the final line" rules in section 7. */
@media (max-width: 899px) {
  .trio {
    grid-template-columns: 1fr 1fr;
  }

  /* two columns */
  .row {
    flex-basis: calc(50% - 0.6rem);
  }
}

/* drop the contact box below the wordmark before the two can collide
   (inline-flex, so the centred text alignment centres it) */
@media (max-width: 760px) {
  .contact {
    position: static;
    translate: none;
    margin-top: 1.15rem;
  }
}

@media (max-width: 640px) {
  .flourish {
    width: min(74%, 14rem);
  }

  .trio {
    grid-template-columns: 1fr;
  }
}

/* one column — stack rather than squeezing two into a phone width */
@media (max-width: 599px) {
  .row {
    flex-basis: 100%;
  }

  .backdrop__dots {
    opacity: 0.28;
  }
}

/* ============================== 13. MOTION ============================== */
/* Scroll reveal. Elements carrying data-reveal start faded and shifted down;
   assets/js/reveal.js adds .is-revealed as each enters the viewport, once.

   Gated behind .js on <html> so that with scripting unavailable, nothing is
   ever hidden. Uses `transform`, not `translate`, so it composes with the
   `translate` used by the card hover lift instead of fighting it. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* stagger for items that enter together */
.js [data-reveal="1"] {
  transition-delay: 0.1s;
}

.js [data-reveal="2"] {
  transition-delay: 0.2s;
}

.js [data-reveal="3"] {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }

  /* never leave text hidden behind a transition that will not run */
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .backdrop,
  .topbar {
    display: none;
  }

  body {
    background: #fff;
  }

  .panel {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    box-shadow: none;
  }

  .panel__text {
    color: #333;
  }
}