/** Shopify CDN: Minification failed

Line 692:0 All "@import" rules must come first

**/
/* ============================================================
   REEF — reef design system (prefix: reef-)
   Palette: slate #3E4F52 34% | stone #DCD3C4 42% | brick #B85C3C 14% | ink #20282A 10%
   Rules: radius 0 (circles and SVG polygons only), rocks are straight-edged
   polygons of 4-6 points, brick never fills a section and stays under 160x160,
   no gradients, no filters, no texture, no noise.
   ============================================================ */


/* ============================================================
   Site background: the harbour watercolour sits behind everything on a fixed
   layer, veiled by a warm paper wash so body text keeps its contrast.
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url(//ryanlife.shop/cdn/shop/t/2/assets/reef-bg.jpg?v=67004341909492260851794629770);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(250, 250, 249, 0.66);
  pointer-events: none;
}

/* Sections that carry their own photograph or slate fill stay opaque. */
.reef,
.reef-band,
.reef-mail,
footer.footer,
.narwal-banner-section {
  background-color: transparent;
}
.reef-line,
.reef-tides,
.reef-ledge,
.reef-chain,
.reef-col {
  background-color: transparent;
}
.reef-mail,
.footer {
  background-color: var(--slate) !important;
}

:root {
  --slate: #34474b;
  --stone: #efece5;
  --brick: #b4553a;
  --ink: #1e2527;
  --sand: #cfc3aa;
}

body,
.page-container,
#PageContainer {
  background: var(--stone);
}


/* Hero photograph comes from the theme asset so no file upload is required. */
.narwal-banner-section {
  background-image: url(//ryanlife.shop/cdn/shop/t/2/assets/reef-hero.jpg?v=6567685256551375021794629770);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  background-color: var(--slate);
}
.narwal-banner-section .banner-bg { display: none; }
@media (max-width: 767px) {
  .narwal-banner-section { background-position: center center; }
}

/* Body sits on the painted background layer. */
body,
.page-container,
#PageContainer,
.wrapper-body,
.main-content {
  background-color: transparent !important;
}

/* ---- one left axis: content 1180 inside 1440, 130 each side ---- */
.reef {
  background: var(--stone);
  color: var(--ink);
  position: relative;
}
.reef__in {
  width: 1180px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 1300px) {
  .reef__in {
    width: auto;
    margin: 0 40px;
  }
}
@media (max-width: 767px) {
  .reef__in {
    margin: 0 20px;
  }
}

/* ---- six type steps, nothing else ---- */
.reef .r-display {
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
}
.reef .r-h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}
.reef .r-h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}
.reef .r-body {
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  max-width: 620px;
}
.reef .r-note {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 460px;
}
.reef .r-eyebrow {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 767px) {
  .reef .r-display { font-size: 38px; }
  .reef .r-h2 { font-size: 26px; }
  .reef .r-h3 { font-size: 19px; }
  .reef .r-body { font-size: 16px; }
}

/* ---- buttons: two in the whole page, radius 0 ---- */
.reef .r-btn,
.reef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 36px;
  background: var(--brick);
  color: var(--stone);
  border: 0;
  border-radius: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.reef .r-btn:hover,
.reef-btn:hover {
  background: var(--ink);
  color: var(--stone);
}

/* ---- frames: 1.5px ink, stone fill, no mask over the photo ---- */
.reef .r-frame {
  background: var(--stone);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.reef .r-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---- hero: the original narwal banner, restyled to the reef grid ---- */
.narwal-banner-section {
  background-color: var(--slate) !important;
}
.narwal-banner-section .banner-overlay { opacity: 0 !important; background: transparent !important; }
.narwal-banner-section .banner-content-container {
  max-width: 1440px;
  padding-left: 130px;
  padding-right: 130px;
  padding-bottom: 200px;
  align-items: flex-end;
}
.narwal-banner-section .banner-text-box {
  max-width: 720px;
  text-align: left;
}
.narwal-banner-section .banner-title {
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--stone);
  margin: 0 0 16px 0;
}
.narwal-banner-section .banner-title span,
.narwal-banner-section .banner-title font {
  color: var(--stone) !important;
}
.narwal-banner-section .banner-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: var(--stone);
  opacity: 0.8;
}
.narwal-banner-section .banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 36px;
  background: var(--brick);
  border: 0;
  border-radius: 0;
  color: var(--stone);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.narwal-banner-section .banner-btn:hover {
  background: var(--ink);
  color: var(--stone);
}
@media (max-width: 1300px) {
  .narwal-banner-section .banner-content-container {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .narwal-banner-section .banner-content-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 48px;
    align-items: flex-end;
    text-align: left;
  }
  .narwal-banner-section .banner-title { font-size: 38px; }
  .narwal-banner-section .banner-subtitle { font-size: 16px; }
}


/* ============================================================
   Identity: badge logo 120px on desktop, 80px centred on mobile
   ============================================================ */
.site-header .header-pc .header-logo a.logo-title,
.site-header .header-pc .header-logo .logo-img {
  display: inline-flex;
  align-items: center;
  width: auto;
  color: var(--stone);
}
.site-header .header-pc .header-logo img,
.site-header .header-pc .header-logo .logo-img img,
.site-header .header-pc .header-logo img[itemprop="logo"] {
  display: block;
  width: 120px;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .site-header .header-mb .header-logo a.logo-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
  }
  .site-header .header-mb .header-logo img,
  .site-header .header-mb .header-mb-middle,
  .header-mb .header-mb-middle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .header-mb .header-logo {
    margin: 0 auto;
    text-align: center;
  }
  .header-mb .header-logo .logo-img { display: inline-flex; justify-content: center; }
  .header-mb .header-logo .logo-img img,
  .header-mb .header-logo img[itemprop="logo"],
  .header-logo .logo-img img {
    width: 80px;
    height: auto;
    max-height: 80px;
    margin: 0 auto;
    object-fit: contain;
  }
}

/* Hero: full-bleed photograph, no mask, art-lettering for the headings */
.narwal-banner-section .banner-bg img { object-fit: cover; }
.narwal-banner-section .banner-content-container {
  padding-bottom: 200px;
}
@media (max-width: 767px) {
  .narwal-banner-section .banner-content-container { padding-bottom: 96px; }
}
.narwal-banner-section .banner-title {
  font-family: "Poppins", "Playfair Display", Georgia, serif;
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 18px rgba(20, 26, 28, 0.45);
}
.narwal-banner-section .banner-title span {
  color: var(--brick) !important;
  font-style: italic;
  letter-spacing: -0.04em;
}
.narwal-banner-section .banner-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 12px rgba(20, 26, 28, 0.5);
}
.narwal-banner-section .banner-btn {
  box-shadow: 0 8px 26px rgba(20, 26, 28, 0.28);
}

/* ---- bands ---- */
.reef-band {
  background: var(--stone);
  height: 56px;
  overflow: hidden;
}
.reef-band__stage,
.reef-band__stage svg {
  display: block;
  width: 100%;
  height: 56px;
}
@media (max-width: 767px) {
  .reef-band,
  .reef-band__stage,
  .reef-band__stage svg { height: 44px; }
}

/* ============================================================
   01 / Rock Line
   ============================================================ */
.reef-line { padding: 72px 0 88px; }
.reef-line__stage { position: relative; height: 660px; }

/* The photograph frame: absolute, 620x520, sits at the block origin. */
.reef.reef-line .reef-line__frame {
  position: absolute; left: 0; top: 0;
  width: 620px; height: 520px;
  display: block; z-index: 1;
}
.reef .reef-line__frame > img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply;
}
.reef .reef-line__frame .reef-line__slab {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

/* 13-point reef skyline across the block floor. */
.reef .reef-line__skyline {
  position: absolute; left: 0; top: 0; width: 1180px; height: 660px;
  z-index: 2; pointer-events: none;
}

/* Copy column starts at x=680 of the 1180 block. */
.reef .reef-line__copy { position: absolute; left: 680px; top: 60px; width: 460px; z-index: 3; }
.reef .reef-line__title { margin-top: 28px; max-width: 460px; }
.reef .reef-line__body { margin-top: 34px; max-width: 440px; }
.reef .reef-line__note { margin-top: 52px; max-width: 440px; }
.reef .reef-line__brick-mark { position: absolute; left: 1080px; top: 282px; z-index: 3; display: block; }

@media (max-width: 1300px) {
  .reef-line__stage { height: auto; display: grid; gap: 32px; }
  .reef.reef-line .reef-line__frame {
    position: relative; left: auto; top: auto;
    width: 100%; max-width: 620px; height: auto; aspect-ratio: 620 / 520;
  }
  .reef .reef-line__skyline, .reef .reef-line__brick-mark { display: none; }
  .reef .reef-line__copy { position: static; width: auto; }
  .reef .reef-line__title, .reef .reef-line__body, .reef .reef-line__note { max-width: 620px; }
}

/* ============================================================
   02 / Three Tides
   ============================================================ */
.reef-tides { padding: 96px 0 120px; }
.reef-tides__title { margin-top: 30px; max-width: 900px; }
.reef-tides__rows { margin-top: 46px; }

/* Each row is a fixed-height band; its rule is the bottom border. */
.reef .reef-tides__row { position: relative; }
.reef-tides__row--1 { height: 260px; }
.reef-tides__row--2 { height: 220px; }
.reef-tides__row--3 { height: 200px; }

.reef .reef-tides__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  border-top: 1.5px solid var(--ink);
}
.reef .reef-tides__mark { position: absolute; bottom: 3px; width: 12px; height: 12px; display: block; }
.reef-tides__mark--brick { left: 0; background: var(--brick); }
.reef-tides__mark--slate { right: 0; background: var(--slate); }
.reef-tides__mark--none { display: none; }

.reef .reef-tides__frame {
  position: absolute; display: block;
  border: 1.5px solid var(--ink); background: var(--stone); overflow: hidden;
}
.reef .reef-tides__frame > img {
  width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply;
}
.reef .reef-tides__copy { position: absolute; }
.reef .reef-tides__copy .r-body { margin-top: 14px; max-width: 100%; }

/* Row 1: frame on the left, copy to its right. */
.reef-tides__row--1 .reef-tides__frame { left: 0; top: 0; width: 400px; height: 240px; }
.reef-tides__row--1 .reef-tides__copy { left: 460px; top: 10px; width: 460px; }

/* Row 2: copy on the left, frame pushed to the right. */
.reef-tides__row--2 .reef-tides__frame { left: 780px; top: 0; width: 360px; height: 200px; }
.reef-tides__row--2 .reef-tides__copy { left: 0; top: 10px; width: 520px; }

/* Row 3: frame set in from the left, copy after it. */
.reef-tides__row--3 .reef-tides__frame { left: 200px; top: 0; width: 320px; height: 160px; }
.reef-tides__row--3 .reef-tides__copy { left: 560px; top: 10px; width: 400px; }

@media (max-width: 1300px) {
  .reef .reef-tides__row,
  .reef-tides__row--1, .reef-tides__row--2, .reef-tides__row--3 {
    height: auto; padding-bottom: 32px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
  }
  .reef .reef-tides__frame,
  .reef-tides__row--1 .reef-tides__frame,
  .reef-tides__row--2 .reef-tides__frame,
  .reef-tides__row--3 .reef-tides__frame {
    position: relative; left: auto; top: auto;
    width: 100%; max-width: 420px; height: auto; aspect-ratio: 5 / 3;
  }
  .reef .reef-tides__copy,
  .reef-tides__row--1 .reef-tides__copy,
  .reef-tides__row--2 .reef-tides__copy,
  .reef-tides__row--3 .reef-tides__copy {
    position: static; width: auto;
  }
}

/* ============================================================
   03 / The Ledge
   ============================================================ */
.reef-ledge { padding: 72px 0 88px; }
.reef-ledge__title { margin-top: 26px; max-width: 700px; }
.reef .reef-ledge__stage { position: relative; height: 400px; margin-top: 24px; }
.reef .reef-ledge__unit { position: absolute; top: 0; }

/* Each unit stacks: photo frame, then the slate slab under it. */
.reef .reef-ledge__frame {
  position: absolute; display: block; overflow: hidden;
  border: 1.5px solid var(--ink); background: var(--stone);
}
.reef .reef-ledge__frame > img {
  width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply;
}
.reef .reef-ledge__slab {
  position: absolute; background: var(--slate); color: var(--stone);
  box-sizing: border-box; padding: 18px 0 0 0; overflow: hidden;
}
.reef .reef-ledge__slab .r-h3 { color: var(--stone); margin: 0; }
.reef .reef-ledge__slab .r-note { color: var(--stone); opacity: 0.78; margin-top: 8px; max-width: none; }

.reef .reef-ledge__unit--1 { left: 0; width: 360px; height: 400px; }
.reef .reef-ledge__unit--1 .reef-ledge__frame { left: 30px; top: 30px; width: 300px; height: 170px; }
.reef .reef-ledge__unit--1 .reef-ledge__slab { left: 0; top: 200px; width: 360px; height: 200px; padding-inline: 30px; }

.reef .reef-ledge__unit--2 { left: 400px; width: 340px; height: 400px; }
.reef .reef-ledge__unit--2 .reef-ledge__frame { left: 30px; top: 0; width: 280px; height: 150px; }
.reef .reef-ledge__unit--2 .reef-ledge__slab { left: 0; top: 150px; width: 340px; height: 250px; padding-inline: 30px; }

.reef .reef-ledge__unit--3 { left: 780px; width: 400px; height: 400px; }
.reef .reef-ledge__unit--3 .reef-ledge__frame { left: 40px; top: 80px; width: 320px; height: 160px; }
.reef .reef-ledge__unit--3 .reef-ledge__slab { left: 0; top: 240px; width: 400px; height: 160px; padding-inline: 40px; }

.reef .reef-ledge__brick { position: absolute; right: 0; top: 240px; width: 3px; height: 160px; background: var(--brick); }

@media (max-width: 1300px) {
  .reef .reef-ledge__stage { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .reef .reef-ledge__unit,
  .reef .reef-ledge__unit--1, .reef .reef-ledge__unit--2, .reef .reef-ledge__unit--3 {
    position: relative; left: auto; width: 100%; height: auto;
  }
  .reef .reef-ledge__frame,
  .reef .reef-ledge__unit--1 .reef-ledge__frame,
  .reef .reef-ledge__unit--2 .reef-ledge__frame,
  .reef .reef-ledge__unit--3 .reef-ledge__frame {
    position: relative; left: auto; top: auto;
    width: 100%; max-width: 320px; height: auto; aspect-ratio: 2 / 1; margin: 0 0 16px;
  }
  .reef .reef-ledge__slab,
  .reef .reef-ledge__unit--1 .reef-ledge__slab,
  .reef .reef-ledge__unit--2 .reef-ledge__slab,
  .reef .reef-ledge__unit--3 .reef-ledge__slab {
    position: relative; left: auto; top: auto;
    width: 100%; height: auto; padding: 18px 20px 22px;
  }
  .reef .reef-ledge__brick { display: none; }
}

/* ============================================================
   Email band
   ============================================================ */
.reef-mail { background: var(--ink); color: var(--stone); padding: 88px 0 108px; }
.reef-mail__title { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; margin: 0; color: var(--stone); }
.reef-mail__note { color: var(--stone); opacity: 0.7; margin-top: 16px; max-width: none; }
.reef-mail__form { display: flex; align-items: flex-end; margin-top: 32px; }
.reef-mail__form > .reef-mail__input {
  flex: 0 0 420px;
  width: 420px;
  max-width: 100%;
  min-height: 52px;
  height: 52px;
  padding: 0 16px;
  background: var(--stone);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font-size: 16px;
  box-sizing: border-box;
}
.reef-mail__input::placeholder { color: var(--ink); opacity: 0.65; }
.reef-mail__form > .reef-mail__btn { flex: 0 0 160px; width: 160px; height: 52px; padding: 0; }
.reef-mail__ok { color: var(--stone); margin-top: 12px; max-width: none; }
.reef-mail__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) {
  .reef-mail { padding: 64px 0; }
  .reef-mail__form { flex-direction: column; align-items: stretch; }
  .reef-mail__input, .reef-mail__btn { width: 100%; }
}

/* ============================================================
   Theme footer, restyled to the reef palette
   ============================================================ */
.footer,
.footer .footer-top,
.footer .footer-bottom {
  background: var(--slate) !important;
  color: var(--stone) !important;
  border-top-color: rgba(220, 211, 196, 0.25) !important;
}
.footer h3,
.footer .foot-title,
.footer .footer-logo,
.footer h3 a {
  color: var(--stone) !important;
}
.footer .foot-link,
.footer .footer-bottom a,
.footer .address p,
.footer .footer_copyright {
  color: var(--stone) !important;
  opacity: 0.78;
}
.footer .foot-link:hover { color: var(--brick) !important; opacity: 1; }
.footer .foot-link {
  display: inline-flex; align-items: center; min-height: 32px; line-height: 32px;
}
.footer .footer-newsletter .input-group-field,
.footer .footer-newsletter .btn { display: none; }
@media (max-width: 767px) {
  .footer .footer-top .col-footer .foot-title { border-bottom-color: rgba(220, 211, 196, 0.25) !important; }
  .footer .foot-link { min-height: 40px; line-height: 40px; }
}

/* Footer height guard: the design fixes the footer band at 420px on desktop. */
@media (min-width: 768px) {
  .footer .footer-top { padding-top: 76px; padding-bottom: 56px; }
  .footer .footer-bottom { padding-top: 20px; padding-bottom: 24px; }
}

/* ============================================================
   Footer links must never be collapsed on mobile
   ============================================================ */
@media (max-width: 767px) {
  .footer .footer-top .col-footer ul {
    display: block !important;
    margin-bottom: 24px;
  }
  .footer .footer-top .col-footer .foot-title {
    cursor: default;
    padding-right: 0;
  }
  .footer .footer-top .col-footer .foot-title::after,
  .footer .footer-top .col-footer .foot-title.dropdow-mb::after {
    content: none !important;
    display: none !important;
  }
  .footer .foot-link {
    min-height: 44px;
    line-height: 44px;
  }
}

/* Line-art guard: the theme sets svg { fill: currentColor } globally, which turns
   every outline icon into a solid block. Keep declared outlines as outlines. */
svg[fill="none"] { fill: none; }
.reef svg[fill="none"], .reef-col svg[fill="none"], .reef-band svg[fill="none"] { fill: none; }
/* Only icons that declare fill="none" stay outlined; solid polygons keep
   their fill attribute, which CSS would otherwise override. */
.reef svg[fill="none"] polygon,
.reef svg[fill="none"] path,
.reef-band svg polygon[fill],
.reef-col__poly polygon[fill] { fill: revert-layer; }


/* ============================================================
   Watercolour background must read through the content sections.
   Declared last so it beats the per-section stone fills above.
   Bands, the email strip and the footer keep their own ground.
   ============================================================ */
.reef.reef-line,
.reef.reef-tides,
.reef.reef-ledge,
.reef.reef-chain,
.reef.reef-col,
.reef-catch,
section.reef:not(.reef-band):not(.reef-mail) {
  background: transparent !important;
}
.reef.reef-band {
  background: rgba(250, 250, 249, 0.74) !important;
}
.reef.reef-mail {
  background-color: var(--ink) !important;
}
footer.footer {
  background-color: var(--slate) !important;
}


/* ============================================================
   Bottom breathing room: the design ends with 64px of page below the footer
   ============================================================ */
footer.footer { margin-bottom: 64px; }
@media (max-width: 767px) { footer.footer { margin-bottom: 40px; } }


/* ============================================================
   Art lettering: the display face is a high-contrast serif from Google Fonts,
   loaded independently of the theme's Poppins body face.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,800;1,700&family=Bebas+Neue&display=swap');

.reef .r-display,
.reef .r-h2,
.narwal-banner-section .banner-title,
.reef-line__title,
.reef-tides__title,
.reef-ledge__title,
.reef-chain__title,
.reef-col__title,
.reef-mail__title {
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.reef .r-eyebrow,
.narwal-banner-section .banner-title span,
.reef-col__name,
.reef-col__code,
.reef-band__text {
  font-family: "Bebas Neue", "Playfair Display", sans-serif;
}

/* Hero art direction: oversized first line, italic brick accent, thin rule. */
.narwal-banner-section .banner-title {
  font-size: clamp(46px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 26px rgba(20, 26, 28, 0.55);
}
.narwal-banner-section .banner-title span {
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.04em;
  letter-spacing: -0.01em;
  color: var(--brick) !important;
  text-shadow: 0 4px 26px rgba(20, 26, 28, 0.5);
}
.narwal-banner-section .banner-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* Section headings get the same serif so the page reads as one voice. */
.reef .r-h2 { font-size: clamp(32px, 3.4vw, 46px); }
.reef .r-h3 { font-family: "Playfair Display", serif; font-weight: 600; }


/* ============================================================
   Seafood silhouettes: polygon shellfish and fish at low opacity, pinned to the
   section corners so the watercolour ground never reads as a flat wash.
   ============================================================ */
.reef-sil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--slate);
  opacity: calc(var(--sil-opacity, 0.1) * 2);
}
.reef-sil svg {
  position: absolute;
  fill: currentColor;
  height: auto;
}
.reef-sil svg.reef-sil__a { left: 3%;  top: 14%;  width: 170px; }
.reef-sil svg.reef-sil__b { right: 6%; top: 30%;  width: 140px; }
.reef-sil svg.reef-sil__c { right: 10%; bottom: 8%; width: 190px; }

.reef-sil--catch svg.reef-sil__a { left: 1%;  top: 26%;  width: 150px; }
.reef-sil--catch svg.reef-sil__b { right: 3%; top: 8%;   width: 110px; }
.reef-sil--catch svg.reef-sil__c { right: 20%; bottom: 4%; width: 96px; }

.reef-sil--tide svg.reef-sil__a { left: 4%;  bottom: 10%; width: 132px; }
.reef-sil--tide svg.reef-sil__b { right: 8%; top: 16%;   width: 120px; }
.reef-sil--tide svg.reef-sil__c { left: 46%; top: 2%;    width: 84px; }

/* Every reef section needs its own stacking context for the silhouettes. */
.reef-line, .reef-tides, .reef-ledge, .reef-chain, .reef-col, .reef-mail { position: relative; }
.reef-line .reef__in, .reef-tides .reef__in, .reef-ledge .reef__in,
.reef-chain .reef__in, .reef-col .reef__in, .reef-mail .reef__in { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .reef-sil svg.reef-sil__a { width: 76px; }
  .reef-sil svg.reef-sil__b { width: 64px; }
  .reef-sil svg.reef-sil__c { width: 88px; }
}

@media (max-width: 1300px) {
  .reef-col__stones {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }
  /* Keep the button as the containing block so the polygon and label stay inside it. */
  .reef-col__stone,
  .reef-col__stone:nth-child(n) {
    position: relative;
    left: auto;
    top: auto;
    width: 100% !important;
    max-width: 100%;
    height: 132px;
  }
  .reef-col__stone:nth-child(n) .reef-col__label,
  .reef-col__stone:nth-child(n) .reef-col__tick { bottom: 14px; }
  .reef-col__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .reef-col__stones { grid-template-columns: minmax(0, 1fr); }
  .reef-col__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ============================================================
   End of collection rules
   ============================================================ */

/* ============================================================
   04 / Cold Chain — restored
   ============================================================ */
.reef-chain { padding: 88px 0 80px; }
.reef-chain__title { margin-top: 26px; max-width: 700px; }
.reef .reef-chain__stage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 40px;
  position: relative;
}
.reef .reef-chain__col { position: relative; padding-top: 0; }
.reef .reef-chain__icon { display: block; height: 24px; margin-bottom: 18px; }
.reef .reef-chain__icon svg { display: block; width: 24px; height: 24px; }
.reef .reef-chain__slab {
  display: block; width: 100%; height: 116px;
}
.reef .reef-chain__slab polygon { stroke-width: 1.5; }
.reef .reef-chain__info {
  margin-top: 16px; display: grid; gap: 4px;
}
.reef .reef-chain__info .r-note { max-width: none; }
.reef .reef-chain__time { color: var(--brick); font-weight: 700; letter-spacing: 0.08em; }
.reef .reef-chain__step { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.reef .reef-chain__say { opacity: 0.72; }
.reef .reef-chain__base {
  display: block; margin-top: 36px; height: 0;
  border-top: 1px solid var(--ink); width: 1052px; max-width: 100%;
}
@media (max-width: 1300px) {
  .reef .reef-chain__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 700px) {
  .reef .reef-chain__stage { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reef .reef-chain__slab { height: 96px; }
  .reef .reef-chain__base { width: 100%; margin-top: 24px; }
}

/* ============================================================
   The Collection — stone tabs and the product shelf, restored
   ============================================================ */
.reef-col { padding: 88px 0 96px; }
.reef-col__title { margin-top: 24px; max-width: 900px; }
.reef-col__body { margin-top: 28px; max-width: 620px; }

.reef .reef-col__stones { position: relative; height: 200px; margin-top: 32px; }
.reef .reef-col__stone {
  position: absolute;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; display: block; overflow: visible;
  color: var(--ink);
  transition: color 120ms linear;
}
.reef .reef-col__stone:focus-visible { outline: 1.5px solid var(--brick); outline-offset: 4px; }
.reef .reef-col__poly { position: absolute; inset: 0; width: 100%; height: 100%; }
.reef .reef-col__poly polygon {
  fill: var(--stone);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: fill 120ms linear, stroke 120ms linear;
  vector-effect: non-scaling-stroke;
}
.reef .reef-col__stone:hover .reef-col__poly polygon { stroke: var(--brick); }
.reef .reef-col__stone.is-selected .reef-col__poly polygon { fill: var(--slate); stroke: var(--slate); }

.reef .reef-col__label {
  position: absolute; left: 20px; bottom: 18px; display: grid; gap: 2px; text-align: left;
}
.reef .reef-col__name {
  font-size: 12px; line-height: 1.2; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.reef .reef-col__sub { font-size: 13px; line-height: 1.4; color: var(--ink); opacity: 0.62; }
.reef .reef-col__stone.is-selected .reef-col__name { color: var(--stone); }
.reef .reef-col__stone.is-selected .reef-col__sub { color: var(--stone); opacity: 0.82; }
.reef .reef-col__tick {
  position: absolute; right: 14px; bottom: 16px; width: 10px; height: 10px;
  background: var(--brick); display: none;
}
.reef .reef-col__stone.is-selected .reef-col__tick { display: block; }

.reef .reef-col__stone:nth-child(1) { left: 0;     top: 0; width: 300px; height: 200px; }
.reef .reef-col__stone:nth-child(2) { left: 340px; top: 0; width: 260px; height: 200px; }
.reef .reef-col__stone:nth-child(3) { left: 640px; top: 0; width: 300px; height: 200px; }
.reef .reef-col__stone:nth-child(4) { left: 980px; top: 0; width: 200px; height: 200px; }

/* Shelf under the stones. */
.reef .reef-col__beds { margin-top: 30px; }
.reef .reef-col__bed[hidden] { display: none; }
.reef .reef-col__bed-head {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(30, 37, 39, 0.35);
}
.reef .reef-col__code { color: var(--ink); letter-spacing: 0.12em; text-transform: uppercase; }
.reef .reef-col__count { color: var(--slate); }
.reef .reef-col__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; margin-top: 26px; align-items: stretch;
}
.reef .reef-col__card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.reef .reef-col__shot {
  display: grid; place-items: center;
  background: #fffefc; border: 1.5px solid var(--ink);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.reef .reef-col__shot img {
  width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply;
}
.reef .reef-col__cname { margin-top: 12px; font-size: 17px; line-height: 1.3; }
.reef .reef-col__cprice { margin-top: 6px; color: var(--slate); }
.reef .reef-col__card:hover .reef-col__shot { border-color: var(--brick); }
.reef .reef-col__card:hover .reef-col__cname { color: var(--brick); }
.reef .reef-col__bedlink {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px;
  color: var(--ink); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.12em;
  border-bottom: 1px solid var(--brick);
}
@media (max-width: 1300px) {
  .reef .reef-col__stones { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .reef .reef-col__stone,
  .reef .reef-col__stone:nth-child(n) { position: relative; left: auto; top: auto; width: 100%; height: 132px; }
  .reef .reef-col__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .reef .reef-col__stones { grid-template-columns: minmax(0, 1fr); }
  .reef .reef-col__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}


/* ============================================================
   Mobile corrections: the email form's flex-basis became a height once the
   form stacked into a column, and the collection stones were crammed.
   Declared last so they win over the desktop rules above.
   ============================================================ */
@media (max-width: 767px) {
  /* Email band: 52px fields, no 420px flex-basis leaking into the column axis. */
  .reef-mail { padding: 48px 0 56px; }
  .reef-mail__form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }
  .reef-mail__form > .reef-mail__input {
    flex: 0 0 auto;
    width: 100%;
    min-height: 52px;
    height: 52px;
    padding: 0 14px;
  }
  .reef-mail__form > .reef-mail__btn {
    flex: 0 0 auto;
    width: 100%;
    height: 52px;
  }
  .reef-mail__title { font-size: 26px; }
}

@media (max-width: 1300px) {
  /* Collection: give the stones room and stop the shelf hugging them. */
  .reef-col { padding: 56px 0 64px; }
  .reef .reef-col__stones {
    gap: 18px;
    margin-top: 28px;
  }
  .reef .reef-col__stone,
  .reef .reef-col__stone:nth-child(n) {
    height: 118px;
  }
  .reef .reef-col__stone:nth-child(n) .reef-col__label { left: 16px; bottom: 16px; }
  .reef .reef-col__stone:nth-child(n) .reef-col__tick { right: 12px; bottom: 14px; }
  .reef .reef-col__beds { margin-top: 40px; }
  .reef .reef-col__grid { gap: 18px; margin-top: 22px; }
}

@media (max-width: 560px) {
  /* Two product cards per row so the shelf does not run 7 screens long. */
  .reef .reef-col__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .reef .reef-col__cname { font-size: 15px; margin-top: 10px; }
  .reef .reef-col__cprice { margin-top: 4px; }
  .reef .reef-col__stones { gap: 14px; }
  .reef .reef-col__stone,
  .reef .reef-col__stone:nth-child(n) { height: 104px; }
}


/* ============================================================
   Contact page: merchant copy at reading size, no form.
   ============================================================ */
.reef-contact { padding: 88px 0 96px; position: relative; }
.reef .reef-contact .reef__in { position: relative; z-index: 1; }
.reef .reef-contact__title {
  margin-top: 28px;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.reef .reef-contact__body {
  margin-top: 44px;
  max-width: 760px;
  font-size: 19px;
  line-height: 1.75;
}
.reef .reef-contact__body p { margin: 0 0 18px; }
.reef .reef-contact__body p:last-child { margin-bottom: 0; }
.reef .reef-contact__body a { color: var(--ink); border-bottom: 1px solid var(--brick); }

@media (max-width: 767px) {
  .reef-contact { padding: 56px 0 64px; }
  .reef .reef-contact__title { margin-top: 20px; font-size: clamp(32px, 9vw, 40px); }
  .reef .reef-contact__body { margin-top: 28px; font-size: 17px; line-height: 1.7; }
}


/* ============================================================
   Collection on small screens: a plain 2x2 of four labelled stones.
   The stone button owns its own positioning so the label cannot escape it.
   ============================================================ */
@media (max-width: 1300px) {
  .reef .reef-col__stones {
    position: relative;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }
  .reef .reef-col__stone,
  .reef .reef-col__stone:nth-child(n) {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 132px;
    display: block;
  }
  .reef .reef-col__poly {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .reef .reef-col__label,
  .reef .reef-col__stone:nth-child(n) .reef-col__label {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
  .reef .reef-col__name { font-size: 12px; letter-spacing: 0.1em; }
  .reef .reef-col__sub { font-size: 12px; }
  .reef .reef-col__tick,
  .reef .reef-col__stone:nth-child(n) .reef-col__tick {
    right: 10px;
    bottom: 12px;
    width: 9px;
    height: 9px;
  }
}

@media (max-width: 400px) {
  .reef .reef-col__stone,
  .reef .reef-col__stone:nth-child(n) { height: 118px; }
}


/* ============================================================
   Stones: the polygon now fills its button (tight viewBox), so the label sits on
   the stone itself instead of floating under it.
   ============================================================ */
.reef .reef-col__stone { background: transparent; border: 0; padding: 0; }
.reef .reef-col__poly { position: absolute; inset: 0; width: 100%; height: 100%; }
.reef .reef-col__poly polygon {
  fill: var(--stone);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 120ms linear, stroke 120ms linear;
}
.reef .reef-col__stone.is-selected .reef-col__poly polygon { fill: var(--slate); stroke: var(--slate); }
.reef .reef-col__stone:hover .reef-col__poly polygon { stroke: var(--brick); }

/* Label anchored to the lower-left of the stone. */
.reef .reef-col__label,
.reef .reef-col__stone:nth-child(n) .reef-col__label {
  position: absolute;
  left: 16px;
  right: 44px;
  top: auto;
  bottom: 14px;
  display: grid;
  gap: 2px;
}