/** Shopify CDN: Minification failed

Line 738:0 Unexpected "}"

**/
/* Launch layer. Dawn retains its 10px rem scale; the editorial elements use
   explicit responsive sizes so they do not inherit undersized body copy. */
:root { --nav-h: 106px; --gutter: clamp(20px,4vw,64px); }
body { font-size: 16px; }
.btn { font-size: 12px; padding: 16px 30px; }
.bar__item { font-size: 11px; white-space: normal; text-align: center; line-height: 1.5; letter-spacing: .1em; padding-inline: 16px; }
.pdp__name { font-size: clamp(32px,4vw,56px) !important; }
.pdp__sub, .pdp .eyebrow { font-size: 13px; }
.pdp__price .now { font-size: 26px; }
.pdp .qty { font-size: 16px; min-height: 44px; }
/* Preserve Shopify's product copy; give its paragraphs and lists room to read. */
.pdp__body > .muted { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.pdp__body > .muted > * + * { margin-top: 18px; }
.pdp__body > .muted > p:has(+ ul) { margin-top: 28px; color: var(--ink); }
.pdp__body > .muted ul, .pdp__body > .muted ol { padding-left: 22px; list-style: revert; }
.pdp__body > .muted li + li { margin-top: 8px; }
.pdp__body > .muted > p + ul { margin-top: 10px; }
.pdp__body > form { display: grid; gap: 12px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.pdp__body > form > .eyebrow { display: block; margin: 0; }
.pdp__body > form > .qty { width: 120px; max-width: 100%; }
.pdp__body > form > .btn { margin-top: 8px; }
.ftr__top { grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 56px; }
.section { padding-block: 72px; }
.hdr { display: block; background: var(--bone); }
.hdr--over { background: var(--bone); color: var(--ink); }
.hdr--over .hdr__logo { color: var(--ink); }
.hdr__logo svg { width: 132px; height: 80px; }
.nav { gap: 24px; }
.nav a, .icon-btn, .arlo-subnav summary { font-size: 11px; letter-spacing: .12em; }
.arlo-mobile-menu { display: none; }
.arlo-subnav { position: relative; }
.arlo-subnav summary { cursor: pointer; padding: 12px 0; text-transform: uppercase; }
.arlo-subnav > div { position: absolute; top: 100%; left: 0; z-index: 65; min-width: 230px; padding: 20px; background: var(--bone); color: var(--ink); box-shadow: var(--shadow-md); }
.arlo-subnav > div a { display: block; padding: 10px 0; }
.hero--launch { min-height: min-content; margin-top: 0; aspect-ratio: 1672/941; background: var(--deep-dark); }
.hero--launch::after { background: linear-gradient(90deg,rgba(12,26,15,.6),rgba(12,26,15,.2) 43%,transparent 65%),linear-gradient(180deg,rgba(12,26,15,.4),transparent 30%); }
.hero--launch .hero__in { text-align: left; padding-top: 48px; padding-bottom: 48px; }
.hero--launch h1 { color: var(--cream); max-width: 8.3em; font-size: clamp(46px,5.5vw,84px); line-height: 1.05; }
.hero--launch .hero__sub { margin: 24px 0 0; max-width: 34ch; font-size: clamp(20px,1.7vw,25px); line-height: 1.5; }
.hero--launch .hero__cta { justify-content: flex-start; gap: 14px; margin-top: 34px; }
.hero--launch .hero__oval { font-size: 10px; margin-bottom: 26px; }
.hero--launch .btn { font-size: 10px; padding: 18px 23px; }
.hero--launch .hero__media img { object-position: center; filter: none; }
/* The video fills the hero exactly as the still did. */
.hero--launch .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Artist credit along the bottom of the hero frame. Deliberately quiet — it
   sits under the gradient so it reads on any frame of the loop without a
   backing plate, and it must never compete with the headline. */
.hero__credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 2;
  text-align: center;
  margin: 0;
  padding-inline: var(--gutter);
  font-family: var(--font-accent);
  font-size: clamp(10px, 1.05vw, 12px);
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .72;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(12, 26, 15, .55);
}
@media (prefers-reduced-motion: reduce) {
  /* Respect a reduced-motion preference: hold the poster frame instead of looping. */
  .hero--launch .hero__video { display: none; }
  .hero--launch .hero__media { background-size: cover; background-position: center; }
}
.hero--launch .hero__media::after { display: none; }
@media (min-width: 1001px) and (max-width: 1250px) {
  /* Bottom padding clears the absolutely-positioned credit line, which the
     CTA buttons were overlapping by a few pixels on narrow screens. */
  .hero--launch .hero__in { padding-top: 32px; padding-bottom: 84px; }
  .hero--launch h1 { font-size: clamp(46px,5vw,62px); }
  .hero--launch .hero__oval { margin-bottom: 20px; }
  .hero--launch .hero__cta { max-width: 32vw; margin-top: 24px; flex-direction: column; align-items: flex-start; }
}
.arlo-story { padding: 96px 0; scroll-margin-top: 36px; }
/* The collaboration band now carries the Oxalis blue itself rather than the
   neutral grey it had, so the section matches the print it is describing. */
.arlo-story--blue { background: var(--oxalis-soft); color: var(--oxalis); }
.arlo-story--blue .arlo-fine { color: var(--oxalis); opacity: .62; }
.arlo-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,7vw,104px); align-items: center; }
.arlo-story__grid--reverse .arlo-story__image { order: 2; }
.arlo-story__image { overflow: hidden; }
.arlo-story__image img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; }
.arlo-story__image .arlo-story__bag { aspect-ratio: 1; height: auto; object-fit: contain; object-position: center; }
.arlo-story__copy .eyebrow { font-size: 11px; line-height: 1.8; margin-bottom: 24px; }
.arlo-story__copy h2 { color: inherit; font-size: clamp(36px,3.9vw,58px); line-height: 1.08; margin-bottom: 28px; }
.arlo-prose { font-size: 16px; line-height: 1.85; }
.arlo-prose p + p, .arlo-prose p + h2, .arlo-prose ul + h2 { margin-top: 22px; }
.arlo-prose h2, .arlo-prose h3 { font-family: var(--font-display); line-height: 1.15; margin-bottom: 18px; }
.arlo-prose h2 { font-size: 34px; }
.arlo-prose ul, .arlo-prose ol { padding-left: 24px; margin: 20px 0; list-style: revert; }
.arlo-prose a { text-decoration: underline; text-underline-offset: 4px; }
.arlo-story__copy > .link-u { margin-top: 32px; }
.link-u { font-size: 11px; }
.arlo-coming-soon { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 28px; }
.arlo-signup { margin-top: 25px; }
.arlo-signup label, .arlo-form label { display: block; font-size: 13px; margin: 0 0 8px; }
.arlo-signup__row { display: flex; margin-top: 12px; }
.arlo-signup input, .arlo-form input, .arlo-form select, .arlo-form textarea { background: var(--bone); border: 1px solid #92978c; padding: 14px; width: 100%; min-width: 0; border-radius: 0; font-size: 16px; }
.arlo-signup .btn { background: #283554; color: #faf7f0; font-size: 10px; flex: 0 0 auto; padding: 16px 20px; }
.arlo-fine { font-size: 12px; line-height: 1.65; margin-top: 14px; }
.arlo-fine a { text-decoration: underline; }
.arlo-page { padding: 56px 0 96px; }
/* About's unwrapped image must scale both dimensions, not keep its HTML height. */
.arlo-page .arlo-story__grid > img { display: block; width: 100%; height: auto; }
.arlo-page__head { text-align: center; max-width: 900px; margin: 0 auto 70px; }
.arlo-page__head .eyebrow { font-size: 12px; }
.arlo-page__head h1 { font-size: clamp(42px,5vw,72px); line-height: 1.1; margin: 24px 0; }
.arlo-lede { font-family: var(--font-accent); font-size: 25px; line-height: 1.5; }
.arlo-contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px,8vw,130px); max-width: 1150px; margin: auto; }
.arlo-contact-grid .link-u { margin-top: 30px; }
.arlo-form { padding: 34px; background: var(--cream); }
.arlo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.arlo-form input, .arlo-form select, .arlo-form textarea { margin-bottom: 22px; }
.arlo-form .btn { margin-top: 25px; font-size: 11px; padding: 18px 30px; }
.arlo-form__status { padding: 20px 0; }
.arlo-form__status h2 { font-size: 32px; margin-bottom: 16px; }
.arlo-waitlist-dialog { border: 0; background: var(--cream); color: var(--ink); width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 28px; }
.arlo-waitlist-dialog::backdrop { background: rgba(20,24,15,.6); }
.arlo-waitlist-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.arlo-waitlist-dialog__head h2 { font-family: var(--font-display); font-size: 32px; }
.arlo-waitlist-dialog .arlo-form { padding: 24px 0 0; }
.arlo-waitlist-dialog [data-arlo-notify-intro] { margin-bottom: 25px; }
.arlo-journal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; }
.arlo-journal-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: 88% center; margin-bottom: 24px; }
.arlo-journal-card .eyebrow { font-size: 10px; }
.arlo-journal-card h2 { font-size: 30px; line-height: 1.2; margin: 18px 0; }
.arlo-journal-card p:not(.eyebrow) { font-size: 14px; margin-bottom: 22px; }
.arlo-journal-more { text-align: center; margin-top: 46px; }
.arlo-article__cover { width: 100%; max-width: 1000px; margin: 0 auto 54px; height: auto; }
.arlo-article__body { max-width: 730px; margin: 0 auto 40px; }
.arlo-article__body h2 { margin-top: 38px; }
.arlo-footer-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.arlo-footer-links h2 { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 20px; }
.arlo-footer-links a { display: inline-block; padding: 7px 0; font-size: 14px; }
.ftr .arlo-footer-links li a { font-size: 14px; }
.ftr .arlo-footer-links h2 { color: var(--cream); }
.ftr__brand svg { width: 210px; height: 126px; margin-bottom: 28px; }
.ftr__brand p { font-size: 15px; max-width: 30ch; }
.ftr__bottom { font-size: 12px; }
.pay svg { width: 36px; height: 23px; }
.card__media { aspect-ratio: 1/1; }
.card__image-link, .card__slide { display: block; width: 100%; height: 100%; }
.card__slide[hidden], .card__gallery-controls[hidden] { display: none; }
.card__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #70706c; cursor: pointer; display: grid; place-items: center; }
.card__arrow span { font-size: 0; }
.card__arrow span::before { content: ''; display: block; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.card__arrow--prev span::before { transform: rotate(-135deg); }
.card__arrow--next span::before { transform: rotate(45deg); }
.card__arrow--prev { left: 8px; }
.card__arrow--next { right: 8px; }
.card__arrow:hover { color: #454542; }
.card__arrow:focus-visible { outline: 2px solid #70706c; outline-offset: -6px; }
.card__image-dots { position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); z-index: 4; display: flex; gap: 5px; pointer-events: none; }
.card__image-dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: #b8b8b2; }
.card__image-dot.is-active { background: var(--deep); }
.card__image-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Keep the buttons on one line across a row. With no price line on the card,
   a title that wraps to one line instead of two would otherwise float its
   button well above its neighbours' and leave the row visibly ragged. */
.card { grid-template-rows: auto 1fr; }
.card__body { display: flex; flex-direction: column; }
.card__actions { margin-top: auto; padding-top: 14px; }
.card__actions form { margin: 0; }
.card__actions .btn { width: 100%; min-height: 44px; text-align: center; }
.card__actions .btn:disabled { opacity: .55; cursor: not-allowed; }
/* Route to the other pack sizes, secondary to the add button above it. */
.card__more {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.card__more:hover { color: var(--ink); }
.card__media--contain img { object-fit: contain; padding: 0; }
.card:hover .card__media--contain img { transform: none; }
.card__name { font-size: 22px; }
.card__brand, .badge, .card__sub { font-size: 11px; }
.price { font-size: 15px; }
/* The artwork is the focus: square, uncropped mockups without photo effects. */
.arlo-sleeves { scroll-margin-top: 40px; }
.arlo-sleeves__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
/* Group heading above each product-type band in the botanical collection. */
.arlo-sleeves__cat {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 56px 0 24px;
}
.arlo-sleeves__cat:first-of-type { margin-top: 0; }
.arlo-sleeves__head .eyebrow, .arlo-sleeve-product .eyebrow { font-size: 11px; line-height: 1.8; }
.arlo-sleeves__head :is(h1,h2) { font-size: clamp(34px,4.2vw,60px); line-height: 1.12; margin: 18px 0 24px; }
.arlo-sleeves__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.arlo-sleeve-card__image, .arlo-sleeve-product__image { background: #f7f3eb; aspect-ratio: 1/1; overflow: hidden; }
.arlo-sleeve-card__image img, .arlo-sleeve-product__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Same rule as .card: the CTA sits on the bottom edge of the card so a row of
   buttons lines up regardless of how many lines each design name takes. The
   grid stretches every card to the tallest in its row, the body takes the
   leftover height, and margin-top:auto drops the button (and the View details
   link under it) to the floor. */
.arlo-sleeve-card { display: grid; grid-template-rows: auto 1fr; }
.arlo-sleeve-card__body { padding-top: 22px; display: flex; flex-direction: column; }
.arlo-sleeve-card__body .btn { margin-top: auto; }
.arlo-sleeve-card__status { color: #283554; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.arlo-sleeve-card h3 { font-family: var(--font-display); font-size: clamp(26px,2.4vw,34px); line-height: 1.2; margin: 12px 0; }
.arlo-sleeve-card__price { font-size: 18px; margin-bottom: 20px; }
.arlo-sleeve-card__price span, .arlo-sleeve-product__price span { font-size: 13px; }
.arlo-sleeve-card .btn { width: 100%; min-height: 48px; font-size: 11px; }
.arlo-sleeve-card .link-u { display: inline-block; padding: 14px 0 4px; }
.arlo-sleeves__note { text-align: center; margin: 32px auto 0; max-width: 720px; }
.arlo-sleeves__stories { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,90px); margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.arlo-sleeves__stories .eyebrow { font-size: 11px; margin-bottom: 18px; }
.arlo-sleeves__stories h2 { font-size: clamp(30px,3vw,42px); }
.arlo-sleeve-product > .wrap > .link-u { display: inline-block; margin-bottom: 36px; }
.arlo-sleeve-product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,96px); align-items: center; }
.arlo-sleeve-product h1 { font-size: clamp(36px,4vw,58px); line-height: 1.1; margin: 20px 0; }
.arlo-sleeve-product__price { font-size: 26px; margin: 24px 0; }
.arlo-sleeve-product__copy > .btn { margin-top: 30px; min-height: 48px; width: 100%; }
.arlo-sleeve-product__story { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 850px) {
  .arlo-sleeves__stories { grid-template-columns: 1fr; }
  .arlo-sleeves__grid { gap: 20px; }
  .arlo-sleeve-product__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .arlo-sleeves__grid { grid-template-columns: 1fr; gap: 44px; }
  .arlo-sleeves__head { margin-bottom: 32px; text-align: left; }
}
/* The cart, search and 404 retain Dawn's native markup/behaviour. Scope this
   bridge to those pages so their typography matches Arlo without changing
   shared product templates, forms, prices or checkout behaviour. */
#MainContent:is([data-template="cart"], [data-template="search"], [data-template="404"]) {
  --font-heading-family: var(--font-display);
  --font-body-family: var(--font-body);
  --buttons-radius: 999px;
  --buttons-radius-outset: 999px;
}
#MainContent:is([data-template="cart"], [data-template="search"], [data-template="404"]) h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
#MainContent:is([data-template="cart"], [data-template="search"], [data-template="404"]) .field__input {
  font-family: var(--font-body);
  font-size: 16px;
}
#MainContent[data-template="cart"] :is(.cart__checkout-button, .cart__warnings > .button),
#MainContent[data-template="404"] .template-404 > .button {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 48px;
}
/* Arlo's square .card__media and absolutely positioned .badge are different
   components from Dawn's same-named search elements. Keep native search
   ratios and badge slots intact instead of inheriting those global rules. */
#MainContent[data-template="search"] .card-wrapper .card__media {
  aspect-ratio: auto;
}
#MainContent[data-template="search"] .card-wrapper .card__media img {
  object-fit: contain;
  filter: none;
  transform: none;
}
#MainContent[data-template="search"] .card-wrapper .card__media::after {
  display: none;
}
#MainContent[data-template="cart"] .cart-item__price-wrapper .price {
  white-space: nowrap;
}
#MainContent[data-template="search"] .card-wrapper .badge {
  position: static;
  box-shadow: none;
  background-color: rgb(var(--color-badge-background));
  color: rgb(var(--color-badge-foreground));
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .04em;
  text-indent: 0;
}
#MainContent[data-template="search"] .card__heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.2;
}
#MainContent[data-template="404"] .template-404 {
  padding-block: clamp(54px, 9vw, 120px);
}
.sec-head .eyebrow { font-size: 11px; }
.sec-head h2 { font-size: clamp(34px,4vw,58px); }
.sec-head h1 { font-size: clamp(38px,5vw,66px); }
.sec-head p { font-size: 16px; }
/* The original theme hid content without installing a reveal observer. */
.js [data-reveal] { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .nav { display: none; }
  .arlo-mobile-menu { display: block; font-size: 12px; }
  .arlo-mobile-menu summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
  .arlo-mobile-menu > nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bone); color: var(--ink); padding: 24px var(--gutter); box-shadow: var(--shadow-md); max-height: 75vh; overflow-y: auto; }
  .arlo-mobile-menu nav > a { display: block; padding: 15px 0; font-size: 15px; }
  .arlo-mobile-menu .arlo-subnav > div { position: static; box-shadow: none; }
  /* Keep the complete campaign scene above the copy on tablets as well as
     phones; a tall, narrow background crop cuts the bag and cups off. */
  .hdr--over { color: var(--ink); background: var(--bone); }
  .hdr--over .hdr__logo { color: var(--ink); }
  .hero--launch { margin-top: 0; min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; }
  .hero--launch .hero__media { position: relative; inset: auto; width: 100%; z-index: 0; }
  .hero--launch .hero__media img { aspect-ratio: 1672/941; height: auto; object-position: center; object-fit: contain; }
  .hero--launch::after { display: none; }
  .hero--launch .hero__in { padding: 35px var(--gutter) 44px; }
  .hero--launch .hero__oval { display: none; }
  .hero--launch h1 { font-size: clamp(43px,11vw,65px); max-width: 10em; }
  .hero--launch .hero__sub { font-size: 23px; }
  .hero--launch .hero__cta { gap: 12px; margin-top: 25px; }
  .hero--launch .btn { font-size: 9px; padding: 16px 14px; }
  .arlo-story { padding: 64px 0; }
}
@media (max-width: 700px) {
  :root { --nav-h: 88px; }
  .hdr__logo svg { width: 112px; height: 68px; }
  .hdr__in { grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .arlo-story__grid, .arlo-contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .arlo-story__grid--reverse .arlo-story__image { order: 0; }
  .arlo-story__copy h2 { font-size: 42px; }
  .arlo-signup__row { flex-direction: column; gap: 8px; }
  .arlo-signup .btn { padding: 18px; }
  .arlo-page { padding: 34px 0 60px; }
  .arlo-page__head { margin-bottom: 40px; }
  .arlo-form { padding: 22px; }
  .arlo-form__row { grid-template-columns: 1fr; gap: 0; }
  .arlo-journal-grid { grid-template-columns: 1fr; gap: 42px; }
  .arlo-footer-links { margin-top: 12px; }
  .ftr__top { grid-template-columns: 1fr; gap: 32px; }
  .section { padding-block: 48px; }
  .card__name { font-size: 19px; }
}

/* ---- Shopify policy pages -------------------------------------------------
   Policy bodies arrive from Shopify as raw rich text with no theme classes, so
   they inherit the brand reset in arlo-brand.css — which zeroes every margin
   and sets `list-style: none`. The result is one unbroken block of text with
   no numbering on the ordered lists. These rules are scoped to the policy
   wrapper so they restore document typography without touching the designed
   sections that rely on that reset.

   Sizes are explicit px, not the --step-* tokens: the root font-size here is
   10px (Dawn's 62.5%) while those tokens were authored against a 16px root, so
   they resolve about a third too small. The rest of this file sets px for the
   same reason. */
.shopify-policy__container {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.shopify-policy__title { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.shopify-policy__title h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.1;
}
.shopify-policy__body { max-width: 68ch; }
.shopify-policy__body > :first-child { margin-top: 0; }
.shopify-policy__body h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  margin: 2.2em 0 .6em;
}
.shopify-policy__body h3 {
  font-family: var(--font-accent);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.35;
  margin: 1.9em 0 .5em;
}
.shopify-policy__body p { margin: 0 0 1.15em; line-height: 1.75; }
.shopify-policy__body ul,
.shopify-policy__body ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.shopify-policy__body ul { list-style: disc; }
.shopify-policy__body ol { list-style: decimal; }
.shopify-policy__body li { margin-bottom: .5em; line-height: 1.75; }
.shopify-policy__body li::marker { color: var(--deep); }
.shopify-policy__body li > p { margin-bottom: .5em; }
.shopify-policy__body a { text-decoration: underline; text-underline-offset: .18em; }
.shopify-policy__body strong { font-weight: 600; }

/* ---- Brass accents --------------------------------------------------------
   The palette defines --brass but nothing used it. These are the small metal
   moments: the eyebrow above a section heading, and the hairline that sits
   under it. Enough to register as a considered accent, not enough to read as
   a second brand colour. */
.sec-head .eyebrow,
.arlo-sleeves__head .eyebrow,

.arlo-sleeves__cat { color: var(--coral-deep); }
.arlo-sleeves__cat::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin: 14px auto 0;
  background: var(--coral-deep);
  opacity: .55;
}

/* ---- Botanical Collection page -------------------------------------------
   The collaboration's own page takes Lisa's colourway rather than the site's
   default cream and green: the Oxalis blue carries the headings and grounds,
   with the Botanical print's coral as the accent. Scoped to the blue tone so
   the same section stays neutral on the home page. */
.arlo-sleeves--blue {
  background: var(--oxalis-soft);
  color: var(--oxalis);
}
.arlo-sleeves--blue .arlo-sleeves__head .eyebrow { color: var(--coral); }
.arlo-sleeves--blue .display { color: var(--oxalis); }
.arlo-sleeves--blue .arlo-prose { color: var(--oxalis); }
.arlo-sleeves--blue .arlo-coming-soon { color: var(--coral); }
.arlo-sleeves--blue .arlo-sleeves__cat { color: var(--coral); }
.arlo-sleeves--blue .arlo-sleeves__cat::after { background: var(--coral); }
.arlo-sleeves--blue .arlo-sleeve-card__status { color: var(--coral); }
.arlo-sleeves--blue .arlo-sleeve-card h3 { color: var(--oxalis); }
.arlo-sleeves--blue .arlo-sleeve-card__image { background: var(--cream); }
.arlo-sleeves--blue .btn { background: var(--oxalis); color: var(--cream); }
.arlo-sleeves--blue .btn:hover { background: var(--oxalis-deep, #16305C); }
.arlo-sleeves--blue .link-u { color: var(--oxalis); }
.arlo-sleeves--blue .arlo-sleeves__stories { border-top: 1px solid rgba(32,67,123,.18); }
.arlo-sleeves--blue .arlo-sleeves__stories h2 { color: var(--oxalis); }
.arlo-sleeves--blue .arlo-fine { color: var(--oxalis); opacity: .62; }

/* Header treatments. The band is its own full-width strip so a header can be
   distinguished from the grid below without tinting the whole page.

   The flatness this fixes was never really the colour: it was three identical
   coral small-caps labels competing, a 85-character measure, and display type
   only a little larger than the body. So the type does the work and the ground
   stays light. */
.arlo-sleeves__band { display: block; }
/* One column until there is genuinely room for two; the headline needs its
   measure more than the picture needs the width. */
.arlo-sleeves__bandgrid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.arlo-sleeves__bandmedia img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md);
}
@media (min-width: 950px) {
  .arlo-sleeves__bandgrid:has(.arlo-sleeves__bandmedia) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
  .arlo-sleeves__bandgrid:has(.arlo-sleeves__bandmedia) .display { font-size: clamp(42px, 4.6vw, 68px); }
  .arlo-sleeves__bandmedia img { aspect-ratio: 1 / 1; }
}

.arlo-sleeves--blush { background: var(--bone); }
.arlo-sleeves--blush .arlo-sleeves__band {
  background: var(--coral-soft);
  padding-block: clamp(48px, 6vw, 96px);
  margin-bottom: clamp(44px, 5vw, 76px);
}
.arlo-sleeves--blush .arlo-sleeves__head { margin-bottom: 0; max-width: none; }
.arlo-sleeves--blush .arlo-sleeves__band .eyebrow { color: var(--coral-deep); }
/* Real scale contrast against the body, which is what makes a header lead. */
.arlo-sleeves--blush .arlo-sleeves__band .display {
  color: var(--deep);
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: .99;
  letter-spacing: -.02em;
  max-width: 14ch;
}
.arlo-sleeves--blush .arlo-sleeves__band .arlo-prose {
  color: var(--deep);
  max-width: 52ch;
  font-size: 16px;
}
/* Demoted: it was a third coral label fighting the eyebrow and the category. */
.arlo-sleeves--blush .arlo-sleeves__band .arlo-coming-soon {
  color: var(--deep);
  opacity: .6;
  letter-spacing: .14em;
}
.arlo-sleeves--blush .arlo-sleeves__band .btn { background: var(--deep); color: var(--bone); }
.arlo-sleeves--blush .arlo-sleeves__cat { color: var(--coral-deep); }
.arlo-sleeves--blush .arlo-sleeves__cat::after { background: var(--coral); }
.arlo-sleeves--blush .arlo-sleeve-card__status { color: var(--coral-deep); }
.arlo-sleeves--blush .arlo-sleeve-card h3 { color: var(--deep); }
.arlo-sleeves--blush .arlo-sleeve-card__image { background: var(--cream); }
.arlo-sleeves--blush .arlo-sleeves__stories h2 { color: var(--deep); }

/* Kept available in the editor, not in use. */
.arlo-sleeves--ink { background: var(--bone); }
.arlo-sleeves--ink .arlo-sleeves__band {
  background: var(--deep-dark); color: var(--cream);
  padding-block: clamp(44px, 5.5vw, 84px); margin-bottom: clamp(44px, 5vw, 76px);
}
.arlo-sleeves--ink .arlo-sleeves__head { margin-bottom: 0; }
.arlo-sleeves--ink .arlo-sleeves__band .display { color: var(--bone); }
.arlo-sleeves--ink .arlo-sleeves__band .arlo-prose { color: rgba(244,239,228,.82); }
.arlo-sleeves--ink .arlo-sleeves__band .eyebrow { color: #C9A9A5; }
.arlo-sleeves--ink .arlo-sleeves__band .arlo-coming-soon { color: rgba(244,239,228,.6); }
.arlo-sleeves--ink .arlo-sleeves__band .btn { background: var(--bone); color: var(--deep-dark); }
.arlo-sleeves--ink .arlo-sleeves__cat { color: var(--coral-deep); }
.arlo-sleeves--ink .arlo-sleeve-card h3 { color: var(--deep); }

/* The header CTA sits below the coming-soon line, centred with the header. */
.arlo-sleeves__cta { margin: 28px 0 0; }
.arlo-sleeves__cta .btn { min-width: 230px; }

/* The announcement bar carries the Oxalis blue rather than the footer green,
   so the top of every page nods to the collaboration and the bar stops
   reading as a duplicate of the footer. 8.52:1 against cream — AAA. */
.bar { background: var(--oxalis); }

/* ---- Story bands ----------------------------------------------------------
   Each story pairs an image with its text and alternates side, replacing the
   two prose columns that left a dead gap wherever one ran shorter. */
.arlo-sleeves__stories { display: block; }
.arlo-story-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(36px, 5vw, 64px);
}
.arlo-story-band + .arlo-story-band { border-top: 1px solid rgba(32, 67, 123, .14); }
.arlo-story-band--flip .arlo-story-band__media { order: 2; }
.arlo-story-band__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.arlo-story-band__body { min-width: 0; }
.arlo-story-band__body .eyebrow { display: block; margin-bottom: 14px; }
@media (max-width: 749px) {
  .arlo-story-band { grid-template-columns: 1fr; gap: 24px; }
  .arlo-story-band--flip .arlo-story-band__media { order: 0; }
}

/* Lisa's fern study in the footer. It sits in the brand column's empty half
   rather than over the links, so it no longer has to be faded to stay out of
   the way of the type — it can run at near-full strength, which is the only
   way a green watercolour survives this dark blue. */
.ftr { position: relative; overflow: hidden; }
.ftr__brand { position: relative; }
/* Text always wins the stacking order, whatever the art does. */
.ftr__brand > a, .ftr__brand > p { position: relative; z-index: 1; }
.ftr__art {
  display: block;
  width: min(220px, 55%);
  height: auto;
  margin-top: var(--sp-2);
  opacity: .92;
  pointer-events: none;
  z-index: 0;
}
.ftr .wrap > * { position: relative; z-index: 1; }
/* Wide enough for the brand column to have a genuinely empty right half:
   the tagline wraps at ~284px, so the art is pinned to the column's right
   edge and lifted into the gap beside it instead of adding footer height. */
@media (min-width: 1280px) {
  .ftr__art {
    position: absolute;
    right: -8px;
    bottom: -88px;
    width: min(280px, 46%);
    margin-top: 0;
  }
}

/* A lone film shouldn't sit in half a two-column grid. */
.arlo-made-local__films--single { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* ---- Anti-centre bias -----------------------------------------------------
   Every section header was centred, which is what produced the templated,
   flat rhythm — each band looked like the last. Headers now sit left on the
   measure, the way an editorial page reads, and the display type gets real
   scale contrast against the body copy instead of sitting a notch above it. */
.sec-head {
  justify-items: start;
  text-align: left;
  max-width: 62ch;
  margin-inline: 0;
}
.sec-head h2 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.015em; }
.sec-head .muted { max-width: 52ch; }

.arlo-sleeves__head {
  max-width: 68ch;
  margin: 0 0 56px;
  text-align: left;
}
.arlo-sleeves__head :is(h1, h2) {
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.arlo-sleeves__cat { text-align: left; }
.arlo-sleeves__cat::after { margin-inline: 0; }
.arlo-sleeves__cta { text-align: left; }
.arlo-coming-soon { text-align: left; }

@media (max-width: 749px) {
  .sec-head h2 { font-size: clamp(32px, 9vw, 46px); }
  .arlo-sleeves__head :is(h1, h2) { font-size: clamp(34px, 9.5vw, 50px); }
}

/* ---- Inset hero -----------------------------------------------------------
   The image sits in from the page edges on the paper ground, with the
   headline beneath it and left-aligned, rather than type floating over a
   full-bleed photograph. Type sits on paper, so it reads at full contrast
   and needs no scrim — and the ground becomes part of the composition. */
.hero--inset {
  min-height: 0;
  aspect-ratio: auto;
  margin-top: 0;
  display: block;
  background: var(--bg);
  overflow: visible;
  isolation: auto;
}
.hero--inset::after { display: none; }

/* The inset comes from padding on the section, not margin on the media: the
   media is width:100%, so a margin on it renders 20px wider than its
   container and pushes the page into horizontal scroll. */
.hero--inset { padding: clamp(10px, 1.4vw, 20px); }
.hero--inset .hero__media {
  position: relative;
  inset: auto;
  z-index: 0;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.hero--inset .hero__media::after { display: none; }
.hero--inset .hero__media img,
.hero--inset .hero__video { width: 100%; height: 100%; object-fit: cover; }

.hero--inset .hero__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 52px) var(--gutter) clamp(40px, 6vw, 80px);
  text-align: left;
  color: var(--text);
}
.hero--inset h1 {
  color: var(--deep);
  max-width: 16ch;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.0;
  letter-spacing: -.02em;
}
.hero--inset .hero__sub {
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: 20px;
}
.hero--inset .hero__oval { color: var(--coral-deep); margin-bottom: 18px; }
.hero--inset .hero__cta { justify-content: flex-start; }
.hero--inset .btn--cream { background: var(--deep); color: var(--cream); }
.hero--inset .btn--ghost-light { border-color: var(--deep); color: var(--deep); }

/* Credit rejoins the flow — there is no dark frame to sit it on any more. */
/* Oxalis leaves in the hero's empty half. Placed by eye rather than on a grid
   so they read as specimens laid down, not as a pattern. Percentages keep the
   arrangement proportional as the hero grows. */
.hero__leaves { display: none; }
.hero__leaf {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* The copy is a staircase, not a column: the headline runs to ~70% of the
   width but the paragraph below it stops around 42%. Each leaf is placed
   against whichever edge it sits beside, rather than all of them clearing
   the widest line.

   940px is the point where a clear column actually exists to the right of the
   headline — roughly 290px at that width. Below it there is nowhere for a leaf
   to go but on top of the type, so they go away. */
@media (min-width: 940px) {
  .hero--inset .hero__in { position: relative; }
  .hero__leaves {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 52%;
    right: 1%;
    z-index: 0;
  }
  .hero--inset .hero__in > :not(.hero__leaves) { position: relative; z-index: 1; }

  /* Upper band — must clear the headline. */
  .hero__leaf--4 { width: 15%; top: 8%;  left: 64%; transform: rotate(-16deg); }
  /* Lower band — only clears the paragraph and the buttons, so these two
     carry the width the upper leaf cannot. */
  .hero__leaf--2 { width: 30%; top: 42%; left: 14%; transform: rotate(13deg); }
  .hero__leaf--3 { width: 24%; top: 70%; left: 56%; transform: rotate(6deg); }
}

@media (min-width: 1180px) {
  .hero__leaves { left: 45%; }
  .hero__leaf--4 { width: 12%; top: 6%;  left: 70%; }
  .hero__leaf--2 { width: 24%; top: 40%; left: 22%; }
  .hero__leaf--3 { width: 19%; top: 68%; left: 60%; }
}

@media (min-width: 1500px) {
  .hero__leaf--2 { width: 21%; }
  .hero__leaf--3 { width: 17%; }
}
}

.hero--inset .hero__credit {
  position: static;
  text-align: left;
  padding-inline: 0;
  margin-top: 26px;
  color: var(--text-muted);
  opacity: 1;
  text-shadow: none;
}
@media (max-width: 749px) {
  .hero--inset .hero__media { aspect-ratio: 4 / 5; }
  .hero--inset h1 { font-size: clamp(34px, 10vw, 52px); }
}

/* ---- Accent, promoted ------------------------------------------------------
   The coral was scoped to the collaboration page only, so every other page had
   no accent at all — just blue type on pale paper, which is what read as flat.
   It now does real work site-wide: the one accent, used consistently. */
.sec-head .eyebrow,
.arlo-sleeves__head .eyebrow { color: var(--coral-deep); }
.arlo-coming-soon { color: var(--coral-deep); }
.arlo-sleeves__cat { color: var(--coral-deep); }
.arlo-sleeves__cat::after { background: var(--coral); }
.link-u { text-decoration-color: var(--coral); text-underline-offset: .28em; }
.link-u:hover { color: var(--coral-deep); }
.badge--urgent { background: var(--coral-deep); color: var(--cream); }
.card__more { color: var(--coral-deep); }
.card__more:hover { color: var(--deep); }
.arlo-story .link-u { color: var(--deep); }

/* A mid-tone so the page isn't only pale-paper and near-black blue. The scale
   had nothing between luminance 236 and 30, which is what flattens it. */
.arlo-story--blue { background: var(--oxalis-soft); }
.arlo-made-local { border-block: 1px solid rgba(32,67,123,.12); }