/** Shopify CDN: Minification failed

Line 176:0 Unexpected "22%"
Line 177:2 Unexpected "70%"
Line 178:2 Unexpected "100%"
Line 179:0 Unexpected "}"

**/
/* Kettleworth's — /pages/about-us
   Replaces the inherited Yachew template (yw-* classes, dark-green palette,
   fabricated statistics). Prefix is kw-ab-* so nothing here can collide with
   the Megastore theme or with kettleworths-brand.css.

   Palette is the brand book's direction B, used as tokens rather than literals
   so a palette change is one edit: docs/brand/kettleworths/BRAND-BOOK.md §4. */

.kw-ab{
  --navy:#16233D;
  --navy-lift:#1E2E4E;
  --marmalade:#B04F0E;
  --amber:#E39B3A;
  --paper:#F6F2EA;
  --paper-tint:#EFE9DD;
  --ink:#141821;
  --muted:#4A5262;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shell:min(1180px, 100% - 3rem);
  color:var(--ink);
  font-family:var(--font-body-family, "Manrope", sans-serif);
}
.kw-ab__shell{ width:var(--shell); margin-inline:auto; }

.kw-ab h1,.kw-ab h2,.kw-ab h3{
  font-family:var(--font-heading-family, "Fraunces", Georgia, serif);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
  margin:0;
  /* Megastore sets a global heading colour that beats `.kw-ab h1` on
     specificity, so headings inside the navy bands rendered ink-on-navy
     (measured 1.4:1). Inherit deliberately instead of relying on the cascade. */
  color:inherit;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.kw-ab-hero{
  position:relative;
  background:var(--navy);
  color:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
.kw-ab-hero__inner{
  width:var(--shell);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  padding:4.5rem 0 4rem;
  position:relative;
  z-index:2;
}
@media (min-width:900px){
  .kw-ab-hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    align-items:center;
    padding:3.4rem 0 4rem;
    gap:3rem;
  }
}
/* The steam sits above the eyebrow, not behind it: an absolutely-positioned
   mark inside an inline-block wrapper overlapped the words. */
.kw-ab-hero__mark{
  position:relative;
}

/* The lockup sits where the steam used to. Capped in both directions: a
   percentage alone lets it grow absurdly wide on a large monitor, and a fixed
   px alone crowds the headline on a phone. */
.kw-ab-hero__logo{
  display:block;
  width:min(272px, 64%);
  height:auto;
  margin:0 0 1.75rem;
}
.kw-ab-hero__eyebrow{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 1.1rem;
}
.kw-ab-hero__title{
  font-size:clamp(2.1rem, 6vw, 3.6rem);
  max-width:16ch;
  color:var(--paper);
}
.kw-ab-hero__title em{
  font-style:normal;
  color:var(--amber);
}
.kw-ab-hero__deck{
  margin:1.4rem 0 0;
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  line-height:1.55;
  max-width:46ch;
  color:rgba(246,242,234,.88);
}
.kw-ab-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}

/* Buttons. Marmalade on navy measures 5.0:1 for the label, and the ghost
   variant keeps a 1px paper edge rather than relying on colour alone. */
.kw-ab-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.85rem 1.5rem;
  border-radius:2px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  transition:background 160ms var(--ease), color 160ms var(--ease);
}
.kw-ab-btn--solid{ background:var(--marmalade); color:var(--paper); }
.kw-ab-btn--solid:hover{ background:#95430C; color:var(--paper); }
.kw-ab-btn--ghost{
  border:1px solid rgba(246,242,234,.45);
  color:var(--paper);
}
.kw-ab-btn--ghost:hover{ background:rgba(246,242,234,.1); color:var(--paper); }

/* ── The globe ────────────────────────────────────────────────────────── */
.kw-ab-globe{
  position:relative;
  aspect-ratio:1;
  width:100%;
  /* The globe sets the height of the hero row, and the copy column is centred
     against it — so every pixel here costs half a pixel of dead space above
     the eyebrow as well as below. */
  max-width:400px;
  margin-inline:auto;
}
.kw-ab-globe canvas{
  width:100%;
  height:100%;
  display:block;
  /* Fades in only once cobe has drawn a frame, so a slow WebGL init never
     shows a black square against the navy. */
  opacity:0;
  transition:opacity 700ms var(--ease);
  contain:layout paint;
}
.kw-ab-globe.is-ready canvas{ opacity:1; }

/* On phones the globe sits behind the words rather than beside them: a 460px
   sphere above the headline would push the entire proposition below the fold. */
@media (max-width:899px){
  .kw-ab-globe{
    position:absolute;
    inset:auto -30% -18% auto;
    width:min(120vw, 620px);
    max-width:none;
    opacity:.4;
    pointer-events:none;
    z-index:0;
  }
  .kw-ab-hero__copy{ position:relative; z-index:2; }
}

22%  { opacity:.9; }
  70%  { opacity:.45; }
  100% { opacity:0;   transform:translateY(-12px) scaleY(1.12); }
}

/* ── Body sections ────────────────────────────────────────────────────── */
.kw-ab-band{ padding:4rem 0; background:var(--paper); }
.kw-ab-band--tint{ background:var(--paper-tint); }
.kw-ab-band__head{ max-width:60ch; }
.kw-ab-band__kicker{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--marmalade);
  margin:0 0 .9rem;
}
.kw-ab-band h2{ font-size:clamp(1.6rem, 3.6vw, 2.3rem); }
.kw-ab-band p{
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  margin:1rem 0 0;
  max-width:62ch;
}

/* Three-up: the promise, the range, the parcel. */
.kw-ab-cols{
  display:grid;
  gap:2.4rem;
  margin-top:2.6rem;
}
@media (min-width:760px){
  .kw-ab-cols{ grid-template-columns:repeat(3,1fr); gap:2.8rem; }
}
.kw-ab-col h3{ font-size:1.2rem; margin-bottom:.6rem; }
.kw-ab-col p{ font-size:1rem; margin-top:.5rem; color:var(--muted); }
.kw-ab-col__rule{
  width:34px;
  height:3px;
  background:var(--amber);
  border-radius:2px;
  margin-bottom:1.1rem;
}

/* Operator card — the legal disclosure, deliberately plain. */
.kw-ab-operator{
  margin-top:2.4rem;
  padding:1.8rem;
  background:var(--paper);
  border:1px solid rgba(22,35,61,.14);
  border-radius:3px;
  display:grid;
  gap:1.4rem;
}
@media (min-width:760px){
  .kw-ab-operator{ grid-template-columns:1fr 1fr; gap:2.4rem; }
}
.kw-ab-operator h3{ font-size:1.05rem; margin-bottom:.5rem; }
.kw-ab-operator address{
  font-style:normal;
  line-height:1.7;
  color:var(--muted);
  font-size:.975rem;
}
.kw-ab-operator dl{ margin:0; font-size:.975rem; line-height:1.7; }
.kw-ab-operator dt{ color:var(--muted); }
.kw-ab-operator dd{ margin:0 0 .7rem; color:var(--ink); font-variant-numeric:tabular-nums; }

.kw-ab-cta{
  background:var(--navy);
  color:var(--paper);
  padding:3.6rem 0;
  text-align:center;
}
.kw-ab-cta h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); }
.kw-ab-cta p{ margin:1rem auto 2rem; max-width:52ch; color:rgba(246,242,234,.85); line-height:1.6; }
.kw-ab-cta .kw-ab-hero__actions{ justify-content:center; margin-top:0; }

.kw-ab a:not(.kw-ab-btn){ color:var(--marmalade); text-underline-offset:2px; }
.kw-ab-hero a:not(.kw-ab-btn),
.kw-ab-cta a:not(.kw-ab-btn){ color:var(--amber); }

@media (prefers-reduced-motion:reduce){
  .kw-ab-globe canvas{ transition:none; }
}


/* ==========================================================================
   About body — rebuilt 2026-08-20.

   SIZES BELOW ARE ON THE THEME'S SCALE: the document root is
   10px, so 1.6rem is 16px. Plain rem values written as if the root were 16px
   render at 62.5% here — which is how the body copy ended up at 9.5px.

   The page previously ran every section as a heading plus a paragraph in one
   narrow left column, leaving the right half of the viewport empty the whole
   way down. This borrows Yachew's rhythm instead: full-bleed bands that
   alternate light and dark so sections read as separate places, an eyebrow with
   a short accent rule, a two-line headline whose second line takes the accent
   colour, and real photography.

   Colours come from the variables the hero already defines, so this follows the
   store scheme rather than hardcoding hexes that drift.
   ========================================================================== */

.kw-ab-shell{
  width:min(1180px, 100% - 4rem);
  margin-inline:auto;
}

.kw-ab-eyebrow{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 0.88rem;
}

/* The short rule under the eyebrow. Yachew's signature tell, and it does real
   work: it stops the eyebrow floating away from the headline. */
.kw-ab-rule{
  width:34px;
  height:2px;
  background:var(--amber);
  margin:0 0 2.24rem;
}

.kw-ab-h2{
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:clamp(3.04rem, 3.6vw, 4.8rem);
  line-height:1.1;
  letter-spacing:-.01em;
  /* The second line is a block-level <em> with no margin of its own, so this is
     the only gap between a 4.8rem headline and the paragraph under it. */
  margin:0 0 2.56rem;
  max-width:20ch;
}

/* Second line in the accent, as on Yachew. <em> is the hook, so the copy above
   controls where the line breaks rather than the CSS guessing. */
.kw-ab-h2 em{
  font-style:normal;
  color:var(--amber);
  display:block;
}

.kw-ab-h3{
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:clamp(2.24rem, 2.2vw, 3.12rem);
  line-height:1.15;
  margin:0 0 1.6rem;
}

.kw-ab-lede{
  color:inherit;
  font-size:clamp(1.792rem, 1.5vw, 2.112rem);
  line-height:1.6;
  margin:0 0 2rem;
  max-width:54ch;
  opacity:.92;
}

.kw-ab-body{
  color:inherit;
  /* Explicit, because inheriting the theme's base size made the body larger
     than the lede above it. */
  font-size:1.568rem;
  line-height:1.7;
  margin:0 0 1.6rem;
  max-width:60ch;
  opacity:.8;
}

.kw-ab-head{ margin-bottom:4.4rem; }

/* --- proof strip ---------------------------------------------------------
   Where Yachew puts 3M+ customers and a review score. This store has no
   orders, so the figures here are only things that are true today. */
.kw-ab-proof{
  background:var(--ink, #16233D);
  color:var(--paper, #F6F2EA);
  padding:4.4rem 0;
}

.kw-ab-proof__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:2.8rem 3.2rem;
}

.kw-ab-proof__item{
  display:flex;
  flex-direction:column;
  gap:0.64rem;
  padding-left:1.6rem;
  border-left:2px solid var(--amber);
}

.kw-ab-proof__figure{
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:clamp(3.2rem, 3.4vw, 4.64rem);
  line-height:1;
}

.kw-ab-proof__label{
  color:inherit;
  font-size:1.36rem;
  line-height:1.45;
  opacity:.72;
}

/* --- story: copy beside a photograph ------------------------------------- */
.kw-ab-story{ padding:7.2rem 0; }

.kw-ab-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5.6rem;
  align-items:center;
}

.kw-ab-split__media{
  margin:0;
  border-radius:10px;
  overflow:hidden;
}

.kw-ab-split__media img{
  display:block;
  width:100%;
  /* NOT height:100% — the figure has no height of its own, so that resolves to
     zero and the column renders empty. aspect-ratio gives it the box. */
  height:auto;
  object-fit:cover;
  aspect-ratio:3 / 2;
}

/* The one pulled-out claim in the section, given a rule so the eye lands on it
   the way it lands on Yachew's "3,000 orders a day". */
.kw-ab-pull{
  color:inherit;
  margin:2.4rem 0 0;
  padding-left:1.76rem;
  border-left:3px solid var(--amber);
  line-height:1.65;
  max-width:52ch;
}

.kw-ab-pull strong{ display:block; }

/* --- why: dark band ------------------------------------------------------ */
.kw-ab-why{
  background:var(--ink, #16233D);
  color:var(--paper, #F6F2EA);
  padding:7.2rem 0;
}

.kw-ab-reasons{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:3.6rem;
}

.kw-ab-reason__num{
  display:block;
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:1.68rem;
  color:var(--amber);
  margin-bottom:0.88rem;
}

.kw-ab-reason__title{
  color:inherit;
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:2.048rem;
  margin:0 0 0.88rem;
}

.kw-ab-reason__body{
  color:inherit;
  margin:0;
  line-height:1.65;
  font-size:1.52rem;
  opacity:.78;
}

/* --- journey rail --------------------------------------------------------
   Yachew's is a company timeline by year. This store is days old, so a founding
   timeline would have to be invented; the parcel's journey is the one the
   shopper actually wants narrated, and it is all verifiable. */
.kw-ab-journey{ padding:7.2rem 0; }

.kw-ab-rail{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:0;
}

.kw-ab-stop{
  position:relative;
  padding:2.56rem 2.4rem 2.88rem;
  border-top:2px solid rgba(var(--color-foreground,22 35 61), .14);
}

/* The dot that makes a row of boxes read as a line with stops on it. */
.kw-ab-stop::before{
  content:"";
  position:absolute;
  top:-6px;
  left:2.4rem;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--amber);
}

.kw-ab-stop--last::before{
  background:var(--ink, #16233D);
}

.kw-ab-stop__step{
  display:block;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:0.8rem;
}

.kw-ab-stop__title{
  color:inherit;
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:1.952rem;
  line-height:1.2;
  margin:0 0 0.8rem;
}

.kw-ab-stop__body{
  color:inherit;
  margin:0;
  font-size:1.488rem;
  line-height:1.65;
  opacity:.78;
}

.kw-ab-journey__media{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
  margin-top:4.8rem;
}

.kw-ab-journey__media figure{
  margin:0;
  border-radius:10px;
  overflow:hidden;
}

.kw-ab-journey__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:16 / 10;
}

.kw-ab-journey__foot{
  color:inherit;
  margin:2.8rem 0 0;
  font-size:1.52rem;
  opacity:.78;
}

/* --- who we are ----------------------------------------------------------
   Was a full-width bordered box that read as a legal footer. Demoted to a
   two-column strip: the disclosure matters, the registered address does not
   need the same weight as the headline. */
.kw-ab-who{
  padding:5.6rem 0 6.4rem;
  background:rgba(var(--color-foreground,22 35 61), .035);
}

.kw-ab-who__inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:4.8rem;
  align-items:start;
}

.kw-ab-who__facts{
  margin:0;
  display:grid;
  gap:1.44rem;
  font-size:1.44rem;
}

.kw-ab-who__facts dt{
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:1.088rem;
  opacity:.6;
  margin-bottom:0.24rem;
}

.kw-ab-who__facts dd{
  color:inherit;
  margin:0;
  line-height:1.55;
  opacity:.85;
}

/* --- closing CTA --------------------------------------------------------- */
.kw-ab-cta{
  background:var(--ink, #16233D);
  color:var(--paper, #F6F2EA);
  padding:6.4rem 0;
  text-align:center;
}

.kw-ab-cta__title{
  font-family:var(--font-heading-family, Fraunces, Georgia, serif);
  font-size:clamp(2.72rem, 3vw, 4rem);
  margin:0 0 1.44rem;
}

.kw-ab-cta__body{
  color:inherit;
  margin:0 auto 3.04rem;
  max-width:52ch;
  line-height:1.65;
  opacity:.85;
}

.kw-ab-cta__actions{
  display:flex;
  gap:1.2rem;
  justify-content:center;
  flex-wrap:wrap;
}

@media (max-width: 860px){
  .kw-ab-split,
  .kw-ab-who__inner{ grid-template-columns:1fr; gap:3.6rem; }
  /* Stacked, the top border on every stop reads as a divider rather than a
     rail, which is the correct reading on a narrow screen. */
  .kw-ab-stop{ padding-inline:0 0; }
  .kw-ab-stop::before{ left:0; }
  .kw-ab-story,
  .kw-ab-why,
  .kw-ab-journey{ padding:4.8rem 0; }
}