/* ============================================================
   site.css — shared design language across katherineroot.com
   Centralized from the identical/near-identical <style> blocks that
   had accumulated across all 12 pages (root index + case study
   pages + casestudies/sideprojects index pages). Where a shared
   component's values diverged between pages, the homepage
   (index.html) version was kept as the source of truth here, and
   the pages that need a different value carry a small local
   override in their own <style> block (documented there).
   Genuinely page-specific / one-off CSS (homepage's hero/companies/
   screens/testimonials sections, per-page article content, etc.)
   is NOT here — it stays inline on the page that uses it.
   ============================================================ */

/* --- design tokens --- */
:root{
  --magenta:#FF2E93; --blue:#0074AF; --indigo:#1B45E8;
  --violet:#7B2FF7; --purple:#A614FE; --charcoal:#17140F; --cream:#FFF1D6;
  --lime:#bdf300;
  --accent:var(--lime);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* --- base resets / page shell --- */
*{box-sizing:border-box}
html{background:var(--lime);scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;overflow-x:hidden;color:#fff;font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
     -webkit-font-smoothing:antialiased;background:#f455a7;
     animation:bgCycle 200s ease-in-out infinite}
@keyframes bgCycle{
  0%,6%{background-color:#f455a7}
  20%,26%{background-color:#E81BBC}
  40%,46%{background-color:var(--purple)}
  60%,66%{background-color:var(--violet)}
  80%,86%{background-color:var(--blue)}
  100%{background-color:#f455a7}
}
a{color:inherit}
img{max-width:100%}

/* --- back-link: circular back button, every subpage (not homepage) --- */
.back-link{position:fixed;top:24px;left:24px;z-index:10}
.back-link a{--tilt:-3deg;display:flex;align-items:center;justify-content:center;
      width:48px;height:48px;border-radius:50%;border:2px solid #fff;color:#fff;
      text-decoration:none;transition:transform .3s var(--spring),background-color .2s ease,color .2s ease}
.back-link a:hover,.back-link a:focus-visible{transform:translateY(-4px) rotate(var(--tilt));
      background:var(--lime);color:#000;border-color:var(--lime);outline:none}
.back-link svg{width:22px;height:22px}

/* --- corner sparkle: a subtle decorative fixture at the very top of
   every page, shared site-wide. position:absolute (anchored to the
   page, not the viewport) so it scrolls away with the top of the page
   and is only visible when you're up there — deliberately not
   position:fixed, which would keep it pinned on screen the whole time
   you scroll. Just a slow opacity breathe, kept gentle so it reads as
   ambient shimmer rather than something demanding attention. Same
   footprint as .secret-menu__hotspot below, which it visually anchors
   the hover/tap zone to. --- */
.corner-sparkle{position:absolute;top:0;right:0;width:clamp(120px,28vw,280px);height:auto;
      z-index:1;pointer-events:none;
      animation:sparkleBreathe 5s ease-in-out infinite}
/* only bleeds off the TOP edge (translateY), never off the right —
   a transform still inflates the page's scrollable overflow area same
   as a negative position offset would (verified empirically), and a
   rightward bleed here was the recurring source of the "green bar"
   edge-overflow bug, so the X offset stays at 0. */
@keyframes sparkleBreathe{
  0%,100%{opacity:.7;transform:translate(0,-12px) scale(1)}
  50%{opacity:1;transform:translate(0,-12px) scale(1.04)}
}
@media (prefers-reduced-motion: reduce){
  .corner-sparkle{animation:none;opacity:.85;transform:translate(0,-12px)}
}

/* --- corner menu: brought back from secret-menu.snapshot.html at the
   user's request, restyled with Lucide's real square-menu/x icons in
   place of the old hand-drawn hamburger/X, and shared site-wide (every
   page gets the same trigger in the top-right corner, opening the same
   full-height lime panel — see the matching HTML block + /assets/
   secret-menu.js on each page). Stays hover-gated (icon is invisible
   until the corner is hovered); a first tap reveals it on touch devices
   (no hover), a second tap opens the menu — see secret-menu.js.
   Hover-detection and click-detection are deliberately split: .hotspot
   is a big invisible zone (sized to match the corner-sparkle graphic
   above, so the hover/tap target stays generous) so hovering/tapping
   anywhere near the corner reveals the icon, while
   .secret-menu__trigger — the actual clickable button —
   stays small, just around the icon itself, so hovering the corner
   doesn't let you open the menu by clicking somewhere else in it. --- */
/* .secret-menu itself and .secret-menu__hotspot are position:absolute
   (not fixed) so the closed/idle trigger scrolls away with the page —
   same as .corner-sparkle, and for the same reason: it should only be
   reachable near the very top. .secret-menu__scrim/.secret-menu__panel
   below carry their OWN independent position:fixed, so the open state
   still correctly covers the full viewport regardless of this. */
.secret-menu{position:absolute;inset:0;z-index:60;pointer-events:none}
.secret-menu__hotspot{position:absolute;top:0;right:0;z-index:2;
      width:clamp(120px,28vw,280px);height:clamp(95px,22vw,222px);
      transform:translate(0,-12px);
      pointer-events:auto}
.secret-menu__trigger{--tilt:-2deg;position:absolute;top:32px;right:32px;z-index:3;width:64px;height:64px;
      display:flex;align-items:center;justify-content:center;
      background:none;border:none;cursor:pointer;color:#fff;
      pointer-events:auto;-webkit-tap-highlight-color:transparent}
.secret-menu__trigger:hover,.secret-menu__trigger:focus-visible{
      transform:translateY(-6px) rotate(var(--tilt));outline:none}
.secret-menu.is-open .secret-menu__trigger{color:var(--charcoal)}
.secret-menu__icon{display:block;width:40px;height:40px;flex:none}
.secret-menu__icon--menu{opacity:0}
@media (hover:hover){
  .secret-menu__hotspot:hover .secret-menu__icon--menu,
  .secret-menu__trigger:focus-visible .secret-menu__icon--menu{opacity:1}
}
.secret-menu.is-revealed .secret-menu__icon--menu{opacity:1}
/* --- hint: Figma's "menu_text" node (arrow + "Oooh a secret menu!"),
   positioned/rotated to match its exact coordinates there. Decorative
   only — not interactive — and fades in slightly after the icon
   itself (transition-delay) rather than in lockstep with it. --- */
.secret-menu__hint{position:absolute;top:16px;right:16px;width:56px;height:56px;
      pointer-events:none;opacity:0}
@media (hover:hover){
  .secret-menu__hotspot:hover .secret-menu__hint,
  .secret-menu__trigger:focus-visible ~ .secret-menu__hint{opacity:1}
}
/* --- transitions are withheld until .is-ready (added by secret-menu.js
   on the first real mousemove after load) rather than living on the
   base rules above. Reason: clicking a menu link navigates to a page
   whose freshly-rendered hotspot/trigger can land right under the
   still-stationary cursor, so the new page's real CSS :hover applies
   the instant it paints — with an unconditional transition that plays
   as an unwanted "the menu animates on every page load" flourish for
   a hover the user never intended. Gating the transition behind proof
   of an actual mouse movement keeps the instant-hover snap (still
   correct — the cursor genuinely is there) but silent, while normal
   hover/tap interactions afterward animate exactly as before. --- */
.secret-menu.is-ready .secret-menu__trigger{transition:color .3s var(--spring),transform .3s var(--spring)}
.secret-menu.is-ready .secret-menu__icon--menu{transition:opacity .3s ease}
.secret-menu.is-ready .secret-menu__hint{transition:opacity .3s ease .12s}
.secret-menu.is-revealed .secret-menu__hint{opacity:1}
.secret-menu.is-open .secret-menu__hint{opacity:0 !important}
.secret-menu__arrow{position:absolute;right:84px;bottom:-24px;width:15px;height:auto;
      color:#fff;display:block;transform-origin:center;transform:rotate(-127.28deg);
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.secret-menu__note{position:absolute;right:60px;bottom:-70px;white-space:nowrap;
      color:#fff;font-weight:600;font-size:13px;text-align:center;
      transform-origin:right center;transform:rotate(30deg);
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.secret-menu__icon--close{display:none}
.secret-menu.is-open .secret-menu__icon--menu{display:none}
.secret-menu.is-open .secret-menu__icon--close{display:block;opacity:1}
.secret-menu__scrim{position:fixed;inset:0;z-index:0;background:rgba(0,0,0,.3);
      opacity:0;pointer-events:none;transition:opacity .3s ease}
.secret-menu.is-open .secret-menu__scrim{opacity:1;pointer-events:auto}
.secret-menu__panel{position:fixed;top:0;right:0;bottom:0;z-index:1;
      width:min(430px,88vw);background:var(--lime);
      display:flex;flex-direction:column;align-items:center;
      padding:144px 24px 56px;overflow-y:auto;
      transform:translateX(100%);pointer-events:none;
      transition:transform .4s var(--spring)}
.secret-menu.is-open .secret-menu__panel{transform:translateX(0);pointer-events:auto}
.secret-menu__panel a{color:var(--charcoal);text-decoration:none;font-weight:600;
      font-size:clamp(24px,3vw,32px);padding:10px 0;transition:transform .3s var(--spring)}
.secret-menu__panel a:hover,.secret-menu__panel a:focus-visible{
      transform:translateY(-6px) rotate(var(--tilt));outline:none}
/* --- socials: same size/shape/icon content as the footer's
   .say-hi__icon (82px, 2px border, 16px radius, 32px glyphs) — kept as
   its own class rather than literally reusing .say-hi__icon, since
   that class's white-on-transparent/lime-fill-on-hover treatment is
   tuned for the pink footer and would wash out against this panel's
   lime background; charcoal keeps it legible while matching every
   other dimension exactly. --- */
.secret-menu__socials{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:auto;padding-top:32px}
.secret-menu__social{width:82px;height:82px;border:2px solid var(--charcoal);border-radius:16px;
      display:flex;align-items:center;justify-content:center;color:var(--charcoal);
      text-decoration:none;transition:transform .3s var(--spring)}
.secret-menu__social:hover,.secret-menu__social:focus-visible{
      transform:translateY(-6px) rotate(var(--tilt));outline:none}
.secret-menu__social svg{width:32px;height:32px}
.secret-menu__social--linkedin{font-size:32px;font-weight:700;letter-spacing:-.02em}
@media (prefers-reduced-motion: reduce){
  .secret-menu__panel,.secret-menu__panel a,.secret-menu__scrim,
  .secret-menu__trigger,.secret-menu__social{transition:none !important}
}

/* --- page-head: base is the article-page variant (used by all 9 case
   study pages, identical on every one); the two list pages
   (casestudies/index.html, sideprojects/index.html) need a wider
   max-width, different bottom padding, and bigger title/intro sizes —
   each carries a small local override for just those properties. --- */
.page-head{max-width:760px;margin:0 auto;padding:clamp(120px,16vw,180px) clamp(20px,6vw,64px) clamp(40px,7vw,56px);
      text-align:center}
.page-head__eyebrow{display:inline-block;background:#fff;color:#f455a7;font-size:13px;font-weight:600;
      padding:6px 16px;border-radius:100px;margin-bottom:20px}
.page-head__title{font-size:clamp(36px,7vw,72px);font-weight:600;letter-spacing:-.03em;margin:0 0 16px;line-height:1.05}
.page-head__intro{font-size:clamp(17px,2.1vw,21px);opacity:.9;margin:0;line-height:1.55}

/* --- construction notice: sits between the page-head and the article on
   every case study page, flagging that the write-up is still a draft.
   Reuses the "coming soon" dashed-panel look so it reads as an
   intentional, on-brand flag rather than an error state. --- */
.construction-notice{max-width:720px;margin:0 auto clamp(40px,7vw,64px);padding:0 clamp(20px,6vw,64px)}
.construction-notice__box{background:rgba(255,255,255,.1);border:1.5px dashed rgba(255,255,255,.4);
      border-radius:22px;padding:24px 28px;text-align:center}
.construction-notice__title{font-size:19px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.construction-notice__desc{font-size:15px;line-height:1.5;opacity:.85;margin:0}

/* --- article: long-form case-study typography, identical across all
   9 case study pages wherever each rule is actually used. --- */
.article{max-width:720px;margin:0 auto;padding:0 clamp(20px,6vw,64px) clamp(48px,8vw,80px);
      text-align:left;font-size:18px;line-height:1.7}
.article h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em;margin:48px 0 16px}
.article h3{font-size:clamp(19px,2.2vw,22px);font-weight:600;margin:36px 0 12px;color:var(--lime)}
.article p{margin:0 0 20px;opacity:.95}
.article strong{font-weight:600;color:#fff}
.article ul{margin:0 0 20px;padding-left:22px}
.article li{margin-bottom:10px;opacity:.95}
.article blockquote{margin:32px 0;padding:20px 24px;border-left:4px solid var(--lime);
      background:rgba(255,255,255,.08);border-radius:0 16px 16px 0;font-size:17px;line-height:1.6}
.article blockquote cite{display:block;margin-top:10px;font-size:14px;opacity:.7;font-style:normal}
.article__img{border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);margin:32px 0;display:block;
      cursor:zoom-in;transition:transform .25s var(--spring)}
.article__img:hover,.article__img:focus-visible{transform:translateY(-4px)}
.article__img-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:32px 0}
.article__img-row img{height:280px;width:auto;max-width:100%;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);
      cursor:zoom-in;transition:transform .25s var(--spring)}
.article__img-row img:hover,.article__img-row img:focus-visible{transform:translateY(-4px)}
.article__video{border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);margin:32px auto;display:block;
      max-width:100%;max-height:640px;height:auto}
.article__caption{text-align:center;font-size:14px;opacity:.65;margin:-20px 0 32px;font-style:italic}

/* --- article lightbox: click any case-study image to open it larger,
   same native-<dialog> pattern as the homepage's pretty-screens
   lightbox (free Escape/backdrop-click + focus trap, no dependency).
   Shared by every case-study page — see assets/lightbox.js. --- */
#article-lightbox{border:none;background:transparent;padding:0;max-width:none;
      max-height:none;position:fixed;inset:0;margin:auto;overflow:visible}
#article-lightbox::backdrop{background:rgba(0,0,0,.85)}
#article-lightbox[open]{display:flex;align-items:center;justify-content:center}
#article-lightbox-img{max-width:min(900px,88vw);max-height:88vh;width:auto;height:auto;
      display:block;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#article-lightbox-close{position:fixed;top:24px;right:24px;width:44px;height:44px;
      border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.3);color:#fff;
      font-size:24px;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:background .2s ease,transform .2s var(--spring)}
#article-lightbox-close:hover,#article-lightbox-close:focus-visible{
      background:var(--lime);color:#000;border-color:var(--lime);
      transform:scale(1.08);outline:none}

/* meta byline + "Principle N" eyebrow above an h2 (Manta case studies) */
.article__meta{font-size:13px;opacity:.65;margin:0 0 clamp(32px,6vw,48px)}
.article__eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
      color:var(--lime);margin:clamp(36px,6vw,52px) 0 6px}
.article__eyebrow + h2{margin-top:0}

/* --- article nav: "more case studies" links at the bottom (Manta pages) --- */
.article__nav{max-width:720px;margin:0 auto;padding:clamp(24px,5vw,40px) clamp(20px,6vw,64px) clamp(64px,10vw,112px)}
.article__nav-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:0 0 14px}
.article__nav-links{display:flex;flex-direction:column;gap:10px}
.article__nav-links a{--tilt:-2deg;text-decoration:none;font-size:15px;font-weight:600;color:#fff;
      display:inline-flex;align-items:center;gap:6px;transition:transform .18s var(--spring),color .18s ease}
.article__nav-links a:hover,.article__nav-links a:focus-visible{transform:translateX(4px);color:var(--lime);outline:none}

/* --- cta pill button + its wrapper (Mighty case-study pages) — sized
   per the homepage's version (clamp-based, plus the svg-icon rule the
   homepage's chevron-bearing CTAs need); the subpages that use a
   fixed-size pill instead carry a small local font-size/padding
   override. --- */
.article-cta{max-width:720px;margin:0 auto;padding:0 clamp(20px,6vw,64px) clamp(64px,10vw,100px);text-align:center}
.cta{--tilt:-2deg;display:inline-flex;align-items:center;gap:10px;
     background:var(--lime);color:#000;font-size:clamp(14px,1.4vw,16px);font-weight:400;
     padding:clamp(12px,1.6vw,16px) clamp(20px,2.6vw,32px);border-radius:70px;
     text-decoration:none;white-space:nowrap;
     transition:transform .3s var(--spring)}
.cta:hover,.cta:focus-visible{transform:translateY(-6px) rotate(var(--tilt));outline:none}
.cta svg{width:16px;height:16px;flex:none}

/* --- say-hi__icons: the contact-icon row, only ever used inside
   .site-footer now (every page uses the exact same footer as the
   homepage, contact icons included — there is no more standalone
   "Say hi sometime" section anywhere on the site). --- */
.say-hi__icons{display:flex;gap:18px;justify-content:center}
.say-hi__icon{--tilt:-1deg;width:82px;height:82px;border-radius:16px;border:2px solid #fff;
      display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
      transition:transform .3s var(--spring),background .25s ease,color .2s ease,border-color .25s ease}
.say-hi__icon:hover,.say-hi__icon:focus-visible{transform:translateY(-6px) rotate(var(--tilt));
      background:var(--lime);color:#000;border-color:var(--lime);outline:none}
.say-hi__icon svg{width:32px;height:32px}
.say-hi__icon--linkedin{font-size:32px;font-weight:700;letter-spacing:-.02em}

/* --- footer: gradient close, giant linked name, stacked links, contact
   icons. Identical on every page — the homepage's version is the only
   version, per the site's "every page shares the exact same footer"
   rule; clicking the name always returns to the homepage. --- */
.site-footer{background:linear-gradient(180deg,rgba(189,243,0,0) 0%,var(--lime) 100%);
      padding:clamp(64px,10vw,120px) 24px clamp(48px,8vw,80px);
      display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.site-footer__heading{display:flex;flex-direction:column;gap:6px}
.site-footer__name{font-size:clamp(48px,11vw,150px);font-weight:600;letter-spacing:-.04em;margin:0;text-decoration:none}
.site-footer__tag{font-size:clamp(15px,1.8vw,22px);margin:0;opacity:.9}
.site-footer__links{display:flex;flex-direction:column;gap:6px}
.site-footer__links a{--tilt:-2deg;font-size:clamp(28px,4.5vw,56px);font-weight:600;letter-spacing:-.03em;
      text-decoration:none;transition:transform .3s var(--spring)}
.site-footer__links a:hover,.site-footer__links a:focus-visible{transform:translateY(-6px) rotate(var(--tilt));outline:none}

/* --- cards: the homepage's card design (strategy/people/leadership
   sections), now shared verbatim by every page with cards
   (casestudies/index.html, sideprojects/index.html). Not-yet-live cards
   read as genuinely disabled — dashed outline, near-zero fill,
   desaturated, "no" gesture cursor — distinct from the live cards' solid
   translucent panel that flips to white on hover, not just dimmer.
   The homepage's own fan-hover phone-mockup images
   (.card__fan-img/.card--fan-left/.card--fan-right) are an optional
   extra on top of this shared design and stay local to index.html — not
   every card has matching per-item screenshots to fan out.
   The .cards container itself differs per page (different wrapping
   markup/padding) and stays local to each. --- */
.card{--tilt:-2deg;position:relative;display:block;width:min(620px,100%);
      text-decoration:none;color:#fff;transition:transform .3s var(--spring)}
a.card:hover,a.card:focus-visible{transform:translateY(-6px) rotate(var(--tilt));outline:none}
.card__panel{position:relative;background:rgba(255,255,255,.1);border-radius:22px;
      min-height:280px;padding:34px;text-align:left;display:flex;flex-direction:column;gap:16px;
      transition:background-color .3s ease,color .3s ease}
a.card:hover .card__panel,a.card:focus-visible .card__panel{background:#fff;color:var(--charcoal)}
a.card:hover .card__tag,a.card:focus-visible .card__tag{background:#f455a7;color:#fff}
a.card:hover .card__desc,a.card:focus-visible .card__desc{opacity:.7}
.card--soon{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='28'>%F0%9F%99%85%E2%80%8D%E2%99%80%EF%B8%8F</text></svg>") 16 16,default}
.card--soon .card__panel{background:rgba(255,255,255,.03);border:1.5px dashed rgba(255,255,255,.3);
      filter:grayscale(.6)}
.card__tag{align-self:flex-start;background:#fff;color:#f455a7;font-size:14px;font-weight:600;
      padding:5px 14px;border-radius:100px;transition:background-color .3s ease,color .3s ease}
.card--soon .card__tag{background:rgba(255,255,255,.25);color:rgba(255,255,255,.8)}
.card__title{font-size:clamp(22px,2.6vw,32px);font-weight:600;margin:0}
.card--soon .card__title{color:rgba(255,255,255,.7)}
/* --- desc: shared body-copy size/weight for description-style text
   (case-study card descriptions, stat callouts, the AI section's body
   copy). Add alongside each element's own layout class rather than
   replacing it — this only owns font-size/font-weight. --- */
.desc{font-size:18px;font-weight:400}
.card__desc{line-height:1.5;margin:0;opacity:.9;transition:opacity .3s ease}
.card--soon .card__desc{opacity:.55}
.card__arrow{margin-top:auto;line-height:0}
.card__arrow svg{width:26px;height:26px}
/* .cards-scroll wraps every .cards grid. It's inert (display:contents)
   above mobile, so .cards lays out exactly as if the wrapper weren't
   there. On mobile it becomes a real block box so .cards can break out
   of any ancestor (.group's padding, a flex .section with
   align-items:center, etc.) to the true viewport edge via 100vw — a
   plain negative-margin cancel doesn't reach the edge when .cards is a
   flex item of a centered flex parent, since it's then sized to its
   content's max-content width regardless of margin. */
.cards-scroll{display:contents}

@media (max-width:768px){
  .cards-scroll{display:block;width:100%}
  /* case-study cards side-scroll horizontally on mobile instead of
     stacking/wrapping vertically — cards keep a fixed width (flex-shrink
     disabled) so the row overflows and scrolls rather than squeezing.
     width:100vw + negative-margin centering breaks .cards out to the
     true viewport edge (independent of any ancestor's padding/flex
     centering), and matching padding puts the resting-state inset back
     — so the scrollable area itself reaches the edge, and cards can
     scroll flush past it instead of stopping at a visible inset "bar"
     short of the edge. */
  .cards{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;padding-bottom:8px;
        width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
        padding-left:clamp(20px,6vw,64px);padding-right:clamp(20px,6vw,64px)}
  .card{flex:0 0 min(300px,80vw);width:auto;scroll-snap-align:start}
  /* .article__img-row images are sized by a fixed height (280px) on
     desktop so a row of side-by-side comparison shots lines up neatly.
     On narrow viewports that fixed height's implied width usually
     exceeds the screen, and max-width:100% capping the width alone
     (with height still pinned at 280px) squashes/stretches the image
     out of its aspect ratio — switching to width:100%;height:auto lets
     it scale down proportionally instead. */
  .article__img-row img{width:100%;height:auto}
}

/* --- reduced motion: base set of components shared by (almost) every
   page. Pages with additional animated components (the homepage's
   hero/company/etc., or a page's .cta/.article__nav-links/.card) add
   their own small supplemental block for just those extra selectors. --- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body{animation:none;background-color:#f455a7}
  .back-link a,.say-hi__icon,.site-footer__links a{transition:none !important}
  .article__img,.article__img-row img{transition:none !important}
}