/* ==========================================================================
   Ampor Solution — redesign mockup
   Built from the Design canvas "Ampor Solution Website".

   The canvas is a fixed 1440px artboard with inline styles. This is the same
   design expressed as a responsive system: every fixed px in the artboard
   became either a token, a fluid clamp() or a breakpoint rule. Nothing here
   is inline, so one edit changes every page.
   ========================================================================== */

:root {
  /* --- colour, straight from the canvas ---------------------------------- */
  --paper:      #F5F5F3;   /* page ground, warm off-white                    */
  --ink:        #1D1D1F;   /* all body text; also the dark section ground    */
  --ink-deep:   #111216;   /* the darker band behind the services grid       */
  --navy:       #243552;   /* selected-work band, card 04                    */
  --blue:       #0768DB;   /* the accent: links, eyebrows, the dot           */
  --sky:        #6FA6F2;   /* large blue fields, closing band, card 01       */
  --sky-pale:   #DCE6F2;   /* card 03, quiet fills                           */
  --sky-mid:    #9CBDEB;   /* diagram dots                                   */
  --sand:       #E8D9BF;   /* the cream: service band, emphasis on dark      */
  --muted:      #595C64;   /* secondary text on paper           6.13:1       */
  --on-dark:    #C9CCD3;   /* secondary text on ink            10.47:1       */
  --line:       #E0E0DC;   /* hairline rules                                 */

  /* --- type -------------------------------------------------------------- */
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Display sizes are fluid: the artboard value is the cap, the vw figure is
     that value divided by 1440 so it tracks the design exactly as it shrinks. */
  --d1: clamp(42px, 7.8vw,  112px);   /* hero h1, closing h2                 */
  --d2: clamp(38px, 6.1vw,   88px);   /* section h2                          */
  --d3: clamp(34px, 5.6vw,   80px);   /* section h2, smaller                 */
  --d4: clamp(32px, 5.0vw,   72px);   /* process h2                          */
  --d5: clamp(28px, 3.9vw,   56px);   /* project h3                          */
  --d6: clamp(24px, 2.9vw,   40px);   /* card h3                             */

  /* --- layout ------------------------------------------------------------ */
  --gutter: clamp(20px, 5.5vw, 80px);
  --radius: 28px;
  --radius-sm: 18px;
}

/* --------------------------------------------------------------- reset --- */

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

html { scroll-behavior: smooth; scroll-padding-top: 104px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

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

/* The browser's own [hidden] rule is weaker than any display declaration, so
   an element carrying both -- the contact page's draft panel is display:flex
   -- would show before the script ever revealed it. This wins. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
/* The ring has to be visible on whatever it lands on, and blue is not. Measured
   against each ground: blue on navy 2.35:1, blue on sky 2.10:1 -- both below the
   3:1 a focus indicator needs. Sand fixes navy (8.86:1) but would make sky
   WORSE (1.80:1), because sky is a light ground, so sky gets ink (6.74:1).
   Paper panels keep blue: 4.79:1 on paper, 4.15:1 on the pale panel. */
.on-dark :focus-visible, .band-dark :focus-visible,
.band-navy :focus-visible, .panel-navy :focus-visible { outline-color: var(--sand); }
.band-sky :focus-visible { outline-color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 14px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- primitives --- */

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  margin: 0;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
}
/* Lighten on dark grounds. .band-ink and .panel-navy were missing, which left
   the Selected work and Command Center labels at 3.22:1 and 2.35:1.
   Deliberately NOT .panel-pale: that is a light ground, and sand on it is
   ~1.06:1. It gets ink instead, on the line below. */
.band-dark .eyebrow, .band-navy .eyebrow,
.band-ink .eyebrow, .panel-navy .eyebrow { color: var(--sand); }
.panel-pale .eyebrow { color: var(--ink); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; margin: 0; }
h1 { font-size: var(--d1); line-height: .95; }
h2 { font-size: var(--d2); line-height: 1; }
h3 { font-size: var(--d6); line-height: 1.05; letter-spacing: -.03em; }
em { font-style: italic; }

.lead { margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; }
.body { margin: 0; font-size: 17px; line-height: 1.75; color: var(--muted); }
/* Same list, same reason: the one paragraph describing Command Center sat on a
   navy card in the grey meant for paper, at 1.84:1. Again NOT .panel-pale --
   the three paragraphs in the contact panel are --muted on pale at 5.30:1,
   which already passes, and --on-dark there would be 1.27:1. */
.band-dark .body, .band-navy .body,
.band-ink .body, .panel-navy .body { color: var(--on-dark); }

/* Pills and buttons. Every one clears 44px without needing a min-height
   patch, because the design's own heights are 46px and up. */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 30px; border-radius: 99px;
  font: 700 16px var(--sans); white-space: nowrap;
  border: 1.5px solid transparent;
  transition: filter .2s, background-color .2s, color .2s;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-sky   { background: var(--sky);  color: var(--ink); }
.btn-ink   { background: var(--ink);  color: var(--paper); }
.btn-sand  { background: var(--sand); color: var(--ink); }
.btn-ghost { border-color: var(--paper); color: var(--paper); font-weight: 600; }
.btn-sm    { height: 46px; padding: 0 22px; font-size: 14px; font-weight: 650; gap: 10px; }
.btn .arrow { color: var(--sand); }
.btn-sky .arrow, .btn-sand .arrow { color: inherit; }

.tag {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 99px;
}
.tag-sky  { background: var(--sky); color: var(--ink); }
.tag-line { border: 1.5px solid var(--sand); color: var(--sand); }
.tag-sand { background: var(--sand); color: var(--ink); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; font-size: 16px; font-weight: 650;
}
.arrow-link .arrow { color: var(--blue); }
.band-dark .arrow-link .arrow, .band-navy .arrow-link .arrow { color: var(--sand); }

/* ------------------------------------------------------------- the mark --- */

.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 26px; width: auto; }

/* ---------------------------------------------------------------- bands --- */

.band        { padding-top: clamp(64px, 7vw, 110px); padding-bottom: clamp(64px, 7vw, 110px); }
.band-dark   { background: var(--ink-deep); color: var(--paper); }
.band-ink    { background: var(--ink);      color: var(--paper); }
.band-navy   { background: var(--navy);     color: var(--paper); }
.band-sky    { background: var(--sky);      color: var(--ink); }
.band-sand   { background: var(--sand);     color: var(--ink); }

/* --------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 88px;
  padding-top: 12px; padding-bottom: 12px;
}
.main-nav { display: flex; gap: clamp(18px, 2.8vw, 40px); font-size: 15px; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.main-nav a[aria-current] {
  color: var(--blue); font-weight: 650;
  flex-direction: column; justify-content: center; gap: 4px;
}
.main-nav a[aria-current]::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sky);
}

/* ----------------------------------------------------------- breadcrumb --- */

.breadcrumb {
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--muted);
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb .sep { color: var(--blue); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 650; }

/* ----------------------------------------------------------------- hero --- */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 4vw, 64px); align-items: center;
  padding-top: clamp(48px, 4vw, 56px); padding-bottom: clamp(56px, 5vw, 72px);
}
.hero-copy { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 30px); max-width: 720px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .lead { max-width: 520px; color: var(--on-dark); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* The hero figure is a composition of flat shapes behind a round illustration.
   Everything is a percentage of one aspect-locked box, so it scales whole
   instead of breaking apart. */
.hero-figure { margin: 0; width: 100%; }
.hero-frame { display: block; position: relative; aspect-ratio: 560 / 680; width: 100%; }
.hero-frame .arch {
  position: absolute; left: 2%; bottom: 6.5%; width: 96%; height: 40%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--sky);
}
.hero-frame .rule-sand { position: absolute; left: 0; bottom: 5.3%; width: 100%; height: 8px; background: var(--sand); }
.hero-frame .rule-navy { position: absolute; left: 0; bottom: 2.9%; width: 100%; height: 4px; background: var(--navy); }
.hero-frame .disc {
  /* 440x440 inside the 560x680 frame, stated as percentages of BOTH axes.
     aspect-ratio alone is not enough here: the img carries width/height
     attributes, and without an explicit height those win and stretch it into
     an ellipse. The parent is aspect-locked, so these percentages stay round. */
  position: absolute; left: 10.71%; top: 4.41%;
  width: 78.57%; height: 64.71%;
  border-radius: 50%; object-fit: cover;
  border: 10px solid var(--sand);
}
.hero-frame .stamp {
  position: absolute; right: 0; top: 1.47%; width: 22.14%; height: 18.24%;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--serif); font-size: clamp(13px, 1.4vw, 20px); line-height: 1.1;
  letter-spacing: -.02em;
}
.hero-figure figcaption { margin-top: 14px; font-size: 13px; color: var(--on-dark); }

/* --------------------------------------------------------- service band --- */

.service-band {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.4vw, 20px); flex-wrap: wrap;
  padding-top: 28px; padding-bottom: 28px;
  font-family: var(--serif); font-size: clamp(17px, 1.9vw, 27px);
  letter-spacing: -.03em; text-align: center;
}
.service-band .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); flex: none; }

/* ------------------------------------------------------------ two-up -- */

.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5.5vw, 80px); align-items: center;
}
.split.top { align-items: start; }
.split-copy { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); align-items: flex-start; }
.split-copy .big { margin: 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; max-width: 520px; }

.diagram-card {
  margin: 0; background: var(--ink); color: var(--paper);
  border-radius: 36px; padding: clamp(20px, 2.5vw, 36px);
  display: flex; flex-direction: column; gap: 16px;
}
.diagram-card svg { width: 100%; height: auto; }
.diagram-card figcaption { font-size: 14px; line-height: 1.7; color: var(--on-dark); }

/* ------------------------------------------------------- services grid --- */

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.section-head .stack { display: flex; flex-direction: column; gap: 20px; }

.service-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px; margin-top: clamp(32px, 4vw, 48px);
}
.service-card {
  display: flex; flex-direction: column; gap: 18px;
  border-radius: var(--radius); padding: 14px 14px 24px;
  min-height: 440px; transition: transform .2s;
}
.service-card:hover { transform: translateY(-6px); text-decoration: none; }
.service-card img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm); }
.service-card .card-body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px; flex-grow: 1; }
.service-card .card-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 22px; }
.service-card .card-name { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.08; letter-spacing: -.03em; }
.service-card .card-desc { font-size: 15px; line-height: 1.5; }

.card-sky   { background: var(--sky);      color: var(--ink); }
.card-sand  { background: var(--sand);     color: var(--ink); }
.card-pale  { background: var(--sky-pale); color: var(--ink); }
.card-navy  { background: var(--navy);     color: var(--paper); }
.card-paper { background: var(--paper);    color: var(--ink); }

/* -------------------------------------------------------------- process --- */

.steps { margin: clamp(36px, 4.5vw, 64px) 0 0; padding: 0; list-style: none;
         display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); }
.steps li { display: flex; flex-direction: column; gap: 16px; }
.step-num {
  width: clamp(84px, 8.4vw, 120px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(44px, 4.5vw, 64px);
}
.step-1 { background: var(--sky);  color: var(--ink); }
.step-2 { background: var(--sand); color: var(--ink); }
.step-3 { background: var(--ink);  color: var(--sand); }
.steps h3 { margin: 8px 0 0; font-family: var(--sans); font-size: 23px; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.steps p { margin: 0; max-width: 340px; }

/* -------------------------------------------------------- selected work --- */

.work-split { display: grid; grid-template-columns: minmax(0, 820px) minmax(0, 1fr);
              gap: clamp(32px, 4.4vw, 64px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.work-frame { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.work-frame .shot { position: relative; padding: 16px; background: var(--ink); border-radius: var(--radius); }
.work-frame .shot img { width: 100%; height: auto; border-radius: 14px; }
.work-frame .shot .tag { position: absolute; left: 32px; bottom: 32px; font-size: 12px; letter-spacing: .1em; }
.work-frame figcaption { font-size: 14px; line-height: 1.7; color: var(--on-dark); max-width: 720px; }
.work-copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; padding-top: 24px; }
.work-copy h3 { font-size: var(--d5); line-height: 1.02; letter-spacing: -.04em; }

/* -------------------------------------------------------------- closing --- */

.closing { position: relative; overflow: hidden;
           display: flex; flex-direction: column; justify-content: center;
           gap: clamp(24px, 2.6vw, 36px); }
.closing > * { position: relative; }
.closing .blob-sand {
  position: absolute; right: -60px; bottom: -200px; width: 560px; height: 560px;
  border-radius: 50%; background: var(--sand); pointer-events: none;
}
.closing .blob-ink {
  position: absolute; right: 180px; top: 90px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--ink); pointer-events: none;
}
.closing h2 { font-size: var(--d1); line-height: .98; letter-spacing: -.055em; }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.email-link {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--serif); font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.02em;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- footer --- */

.site-footer { background: var(--paper); padding-top: 56px; padding-bottom: 32px; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(28px, 3.4vw, 48px); }
.footer-identity { display: flex; flex-direction: column; gap: 20px; }
.footer-identity p { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer-contact .eyebrow { font-size: 12px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; }
.footer-contact address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--muted); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; align-content: start; font-size: 15px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px;
  font-size: 13px; color: var(--muted);
}
.footer-bottom .powered { display: inline-flex; align-items: center; gap: 8px; }
/* 26px, not 20: the badge's own READ-ME sets 24px as the minimum, below which
   the dot stops reading, and recommends 32-48px. */
.footer-bottom .powered img { height: 26px; width: auto; }

/* ====================================================== responsive ======== */

@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-split { grid-template-columns: minmax(0, 1fr); }
  .work-copy { padding-top: 0; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { max-width: 480px; margin-inline: auto; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps p { max-width: none; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  .site-header { position: static; flex-wrap: wrap; gap: 12px 20px; }
  .main-nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { min-height: 0; }
  .closing .blob-ink { display: none; }
  .closing .blob-sand { right: -180px; bottom: -280px; }
}

@media (max-width: 520px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card img { height: 180px; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions, .closing-actions { flex-direction: column; align-items: stretch; }
  .email-link { justify-content: center; }
  .footer-nav { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .site-header, .btn, .hero-figure, .closing .blob-sand, .closing .blob-ink { display: none !important; }
  body { background: #fff; color: #000; }
  .band-dark, .band-ink, .band-navy, .band-sky, .band-sand { background: #fff !important; color: #000 !important; }
}

/* ====================================================== motion =========== */
/* Taken from the canvas. Everything here is decoration: the page is complete
   and readable with all of it switched off, which is what the
   prefers-reduced-motion block at the end does. */

@keyframes am-rise    { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes am-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-pop     { from { opacity: 0; transform: scale(.86); }      to { opacity: 1; transform: none; } }
@keyframes am-float   { 0%, 100% { transform: translateY(0); }  50% { transform: translateY(-12px); } }
@keyframes am-drift   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }
@keyframes am-marquee { to { transform: translateX(-50%); } }
@keyframes am-nudge   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -4px); } }
@keyframes am-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* The hero plays once on load, staggered. `backwards` holds the start state
   during the delay, so nothing flashes in before its turn. */
.hero h1            { animation: am-rise 1s   cubic-bezier(.2,.7,.2,1) .1s backwards; }
.hero h1 em         { display: inline-block; animation: am-rise 1s cubic-bezier(.2,.7,.2,1) .4s backwards; }
.hero .lead,
.hero .hero-tags,
.hero .includes     { animation: am-rise .9s  cubic-bezier(.2,.7,.2,1) .6s backwards; }
.hero .hero-actions { animation: am-rise .8s  cubic-bezier(.2,.7,.2,1) .8s backwards; }
.hero-figure        { animation: am-pop  1.2s cubic-bezier(.2,.7,.2,1) .3s backwards; }
.hero-frame .disc   { animation: am-float 7s ease-in-out 1.5s infinite; }
.hero-frame .arch   { animation: am-drift 11s ease-in-out infinite; }
.closing .blob-sand,
.closing .blob-ink  { animation: am-drift 12s ease-in-out infinite; }

.btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, filter .25s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(17,18,22,.22); }
.btn span[aria-hidden], .arrow-link span[aria-hidden] { display: inline-block; }
.btn:hover span[aria-hidden],
.arrow-link:hover span[aria-hidden] { animation: am-nudge .7s ease-in-out infinite; }

.service-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.service-card:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: 0 22px 44px rgba(17,18,22,.22); }

.steps .step-num { transition: transform .3s; }
.steps li:hover .step-num { animation: am-pulse 1.2s ease-in-out infinite; }

/* Scroll-driven reveals, where the browser supports them. No JavaScript, and
   no fallback needed: without support the content is simply already visible. */
@supports (animation-timeline: view()) {
  .band h2, .band figure, .offer-grid > li, .steps > li, .term-card {
    animation: am-rise linear both;
    animation-timeline: view(); animation-range: entry 0% cover 28%;
  }
  .service-card {
    animation: am-fade linear both;
    animation-timeline: view(); animation-range: entry 0% cover 25%;
  }
  /* The hero plays its own timed entrance, so it must not also be scroll-driven. */
  .hero h1, .hero figure { animation-timeline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------ marquee strip ---- */

.marquee-band { overflow: hidden; }
.marquee {
  display: flex; align-items: center; gap: 20px; width: max-content;
  animation: am-marquee 38s linear infinite;
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: -.03em; white-space: nowrap;
}
.marquee:hover { animation-play-state: paused; }
.marquee-run { display: flex; align-items: center; gap: 20px; padding-right: 20px; }
.marquee .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); flex: none; }

/* ------------------------------------------------- service page pieces --- */

.includes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.includes li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.5; }
.includes .bullet { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sand); }

/* The service-page hero figure: same frame, a tall arched image instead of a disc. */
.hero-frame.tall { aspect-ratio: 520 / 660; }
.hero-frame .blob-a { position: absolute; right: 0; top: 0; width: 42.3%; aspect-ratio: 1; border-radius: 50%; background: var(--sky); }
.hero-frame .blob-b { position: absolute; left: 0; bottom: 9.1%; width: 28.8%; aspect-ratio: 1; border-radius: 50%; background: var(--navy); }
.hero-frame .arched {
  position: absolute; left: 11.5%; top: 6.1%; width: 76.9%; height: 81.8%;
  border-radius: 200px 200px 28px 28px; object-fit: cover;
  border: 10px solid var(--sand);
}

/* The three coloured cards under "how we can help" / "what we offer". */
.offer-grid { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none;
              display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.offer-card { border-radius: var(--radius); padding: clamp(24px, 2.6vw, 36px);
              display: flex; flex-direction: column; gap: 22px; }
.offer-card .num {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 28px; letter-spacing: -.02em;
}
.offer-card h3 { margin: 12px 0 0; font-size: var(--d6); }
.offer-card p { margin: 0; font-size: 18px; line-height: 1.65; }

/* FAQ: a dark band, heading beside a list of native <details>. No JavaScript. */
.faq { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 80px); align-items: start; }
.faq-intro { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.faq-list { border-top: 1px solid #3A3B42; }
.faq-list details { border-bottom: 1px solid #3A3B42; }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 88px; padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.02em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .mark {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--sand); color: var(--sand);
  display: flex; align-items: center; justify-content: center;
  font: 22px var(--sans); transition: transform .25s;
}
.faq-list .mark::before { content: "+"; }
.faq-list details[open] .mark { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 clamp(0px, 4vw, 64px) 28px 0; font-size: 17px; line-height: 1.7; color: var(--on-dark); }

.brief-note { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 720px; }
.brief-note h2 { font-size: var(--d5); }

.related { display: flex; flex-direction: column; gap: 20px; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; }
.related-links a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0 20px; border-radius: 99px; border: 1.5px solid var(--line);
  font-size: 15px; font-weight: 600;
}
.related-links a:hover { text-decoration: none; border-color: var(--ink); }

/* ------------------------------------------------------------- contact --- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.panel { border-radius: var(--radius); padding: clamp(24px, 3vw, 44px); }
.panel-navy { background: var(--navy); color: var(--paper); }
.panel-pale { background: var(--sky-pale); color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 14px; font-weight: 650; }
.field input, .field select, .field textarea {
  font: 16px/1.5 var(--sans); color: var(--ink); background: var(--paper);
  border: 1.5px solid #B9BDB4; border-radius: 10px; padding: 13px 14px; min-height: 48px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------- command centre ------ */

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(32px, 4vw, 48px); }
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.gallery .shot { position: relative; padding: 14px; background: var(--ink); border-radius: var(--radius); }
.gallery .shot img { width: 100%; height: auto; border-radius: 14px; }
.gallery figcaption { font-size: 14px; line-height: 1.7; color: var(--on-dark); }

/* --------------------------------------------------------------- 404 ----- */

.notfound { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 4vw, 64px); align-items: center; }
.notfound svg { width: 100%; height: auto; }

/* ------------------------------------------------ extra responsive ------- */

@media (max-width: 1100px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .notfound { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ marquee, motion off ---- */
/* This has to come after the .marquee rules above rather than inside the
   reduced-motion block higher up: same specificity, and the later rule wins.
   The strip is wider than the screen on purpose, because it travels. Frozen,
   whatever would have scrolled past the right edge is never readable, and the
   first word sits hard against the left edge. So with motion off it wraps
   inside the gutter, and the duplicate run -- which exists only to make the
   loop seamless -- goes away. */
@media (prefers-reduced-motion: reduce) {
  .marquee { width: auto; flex-wrap: wrap; justify-content: center;
             padding: 0 var(--gutter); }
  .marquee > span[aria-hidden="true"] { display: none; }
  .marquee-run { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  /* The run ends in a separator so the loop joins cleanly. Once it stops
     looping, that dot is just a dangling mark. */
  .marquee-run .dot:last-child { display: none; }
}

/* ============================================ gentle hover (every page) ==== */
/* Links in the menus get an underline that slides in instead of snapping on,
   and buttons give a small press. Only where there is a real mouse: on a
   phone, a hover state sticks after a tap. The reduced-motion block near the
   top already stops every transition for visitors who asked for less motion. */
@media (hover: hover) and (pointer: fine) {
  .main-nav a:not([aria-current]), .footer-nav a, .footer-contact a, .arrow-link {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 0 calc(50% + .8em);
    transition: background-size .35s cubic-bezier(.2,.7,.2,1);
  }
  .main-nav a:not([aria-current]):hover, .footer-nav a:hover,
  .footer-contact a:hover, .arrow-link:hover { text-decoration: none; background-size: 100% 1.5px; }
  .btn:active { transform: translateY(-1px) scale(.98); box-shadow: 0 6px 14px rgba(17,18,22,.18); }
}

/* ============================== welcome page scenes (index.html only) ==== */
/* Each part of the welcome page fills the screen, and the five service cards
   become one scene each: the drawing in a round frame, the words beside it.
   Same words, colours and fonts as the grid. Only the layout changes, and only
   when the visitor has not asked for less motion; the hooks (data-scene,
   data-scenes) exist on index.html alone. This is plain CSS, so it is already
   in place on the first paint: nothing jumps when motion.js starts. */
@media screen and (prefers-reduced-motion: no-preference) {
  html:not(.motion-off):not(.motion-calm) [data-scene]:not([data-scene="services"]) {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
  }
  html:not(.motion-off):not(.motion-calm) [data-scenes] {
    display: flex; flex-direction: column; gap: 0;
  }
  html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "slot body";
    align-items: center; gap: clamp(32px, 5vw, 80px);
    width: 100%; max-width: 1180px; margin: 11vh auto; margin-block: 11svh;
    min-height: min(78vh, 720px); min-height: min(78svh, 720px);
    padding: clamp(28px, 4vw, 64px); border-radius: 36px;
  }
  html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card:first-child { margin-top: 6svh; }
  html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card:hover {
    transform: translateY(-4px); box-shadow: 0 22px 44px rgba(17,18,22,.22);
  }
  html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card img {
    grid-area: slot; justify-self: center; align-self: center;
    --art: min(100%, 420px, 62svh); width: var(--art); height: auto; aspect-ratio: 1;
    border-radius: 50%; object-fit: cover;
  }
  /* The Property drawing has a key and two bushes near its corners, which the
     round frame would cut. Draw it a little smaller inside the frame, and fill
     the edge with the drawing's own sky and ground, so nothing is cut. The
     circle is a clip here, not rounded corners: rounded corners would also
     round the smaller drawing inside the padding. The slightly deeper bottom
     padding trims a sliver of plain ground, because browsers leave a thin sky
     line along the drawing's very bottom edge. */
  html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card img[src$="service-property.svg"] {
    padding: calc(var(--art) * .09) calc(var(--art) * .09) calc(var(--art) * .1);
    object-position: 50% 0;
    border-radius: 0; clip-path: circle(50%);
    background: linear-gradient(var(--sky) 0 79.7%, var(--sand) 79.7% 81%, var(--ink-deep) 81%);
  }
  html:not(.motion-off):not(.motion-calm) [data-scenes] .card-body { grid-area: body; gap: 18px; padding: 0; }
  html:not(.motion-off):not(.motion-calm) [data-scenes] .card-top { font-size: 26px; }
  html:not(.motion-off):not(.motion-calm) [data-scenes] .card-name { font-size: var(--d5); line-height: 1.02; letter-spacing: -.04em; }
  html:not(.motion-off):not(.motion-calm) [data-scenes] .card-desc { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 420px; }

  @media (min-width: 761px) {
    /* The header stays at the top on wider screens, so the hero shares the screen with it. */
    html:not(.motion-off):not(.motion-calm) [data-scene="hero"] { min-height: calc(100svh - 88px); }
  }
  @media (max-width: 900px) {
    html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card {
      grid-template-columns: minmax(0, 1fr); grid-template-areas: "slot" "body";
      align-content: center;
      gap: 28px; margin-block: 7svh; min-height: min(86svh, 760px);
      padding: 28px 24px 32px;
    }
    html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card img { --art: min(100%, 68vw, 320px); }
  }
  @media (max-width: 900px) and (orientation: landscape) {
    /* A phone held sideways, or a zoomed-in window: keep the drawing beside the
       words, so a focused card's name is never below the screen. */
    html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "slot body";
      gap: 24px; min-height: 0;
    }
    html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card img { --art: min(100%, 62svh); }
  }
}

/* ------------------------------------------- welcome page: text arrives --- */
/* motion.js adds .motion-armed to <html> once it is running, and marks only
   things that are still below the screen as waiting. Without the script, or
   after any error (it removes .motion-armed), all of this switches off and
   everything is simply visible. */
html.motion-armed .motion-reveal {
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.motion-armed .motion-wait { opacity: 0; transform: translate3d(0, 32px, 0); }
html.motion-armed .motion-wait.from-pop { transform: scale(.92); }
html.motion-armed .motion-wait.from-fade { transform: none; }
@media (min-width: 901px) {
  html.motion-armed .motion-wait.from-left  { transform: translate3d(-48px, 0, 0); }
  html.motion-armed .motion-wait.from-right { transform: translate3d(48px, 0, 0); }
}
html.motion-light .motion-reveal { transition-duration: .5s, .5s; transition-delay: calc(var(--i, 0) * 50ms); }
/* Whatever holds the keyboard focus is shown at once, never mid-fade. */
html.motion-armed .motion-reveal:focus-within { opacity: 1; transform: none; transition: none; }

/* The diagram's lines draw themselves from "Ampor" out to each service. */
html.motion-armed .motion-draw :is(path, line) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);
  transition-delay: calc(.35s + var(--i, 0) * 120ms);
}
html.motion-armed .motion-draw.is-drawn :is(path, line) { stroke-dashoffset: 0; }

/* These parts now arrive with the scenes, so they must not also run the
   older view() reveals from the motion section above. The hero keeps its own. */
html.motion-armed [data-scene]:not([data-scene="hero"]) :is(h2, figure, .steps > li),
html.motion-armed [data-scenes] .service-card { animation: none; }

@media print {
  .motion-wait { opacity: 1 !important; transform: none !important; }
  .motion-draw :is(path, line) { stroke-dashoffset: 0 !important; }
}

/* ------------------------------------------ welcome page: the blue dot --- */
/* motion.js adds one dot (full level) that glides from scene to scene, and
   invisible landing spots (.motion-pin) that tell it where to go. At the light
   level there is no gliding dot: each landing spot simply pops in when its
   scene arrives. The dot never catches clicks, and it passes under the header. */
.motion-dot {
  position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none;
  width: 0; height: 0; border-radius: 50%; border: 0 solid transparent;
  opacity: 0; will-change: transform;
}
.motion-pin { --i: 0; position: absolute; pointer-events: none; border-radius: 50%; aspect-ratio: 1; opacity: 0; transform: scale(.5); }
html.motion-full .motion-pin { visibility: hidden; transform: none; } /* measured, never seen */
html.motion-light .motion-pin {
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 140ms);
}
html.motion-light .motion-pin.is-on { opacity: 1; transform: none; }
.motion-pin.pin-fill { background: var(--blue); }
.motion-pin.pin-ring { border: 6px solid var(--blue); background: transparent; }
.card-navy .motion-pin.pin-ring { border-color: var(--sky); }

.hero-frame .pin-hero { left: 2%; top: 5%; width: 14%; }
html.motion-armed [data-scene="steps"] .steps li { position: relative; }
.steps .pin-step { left: calc(clamp(84px, 8.4vw, 120px) - 16px); top: 2px; width: 22px; }
.work-frame .shot .pin-corner { right: -18px; bottom: -18px; width: 56px; }
.closing .pin-closing { right: 24px; top: 28px; width: 40px; }
/* The ring sits in the drawing's own grid cell, 14px wider all round, and
   only exists with the scene layout. Its width always follows the drawing's. */
@media screen and (prefers-reduced-motion: no-preference) {
  html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card .pin-ring {
    position: relative; grid-area: slot; justify-self: center; align-self: center;
    width: calc(min(100%, 420px, 62svh) + 28px); margin: -14px;
  }
  @media (max-width: 900px) {
    html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card .pin-ring { width: calc(min(100%, 68vw, 320px) + 28px); }
  }
  @media (max-width: 900px) and (orientation: landscape) {
    html:not(.motion-off):not(.motion-calm) [data-scenes] > .service-card .pin-ring { width: calc(min(100%, 62svh) + 28px); }
  }
}

/* Light level: the picture gets its soft blue shape, the diagram's "Ampor" circle a small pulse. */
html.motion-light .work-frame .shot { transition: box-shadow .7s cubic-bezier(.2,.7,.2,1); }
html.motion-light .work-frame .shot.is-on { box-shadow: 18px 18px 0 0 var(--blue); }
html.motion-light .diagram-card.is-on circle[r="26"] {
  transform-box: fill-box; transform-origin: center;
  animation: am-pulse 1.2s ease-in-out .3s 2;
}

@media print {
  .motion-dot, .motion-pin { display: none !important; }
  [data-scenes] .service-card img { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-dot, .motion-pin { display: none !important; }
}

/* --------------------------- welcome page: soft wheel scrolling (Lenis) --- */
/* Lenis (MIT, vendor/lenis/LICENSE) smooths mouse-wheel scrolling on
   computers at the full motion level only; phones keep their own scrolling.
   These are Lenis's own recommended rules. While it runs, the browser's own
   smooth scrolling must be off, or the two would fight. */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ----------------------------------------------- small layout fixes ------- */
/* Between 1101 and 1160 pixels wide, the "Explore the project" button was
   wider than its column and pushed the page sideways. Its column is now never
   narrower than its widest item; the picture column gives way instead. */
@media (min-width: 1101px) {
  .work-split { grid-template-columns: minmax(0, 820px) minmax(min-content, 1fr); }
}

/* THE PRIVACY PAGE (/privacy): plain reading in one column, a short part with its heading for each
   subject. Only the brand's own colours (the variables above). */
.privacy-hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.privacy { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); max-width: 760px; }
.privacy-part { display: flex; flex-direction: column; gap: 16px; }
.privacy-part h2 { font-size: var(--d5); line-height: 1.05; letter-spacing: -.03em; }
.privacy-part ul { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 12px; }
.privacy-part li { font-size: 17px; line-height: 1.75; color: var(--muted); }
.privacy-part li::marker { color: var(--blue); }
.privacy-part li ul { margin-top: 10px; gap: 6px; }
.privacy-part a { color: var(--ink); }
.privacy-updated { margin: 0; font-size: 15px; color: var(--muted); }