/* Hero --------------------------------------------------------------------
   MEASURED off the reference at a 1920px viewport:

     section height     829px
     "Bl" / "mify"      499.2px  = 26vw, line-height 1.2, letter-spacing normal
     "(" and ")"        288px    = 0.577x the main size
     flower image       178 x 384  = 0.357em x 0.769em of the main size
     wordmark spans     15 -> 1890, i.e. the full container width
     content            the wordmark and nothing else - no subtitle, no CTA

   The wordmark is a flex row of five items. --hero-ratio is the composed
   width divided by the font-size, measured in the browser: change the brand
   name and it must be remeasured or the row overflows or leaves a gap.
   -------------------------------------------------------------------------- */
.hero {
  height: 829px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
  container-type: inline-size;
  overflow: hidden;
}

.hero__word {
  --hero-ratio: 4.41;   /* measured in-browser for "Adornslo" */
  font-family: var(--font-head);
  font-size: calc(100cqw / var(--hero-ratio));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.hero__part { display: inline-block; }

/* The parentheses stand in for the "o". 288 / 499.2 = 0.577 on desktop.

   The ratio is NOT constant: re-measured at a 430px viewport the reference
   runs a 101.48px face against 64.5px parentheses, which is 0.6356. So the
   reference sizes them per breakpoint rather than in em, and the parentheses
   are proportionally larger on a phone. Both numbers are measured; the step
   is placed at the reference's own lowest breakpoint. */
.hero__paren {
  font-size: 0.577em;
  line-height: 1;
  display: inline-block;
}
@media (max-width: 480px) {
  .hero__paren { font-size: 0.6356em; }   /* MEASURED at 430px */
}

/* The bloom sits between the parentheses: 178 x 384 against a 499.2px face. */
.hero__bloom {
  display: inline-block;
  width: 0.357em;
  height: 0.769em;
  margin-inline: 0.012em;
  flex: none;
}
/* The blooms are stacked, one visible at a time - a hard cut, no fade, which is
   what the reference's GIF does. object-position keeps them standing on a
   COMMON BASELINE: the frames are not all the same proportion, and centring
   them makes a short one appear to jump upward as the cycle turns. */
.hero__bloom { position: relative; }
.hero__bloomimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
}
/* The template stamps `is-on` on the first image, so with no JS at all the
   first frame is what shows - no .js scoping needed anywhere. */
.hero__bloomimg.is-on { opacity: 1; }
.hero__bloomph { width: 100%; height: 100%; aspect-ratio: auto; font-size: 10px; }

@media (max-width: 767px) {
  .hero { height: auto; padding-block: 60px; }
}

/* Services arc -------------------------------------------------------------
   MEASURED off the reference (section 1553 x 723):
     centre cut-out  296 x 584 at x=629
     icons           79 x 71
     titles          Tenor Sans 22px weight 500 maroon, 287px wide, no body copy
     rows            y = 203 / 405 / 606  (~202px apart)
     the bow         the MIDDLE row on each side sits 91px further OUT than the
                     outer two - 91/1553 = 5.9% of the section width.

   That outward push on the middle row is the whole trick: without it the
   columns read as two straight lists rather than a curve around the image.
   -------------------------------------------------------------------------- */
/* --bow and --indent are in cqw (container width) because a percentage in
   translateX resolves against the ELEMENT's own width, not the section - that
   mistake produced a 22px bow where the reference has 91px.

   Reference at a 1553px section: outer items indented 106px (6.8%), middle
   pushed out 91px (5.9%), so the middle lands 15px from the edge. */
.svcarc {
  --bow: 5.9cqw;
  --indent: 6.8cqw;
  padding-inline: var(--gutter);
  container-type: inline-size;
}

.svcarc__grid {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 296px) 1fr;
  gap: 40px;
  align-items: center;
}

.svcarc__side { display: grid; gap: 130px; }
/* The outer items sit indented so the middle one has room to bow past them. */
.svcarc__side--left { padding-left: var(--indent); }
.svcarc__side--right { padding-right: var(--indent); }

.svcarc__item {
  display: flex;
  align-items: center;
  gap: 0;               /* MEASURED: the title starts flush after the icon */
  max-width: 366px;     /* icon 79 + title 287 */
}
.svcarc__side--right .svcarc__item { margin-left: auto; }

/* The bow: middle row pushed away from the centre on both sides. */
.svcarc__side--left  .svcarc__item:nth-child(2) { transform: translateX(calc(-1 * var(--bow))); }
.svcarc__side--right .svcarc__item:nth-child(2) { transform: translateX(var(--bow)); }

.svcarc__icon {
  flex: none;
  width: 79px;
  height: 71px;
  display: grid;
  place-items: center;
  color: var(--brand);
}
.svcarc__icon svg { width: 100%; height: 100%; }

/* MEASURED: Tenor Sans 22px, weight 500, letter-spacing normal, maroon. */
.svcarc__title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1.3;
}
a.svcarc__item:hover .svcarc__title { color: var(--brand-dark); text-decoration: underline; }

.svcarc__media img,
.svcarc__media .ph { width: 100%; aspect-ratio: 296 / 584; object-fit: contain; }

@media (max-width: 1199px) {
  .svcarc__side { gap: 80px; }
  .svcarc { --bow: 4cqw; --indent: 4.5cqw; }
  .svcarc__title { font-size: 18px; }
  .svcarc__icon { width: 58px; height: 52px; }
  .svcarc__item { max-width: 300px; }
}



/* Below the tablet breakpoint the bow stops making sense: the columns are too
   narrow to curve around anything, so it collapses to a plain two-up list and
   the cut-out moves to the top. */
@media (max-width: 991px) {
  .svcarc__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .svcarc__media { grid-column: 1 / -1; grid-row: 1; max-width: 220px; margin-inline: auto; }
  .svcarc__side { gap: 34px; }
  .svcarc__side--right .svcarc__item { margin-left: 0; }
  .svcarc__side--left .svcarc__item:nth-child(2),
  .svcarc__side--right .svcarc__item:nth-child(2) { transform: none; }
  .svcarc__side--left { padding-left: 0; }
  .svcarc__side--right { padding-right: 0; }
}
@media (max-width: 575px) {
  .svcarc__grid { grid-template-columns: 1fr; }
}

/* Service cards (used on /services/ and /about/, not the homepage arc) ------ */
.svc__media { display: block; overflow: hidden; background: var(--surface-alt); }
/* MEASURED: editorial images (blog, service and category tiles) use
   transition: 1s ease-in-out and sit in an overflow:hidden box - a slow
   zoom, unlike product cards which crossfade at 0.4s and do not zoom.
   The 1s duration is measured; the 1.05 scale amount is not - the
   reference kept dropping the hover before it could be captured. */
.svc__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s ease-in-out; }
.svc:hover .svc__media img { transform: scale(1.05); }
/* MEASURED: service names are Tenor Sans 24px, weight 500, maroon. */
.svc__title { margin: 20px 0 10px; font-size: 24px; font-weight: 500; letter-spacing: normal; color: var(--brand); }
.svc__title a:hover { opacity: 0.7; }
.svc__blurb { color: var(--ink-muted); margin-bottom: 16px; }

/* Our story --------------------------------------------------------------- */
/* MEASURED: a giant centred "OUR STORY" at 312.96px maroon opens the section -
   the same oversized treatment as the hero wordmark, spanning the full
   container. Sized off the container so it fills the line at any width. */
.story__giant {
  /* Measured in-browser for "OUR STORY". At this ratio the computed size lands
     at 311.6px against the reference's 312.96px - it fills the container the
     same way the hero wordmark does. */
  --story-ratio: 6.017;
  font-size: calc(100cqw / var(--story-ratio));
  font-weight: 500;
  letter-spacing: normal;
  color: var(--brand);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  margin-bottom: 40px;
}
.story {
  container-type: inline-size;
  padding-inline: var(--gutter);
}
.story__head {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: normal;
  color: #000;
  margin-bottom: 22px;
}
.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1240px;
}
.story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.story__body p { color: var(--ink-muted); max-width: 48ch; }
.story__body .btn { margin-top: 14px; }

@media (max-width: 991px) {
  .story__inner { grid-template-columns: 1fr; gap: 40px; }
  .story__giant { margin-bottom: 28px; }
}

/* Journal cards ----------------------------------------------------------- */
.post-card__media { display: block; overflow: hidden; background: var(--surface-alt); }
.post-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s ease-in-out; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__date {
  margin: 18px 0 8px;
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-soft);
}
.post-card__title { font-size: 16px; margin-bottom: 10px; }
.post-card__title a:hover { opacity: 0.7; }
.post-card__excerpt { color: var(--ink-muted); }

/* ==========================================================================
   Alternative hero treatments (homeLayouts.json)
   ========================================================================== */

/* Full-bleed image hero -------------------------------------------------- */
.heroimg {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--brand-dark);
}
.heroimg__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* The scrim is left-weighted because the copy sits left. If a photo is ever
   dropped in that is bright on the left, re-check the white-text contrast. */
.heroimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(40, 20, 16, 0.72) 0%, rgba(40, 20, 16, 0.25) 55%, transparent 100%);
}
.heroimg__inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter);
  max-width: 640px;
  color: #fff;
}
.heroimg__title { color: #fff; margin: 14px 0 18px; font-size: clamp(2rem, 4.4vw, 3.6rem); }
.heroimg__sub { color: #ece0dd; margin-bottom: 28px; max-width: 44ch; }
.heroimg .btn { background: #fff; color: var(--brand); }
.heroimg .btn:hover { background: var(--bg); }

/* Split editorial hero ---------------------------------------------------- */
.herosplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-block: 80px;
  min-height: calc(90vh - var(--header-h));
}
.herosplit__title { margin: 14px 0 18px; font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.herosplit__sub { color: var(--ink-muted); margin-bottom: 28px; max-width: 42ch; }
/* Cap the media height. At a 4:5 ratio a full-width column produces a ~920px
   hero on a wide screen, which pushes the copy off the fold. */
.herosplit__media { max-height: calc(100vh - var(--header-h) - 80px); overflow: hidden; }
.herosplit__media img,
.herosplit__media .ph {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - var(--header-h) - 80px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 991px) {
  .herosplit { grid-template-columns: 1fr; gap: 36px; padding-block: 52px; min-height: 0; }
  .heroimg { min-height: 70vh; }
}

/* Category tiles ---------------------------------------------------------- */
.cattile { display: block; }
.cattile__media { display: block; overflow: hidden; background: var(--surface-alt); }
.cattile__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s ease-in-out; }
.cattile:hover .cattile__media img { transform: scale(1.05); }
.cattile__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}
.cattile__title {
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: var(--tracking-head);
  text-transform: uppercase;
  color: var(--brand);
}
.cattile__n { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* Feature band above the footer -------------------------------------------
   MEASURED: icon 100x90, title Tenor Sans 22px/600 uppercase maroon,
   body Nunito 14px/600 UPPERCASE #222, all centred. */
.feats { text-align: center; }
.feats__swiper { position: relative; overflow: hidden; }
/* Without JS this stays a readable row rather than a clipped grid. */
.feats__swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 3);
  gap: 30px;
  overflow-x: auto;
}
/* MEASURED: the reference's icon is 100x90 on desktop and 90x81 on mobile -
   far larger than the 52x47 this build was drawing. */
.feat__icon {
  display: inline-block;
  color: var(--brand);
  margin-bottom: 18px;
  width: 100px;
  height: 90px;
}
.feat__icon svg { width: 100%; height: 100%; }
.feat__title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.feat__text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 40ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* MEASURED at a 430px viewport: icon 90x81, title 20px, body 13px. */
@media (max-width: 991px) {
  .feats__swiper:not(.swiper-initialized) .swiper-wrapper { grid-auto-columns: calc((100% - 30px) / 2); }
}
@media (max-width: 575px) {
  .feat__icon { width: 90px; height: 81px; }
  .feat__title { font-size: 20px; }
  .feat__text { font-size: 13px; }
  .feats__swiper:not(.swiper-initialized) .swiper-wrapper { grid-auto-columns: 100%; }
}

/* Carousels ---------------------------------------------------------------
   MEASURED: the reference's product and journal rows are Swiper carousels at
   3 per view with a 30px gap. Without JS this stays a horizontally scrollable
   row rather than becoming a dead, clipped grid. */
.prod-swiper { position: relative; overflow: hidden; }
.prod-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 3);
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.prod-swiper:not(.swiper-initialized) .swiper-slide { scroll-snap-align: start; }

/* The boxed row -------------------------------------------------------------
   MEASURED off the reference, which draws every one of these as a 1px
   #602f28 hairline:

     .swiper::after         top rule,    inset -15px left and right
     .swiper::before        bottom rule, inset -15px left and right
     .swiper-slide::before  1px vertical rule at each slide's right edge,
                            sitting 15px out, i.e. mid-gutter, full slide height
     .swiper-navigation     47px row, 1px rules top and bottom, with a
                            1px x 45px vertical divider dead centre

   -15px is exactly one --gutter, so the horizontal rules run out to the screen
   edge. They live on .prod-row because .prod-swiper clips its overflow. */
.prod-row { position: relative; }
.prod-row::before,
.prod-row::after {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  height: 1px;
  background: var(--brand);
  pointer-events: none;
}
.prod-row::before { top: 0; }
.prod-row::after { bottom: 0; }

/* The slide divider sits in the gutter between two cards, so with one card in
   view the previous slide's rule lands on the left edge and this one on the
   right - which is what closes the box. */
.prod-row .prod-swiper .swiper-slide { position: relative; padding-block: 15px; }
.prod-row .prod-swiper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: -15px;
  width: 1px;
  background: var(--brand);
  pointer-events: none;
}

.swiper-nav {
  position: absolute;
  top: 38%;
  z-index: 4;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: #f0efea;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* On desktop the arrows overlay the cards, so the navigation element is not a
   box of its own - the buttons position against .prod-row instead. */
.prod-row:hover .swiper-nav,
.prod-row:focus-within .swiper-nav { opacity: 1; }
/* The maroon comes from the .btn-hv wipe in base.css, not a background swap. */
.swiper-nav:hover { color: #f0efea; }
.swiper-nav--prev { left: 0; }
.swiper-nav--next { right: 0; }
.swiper-nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Keyboard users need the arrows even without a pointer hover. */
.swiper-nav:focus-visible { opacity: 1; }

/* MEASURED: on a phone the arrows move BELOW the carousel, centred, as two
   45x45 bone squares that are always visible - not side-anchored and revealed
   on hover, which a touch screen can never trigger. */
@media (max-width: 991px) {
  .prod-swiper:not(.swiper-initialized) .swiper-wrapper { grid-auto-columns: calc((100% - 30px) / 2); gap: 30px; }
  /* MEASURED: the arrow row is 47px tall and sits inside the boxed row, so its
     lower rule IS the row's bottom rule - only a top rule is drawn here. */
  .swiper-navigation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 47px;
    margin-inline: calc(var(--gutter) * -1);
    border-top: 1px solid var(--brand);
  }
  .swiper-navigation::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 45px;
    margin-top: -22px;
    background: var(--brand);
  }
  .swiper-nav { opacity: 1; width: 45px; height: 45px; background: #f0efea; }
  /* Arrows that sit in the boxed row flow inline within it. `relative`, never
     `static`: the hover wipe is an inset pseudo-element, and a static host
     would send it up to .prod-row and fill the whole row instead. */
  .swiper-navigation .swiper-nav {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none;
  }
  /* The journal row has no arrow row - its arrows stay inside the carousel and
     keep the bottom-centred placement the reference uses there. */
  .prod-swiper > .swiper-nav {
    position: absolute;
    top: auto;
    bottom: 0;
  }
  .prod-swiper > .swiper-nav--prev { left: 50%; transform: translateX(-45px); }
  .prod-swiper > .swiper-nav--next { right: 50%; transform: translateX(45px); }
  .prod-swiper:has(> .swiper-nav) { padding-bottom: 68px; }
  .swiper-nav.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
}
@media (max-width: 575px) {
  .prod-swiper:not(.swiper-initialized) .swiper-wrapper { grid-auto-columns: 80%; gap: 16px; }
}

/* Row-style section header ---------------------------------------------------
   MEASURED: product rows and the journal are NOT centred. The eyebrow and
   heading sit flush left at the container edge and the link is right-aligned on
   the same row; on a phone the link drops below, still left. Only the category
   list section uses the centred .sec-head. */
.sec-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.sec-row__eyebrow {
  font-size: 13px;      /* MEASURED */
  font-weight: 500;
  margin-bottom: 6px;
}
.sec-row__title {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
  line-height: 1.2;
}
.sec-row__link {
  flex: none;
  font-size: 13px;      /* MEASURED */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 3px;
  transition: opacity var(--dur) var(--ease);
}
.sec-row__link:hover { opacity: 0.6; }

@media (max-width: 767px) {
  .sec-row { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
}

/* Services arc on a phone --------------------------------------------------
   MEASURED at 430px: centre cut-out 92x182, icons 62x56, titles Tenor Sans
   15px/18px, rows 66px apart top-to-top.

   This block sits at the END of the file deliberately: the generic
   max-width:991px rules above set .svcarc__media { max-width: 220px } and
   .svcarc__side { gap: 34px }, and between two rules of equal specificity the
   later one wins. Putting these earlier silently did nothing. */
@media (max-width: 991px) {
  .svcarc__media {
    width: 92px;          /* explicit - the image is width:100%, so an auto
                             width here collapses the whole thing to zero */
    max-width: 92px;
    margin-inline: auto;
  }
  .svcarc__icon { width: 62px; height: 56px; }
  .svcarc__title { font-size: 15px; line-height: 18px; }
  .svcarc__side { gap: 10px; }
  .svcarc__item { min-height: 56px; max-width: none; gap: 12px; }
  /* The two side groups still exist in the markup, so the grid's own row gap
     shows up as a wider seam between item 3 and item 4 - 96px against 66px
     everywhere else. Matching it to the side gap makes the six read as one
     continuous column, which is how the reference presents them. */
  .svcarc__grid { row-gap: 10px; }
}

/* MEASURED: the reference's giant "OUR STORY" spans 336 of a 353px viewport -
   95% - against 86.7% here, because this section carries the standard 16px
   mobile gutter. Same 6.017 ratio, narrower container. Tightening just this
   section's inline padding matches it without shifting every other section. */
@media (max-width: 575px) {
  .story { padding-inline: 8px; }
  .story__inner { padding-inline: 8px; }
}