/* Generated by website/tools/build.py from design-system/tokens.json and components/bundle.css. Edit those, not this. */
:root {
  --ocean-deep: #071F27;
  --ocean: #0B3541;
  --ocean-mid: #135365;
  --ocean-blue: #18788A;
  --teal: #207F8A;
  --sea-glass: #B9E8E4;
  --sea-glass-strip: #BCEBE8;
  --mist: #ECF5F4;
  --paper: #F8FAF9;
  --white: #FFFFFF;
  --ink: #0A303A;
  --text: #48646C;
  --subtle: #5F777E;
  --muted: #7D959A;
  --line: #DAE7E6;
  --accent: #267987;
  --eyebrow: #2E7684;
  --band-start: #104655;
  --band-mid: #082C36;
  --band-end: #041E25;
  --panel-end: #06262E;
  --footer-start: #103E4A;
  --footer-end: #061F27;
  --on-band: #DAE7E9;
  --on-band-muted: #9DBEC3;
  --focus-ring: #4AC7D2;
  --gutter-desktop: 52px;
  --gutter-laptop: 36px;
  --gutter-tablet: 27px;
  --gutter-phone: 18px;
  --tile-gap: 16px;
  --section: 74px;
  --radius-panel: 18px;
  --radius: 16px;
  --radius-tile: 15px;
  --radius-icon: 12px;
  --radius-button: 10px;
  --radius-cta: 9px;
  --container: 1260px;
  --header: 94px;
}
/* Encapsulate Pharma: component styles (Wave refresh, Identity 03 Ocean edition).
   Tokens (colours, spacing, radius, sizes) come from tokens.json: the design system generates tokens.css,
   and website/tools/build.py writes the same :root block into website/site/site.css.
   Gradient stops are written as hex, matching the band-* tokens. */
:root { --ease: cubic-bezier(.22,.75,.28,1); }
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0; background:var(--paper); color:var(--ink); font-family:'Avenir Next','Century Gothic','Segoe UI',Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a {color:inherit; text-decoration:none}
/* Focus: ocean-blue on light grounds (4.9:1), the bright ring on the dark bands (6.5:1). */
:focus-visible {outline:3px solid var(--ocean-blue);outline-offset:4px}
.site-header :focus-visible,.mobile-nav :focus-visible,.footer :focus-visible,.order-feature :focus-visible,.cta-band :focus-visible {outline-color:var(--focus-ring)}
button {font:inherit}
img {max-width:100%}
.container {width:min(var(--container),calc(100% - 104px)); margin-inline:auto}
.icon {width:20px; height:20px; display:block;flex:none}
.skip-link {position:fixed;top:10px;left:10px;z-index:1000;background:#fff;padding:12px 18px; transform:translateY(-160%);border-radius:8px}
.skip-link:focus {transform:none}

/* Header */
.site-header {position:relative;z-index:30; background:linear-gradient(110deg,#104655 0%,#082C36 58%,#041E25 100%);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-wrap {height:94px;display:flex;align-items:center;gap:40px;justify-content:space-between}
.brand-logo-link {display:flex;align-items:center;flex:none}
.brand-logo {width:211px;height:auto;display:block}
.desktop-nav {display:flex;align-items:center;gap:clamp(18px,2vw,34px);margin-left:auto}
.desktop-nav a {color:var(--on-band);font-size:13px;font-weight:520;white-space:nowrap;transition:color .22s ease;padding:6px 0;border-bottom:1.5px solid transparent}
.desktop-nav a:hover {color:#fff}
.desktop-nav a[aria-current=page] {color:#fff;border-bottom-color:var(--sea-glass)}
.order-nav-button {display:inline-flex; align-items:center;justify-content:center;gap:12px;flex:none;min-width:183px;min-height:49px;border-radius:10px;background:var(--sea-glass);color:#07323B;padding:11px 15px;font-size:13px;font-weight:760;transition:background .2s,transform .24s var(--ease)}
.order-nav-button:hover {background:#DDF7F3;transform:translateY(-2px)}
.order-nav-button .icon {width:19px;height:19px}
.order-nav-button .icon-arrow {width:17px;height:17px; margin-left:3px}
.menu-toggle,.mobile-nav,.mobile-order-bar {display:none}

/* The wave: nothing on the wave itself (the homepage header sits on the sky above it, see below) */
.wave-hero {position:relative;height:clamp(200px,20vw,400px);overflow:hidden;background:linear-gradient(180deg,#B7D1D6,#256E83);border-bottom:1px solid rgba(7,50,61,.07)}
.wave-hero .wave-poster {width:100%;height:100%;display:block;object-fit:cover;object-position:40% 55%;position:absolute;inset:0}
.wave-hero.is-slim {height:clamp(96px,9vw,136px)}

/* Header on the wave (homepage, .is-stage): the header sits on the sky above the wave, over a deep-ocean fade,
   and turns solid once the page scrolls (site.js adds .is-solid). The extra sky is the photo's own top-edge colour,
   and the photo's top edge fades into it, so the photo is never enlarged. The crest itself stays clear. */
.wave-hero.is-stage {--head:94px;--extra:clamp(20px,4vw,64px);--wave-h:clamp(150px,15vw,280px);height:calc(var(--head) + var(--extra) + var(--wave-h));border-bottom:0;background:linear-gradient(90deg,#C6CFD9,#C2CCD5 55%,#B4C5D3)}
.wave-hero.is-stage .wave-poster {inset:auto 0 0;height:var(--wave-h);-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
.wave-hero.is-stage::before {content:"";position:absolute;inset:0 0 auto;z-index:2;height:calc(var(--head) + var(--extra) + 30px);pointer-events:none;background:linear-gradient(180deg,#071F27 0%,rgba(11,53,65,.88) 38%,rgba(19,83,101,.38) 72%,rgba(19,83,101,0) 100%)}
body:has(.wave-hero.is-stage) .site-header {position:fixed;inset:0 0 auto;padding-top:env(safe-area-inset-top,0px);background:transparent;border-bottom-color:transparent;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}
body:has(.wave-hero.is-stage) .site-header.is-solid,body:has(.wave-hero.is-stage) .site-header:has([aria-expanded=true]) {background:rgba(7,31,39,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(4,30,37,.18)}
body:has(.wave-hero.is-stage) .nav-wrap {transition:height .35s var(--ease)}
body:has(.wave-hero.is-stage) .site-header.is-solid .nav-wrap {height:72px}
@media(max-width:900px){.wave-hero.is-stage{--head:82px}}
@media(max-width:680px){.wave-hero.is-stage{--head:76px;--extra:18px;--wave-h:140px}body:has(.wave-hero.is-stage) .site-header.is-solid .nav-wrap{height:64px}}
@media(max-width:390px){.wave-hero.is-stage{--wave-h:130px}}
/* Every page uses the 16:9 still in the stage (inner pages a shorter wave; the line under the hero is dropped so only the wave edge shows).
   The moving wave (homepage, .has-video; agreed 6 Nov 2026 in the wave-motion demo): the 16:9 still fills the stage, sky included,
   and site.js plays the approved loop over it. Two video copies take turns at data-loop-end so the join is invisible; the copy taking
   over fades in on top (z-index 1). Anything that must sit over the video needs z-index 2 or more (the header fade is 2, the edge 3). */
.wave-hero.is-stage.has-video {--wave-h:clamp(240px,28vw,520px)}
.wave-video-poster,.wave-video {position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:45% 38%;pointer-events:none}
.wave-video {opacity:0}
.wave-video.is-on {opacity:1}
.wave-video.is-top {z-index:1;transition:opacity .2s linear}
/* Soft, slowly moving wave edge where the wave meets the page */
.wave-edge {position:absolute;left:0;bottom:-1px;z-index:3;width:200%;height:clamp(14px,2.2vw,30px);pointer-events:none;animation:wave-edge 38s linear infinite}
.wave-edge .edge-back {fill:var(--paper);opacity:.55}
.wave-edge .edge-front {fill:var(--paper)}
@keyframes wave-edge {to {transform:translateX(-50%)}}
/* Gentle rise-in as homepage sections scroll into view (browsers without scroll timelines just show them) */
@supports (animation-timeline:view()) {@media (prefers-reduced-motion:no-preference) {.reveal {animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}}
@keyframes rise {from {opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce) {.wave-edge {animation:none}}
/* Homepage on phones: the Order portal bar stays at the bottom of the screen, within thumb reach */
@media(max-width:680px){body:has(.wave-hero.is-stage){padding-bottom:52px}body:has(.wave-hero.is-stage) .mobile-order-bar{position:fixed;inset:auto 0 0;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));z-index:25;box-shadow:0 -8px 24px rgba(4,30,37,.14)}}

/* Homepage: intro and the order panel */
.welcome-section {background:var(--paper); padding:74px 0 71px}
.welcome-layout {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr);gap:clamp(42px,8.2vw,130px);align-items:center}
.welcome-copy {padding:5px 0 8px}
.eyebrow {display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--eyebrow);text-transform:uppercase}
h1,h2,h3,p {margin-top:0}
.welcome-copy h1 {font-size:clamp(51px,4.48vw,73px);line-height:1.09;letter-spacing:-.052em;font-weight:520;margin:21px 0 21px;}
h1 em,h2 em {font-style:normal;color:var(--accent)}
.welcome-copy p {font-size:15px;color:var(--text);line-height:1.65;margin:0 0 22px}
.underlined-link {display:inline-flex;align-items:center;gap:13px;font-size:13px;font-weight:740;border-bottom:1px solid #8EAFB3;padding-bottom:5px;transition:gap .22s ease,color .22s}
.underlined-link:hover {color:var(--ocean-blue);gap:19px}
.underlined-link svg {height:15px;width:15px}
.order-feature {min-height:287px;border-radius:18px;background:linear-gradient(133deg,#104655 0%,#06262E 100%);padding:27px 31px 29px;color:white;box-shadow:0 15px 35px rgba(8,48,56,.09)}
.order-feature-top {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}
.order-feature-top>span {color:#87B7BD;letter-spacing:.115em;font-size:10px;font-weight:740}
.order-icon {height:44px;width:44px;display:grid;place-items:center;background:#194E57;border:1px solid rgba(184,242,236,.28);border-radius:12px;color:#C6F3EF;flex:none}
.order-icon svg {width:23px;height:23px}
.order-feature h2 {font-weight:550;letter-spacing:-.04em;font-size:30px;line-height:1.15;margin:0 0 8px}
.order-feature p {font-size:13px;line-height:1.5;color:#BED4D8;margin:0 0 24px}
.order-feature p a {color:#fff;text-decoration:underline;text-underline-offset:3px}
.order-feature-button {display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;min-height:48px;padding:12px 16px;background:var(--sea-glass);border-radius:9px;font-size:13px;font-weight:770;color:#07333D;transition:background .2s,transform .22s ease}
.order-feature-button:hover {background:white;transform:translateY(-2px)}
.order-feature-button svg {height:18px;width:18px}

/* Shortcut tiles */
.shortcuts-section {padding:0 0 83px;background:var(--paper)}
.shortcuts-layout {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shortcut {background:#FFFFFF;border:1px solid var(--line);border-radius:15px;min-height:140px;padding:27px 23px;display:flex;align-items:center;gap:19px;transition:border-color .2s,box-shadow .25s,transform .3s var(--ease)}
.shortcut:hover {border-color:#A6D0CF;box-shadow:0 14px 32px rgba(21,74,82,.07);transform:translateY(-3px)}
.shortcut-icon {height:53px;width:53px;border-radius:15px;background:#E8F4F2;display:grid;place-items:center;flex:none;color:#277886}
.shortcut-icon svg {width:25px;height:25px}
.shortcut-content {display:flex;flex-direction:column;gap:5px;min-width:0}
.shortcut-content strong {font-size:14px;font-weight:740;letter-spacing:-.025em;line-height:1.2}
.shortcut-content small {font-size:11px;color:var(--subtle);line-height:1.25}
.shortcut-arrow {align-self:flex-start;margin-left:auto;color:var(--teal);transition:transform .2s}
.shortcut-arrow .icon {width:18px;height:18px}
.icon-inline {display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-left:3px}
.shortcut:hover .shortcut-arrow {transform:translate(3px,-3px)}

/* Inner pages: page intro under a slim wave */
.page-intro {padding:58px 0 50px}
.breadcrumb {font-size:12px;color:var(--text);margin:0 0 26px}
.breadcrumb a {color:var(--ink);font-weight:650;border-bottom:1px solid var(--line)}
.breadcrumb a:hover {color:var(--ocean-blue)}
.page-intro h1 {font-size:clamp(40px,4.2vw,62px);line-height:1.08;letter-spacing:-.05em;font-weight:520;margin:18px 0 18px;max-width:18ch}
.lead {font-size:17px;line-height:1.65;color:var(--text);max-width:62ch;margin:0}

/* Sections */
.section {padding:0 0 72px}
.section.is-tinted {background:var(--mist);padding:66px 0;margin-bottom:72px}
.section-head {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head h2 {font-size:30px;line-height:1.15;letter-spacing:-.04em;font-weight:550;margin:12px 0 0}
.split {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.split h2 {font-size:30px;line-height:1.15;letter-spacing:-.04em;font-weight:550;margin:12px 0 0}
.prose p {font-size:15px;line-height:1.75;color:var(--text);margin:0 0 16px;max-width:64ch}
.prose p:last-child {margin-bottom:0}

/* Feature cards */
.card-grid {display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px}
.card {background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px 24px}
.card .shortcut-icon {margin-bottom:20px}
.card h3 {font-size:17px;letter-spacing:-.03em;font-weight:700;margin:0 0 8px}
.card p {font-size:14px;line-height:1.6;color:var(--text);margin:0}
.card .tag {margin-bottom:16px}

/* Tags and facts */
.tags {display:flex;flex-wrap:wrap;gap:8px}
.tag {display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.02em}
.facts {display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:0 24px;margin:0}
.facts div {padding:12px 0;border-top:1px solid var(--line)}
.facts dt {font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:4px}
.facts dd {margin:0;font-size:14px;color:var(--ink)}
.facts a {border-bottom:1px solid #8EAFB3}

/* Product card */
.product-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.product-card {background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.product-card-head {background:linear-gradient(133deg,#104655 0%,#06262E 100%);color:#fff;padding:28px 28px 26px}
.product-card-head h2 {font-size:28px;letter-spacing:-.03em;font-weight:650;margin:0 0 4px}
.product-card-head h2 sup {font-size:.5em;font-weight:500}
.product-card-head p {margin:0;color:#BED4D8;font-size:14px}
.product-card-body {padding:24px 28px 28px;display:flex;flex-direction:column;gap:20px;flex:1}
.doc-links {display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

/* Buttons (sea glass stays reserved for the Order portal) */
.button {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 18px;border-radius:10px;border:1px solid var(--ocean);background:var(--ocean);color:#fff;font-size:13px;font-weight:740;cursor:pointer;transition:background .2s,transform .22s var(--ease)}
.button:hover {background:var(--ocean-mid);transform:translateY(-1px)}
.button.is-quiet {background:#fff;color:var(--ink);border-color:var(--muted)}
.button.is-quiet:hover {background:var(--mist)}
.button svg {width:16px;height:16px}
.button-row {display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Steps */
.steps {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:step}
.steps li {counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px 22px}
.steps li::before {content:counter(step,decimal-leading-zero);display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--eyebrow);margin-bottom:16px}
.steps h3 {font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.steps p {font-size:13px;line-height:1.6;color:var(--text);margin:0}

/* Callout */
.callout {display:flex;gap:18px;align-items:flex-start;background:var(--mist);border:1px solid var(--line);border-radius:15px;padding:22px 24px}
.callout .shortcut-icon {background:#fff;width:44px;height:44px;border-radius:12px}
.callout .shortcut-icon svg {width:21px;height:21px}
.callout h3 {font-size:15px;font-weight:740;letter-spacing:-.02em;margin:2px 0 6px}
.callout p {font-size:13px;line-height:1.6;color:var(--text);margin:0}
.callout a {color:var(--ink);font-weight:700;border-bottom:1px solid #8EAFB3}
.callout-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* Profile and timeline */
.profile {display:grid;grid-template-columns:120px minmax(0,1fr);gap:32px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px}
.monogram {width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(133deg,#104655,#06262E);color:var(--sea-glass);font-size:36px;font-weight:550;letter-spacing:-.04em}
.profile h2 {font-size:30px;letter-spacing:-.04em;font-weight:550;margin:10px 0 4px}
.profile .role {font-size:13px;color:var(--subtle);margin:0 0 18px}
.timeline {list-style:none;margin:0;padding:0;border-left:1.5px solid var(--line);display:grid;gap:26px}
.timeline li {position:relative;padding-left:28px}
.timeline li::before {content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--paper)}
.timeline time {display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:6px}
.timeline p {font-size:15px;line-height:1.6;color:var(--ink);margin:0}

/* Forms */
.form-card {background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.form-card h2 {font-size:24px;letter-spacing:-.035em;font-weight:600;margin:0 0 6px}
.form-card > p {font-size:13px;line-height:1.6;color:var(--text);margin:0 0 22px}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field {display:flex;flex-direction:column;gap:7px;min-width:0}
.field.is-wide {grid-column:1/-1}
.field label {font-size:13px;font-weight:700;color:var(--ink)}
.field label small {font-weight:400;color:var(--subtle)}
.field input,.field select,.field textarea {font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--muted);border-radius:10px;min-height:46px;padding:10px 13px;width:100%}
.field textarea {min-height:132px;resize:vertical;line-height:1.5}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible {outline-offset:1px}
.field .hint {font-size:12px;line-height:1.45;color:var(--subtle);margin:0}
.check {grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink)}
.check input {width:18px;height:18px;margin:1px 0 0;accent-color:var(--ocean);flex:none}
.form-actions {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:4px}
.form-status {grid-column:1/-1;font-size:13px;line-height:1.55;background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0}
.form-status a {font-weight:700;border-bottom:1px solid #8EAFB3}

/* Contact list */
.contact-list {margin:0;display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 26px}
.contact-list div {padding:16px 0;border-top:1px solid var(--line)}
.contact-list div:first-child {border-top:0}
.contact-list dt {font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:5px}
.contact-list dd {margin:0;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.contact-list a {border-bottom:1px solid #8EAFB3}
.contact-list a:hover {color:var(--ocean-blue)}

/* Order band: closing call to order on inner pages */
.cta-band {border-radius:18px;background:linear-gradient(133deg,#104655 0%,#06262E 100%);color:#fff;padding:28px 31px;display:flex;align-items:center;gap:24px;box-shadow:0 15px 35px rgba(8,48,56,.09)}
.cta-band h2 {font-size:26px;letter-spacing:-.04em;font-weight:550;margin:0 0 4px}
.cta-band p {font-size:13px;color:#BED4D8;margin:0}
.cta-band .order-feature-button,.cta-band .button {width:auto;min-width:240px;margin-left:auto;justify-content:space-between}
.cta-band .button.is-quiet {border-color:#fff}

/* Footer */
.footer {background:linear-gradient(105deg,#103E4A 0%,#061F27 90%);color:#fff}
.footer-main {display:grid;grid-template-columns:1.75fr .7fr .8fr 1.05fr;gap:42px;padding:59px 0 72px}
.footer-brand img {width:191px;height:auto;display:block}
.footer-brand p {font-size:12px;color:var(--on-band-muted);margin:25px 0 0;letter-spacing:.015em}
.footer-column {display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-column>span {font-size:10px;font-weight:730;letter-spacing:.15em;text-transform:uppercase;color:#8DB8BC;margin:6px 0 7px}
.footer-column a {font-size:12px;color:#D6E5E5;transition:color .2s;line-height:1.4;overflow-wrap:anywhere}
.footer-column a:hover {color:#fff}
.footer-bottom {display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.13);padding:20px 0 23px;color:#8FAFB5;font-size:10px;letter-spacing:.025em}
.footer-bottom a {color:#D6E5E5;border-bottom:1px solid rgba(255,255,255,.3)}

/* Responsive */
@media(max-width:1160px){.container{width:min(1100px,calc(100% - 72px))}.nav-wrap{gap:22px}.brand-logo{width:187px}.desktop-nav{gap:18px}.desktop-nav a{font-size:12px}.order-nav-button{min-width:165px;padding:10px 12px;gap:8px}.welcome-layout{gap:48px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1040px){.desktop-nav{display:none}.order-nav-button{margin-left:auto}.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);background:transparent;border-radius:10px;color:white;cursor:pointer}.menu-toggle span{width:17px;height:1.5px;background:currentColor;transition:transform .22s ease}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}.mobile-nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;padding:12px 27px 22px;background:#0A323E;box-shadow:0 16px 28px rgba(0,0,0,.12)}.mobile-nav[hidden]{display:none}.mobile-nav a{color:white;font-size:14px;padding:14px 5px;border-bottom:1px solid rgba(255,255,255,.13)}.mobile-nav a[aria-current=page]{color:var(--sea-glass)}}
@media(max-width:900px){.container{width:calc(100% - 54px)}.nav-wrap{height:82px}.brand-logo{width:197px}.wave-hero.is-slim{height:110px}.welcome-layout{grid-template-columns:1fr 330px;gap:30px}.welcome-copy h1{font-size:clamp(41px,5.6vw,57px)}.welcome-section{padding:53px 0}.shortcuts-section{padding-bottom:60px}.shortcut{padding:22px 16px;gap:12px}.shortcut-icon{width:43px;height:43px}.shortcut-content strong{font-size:13px}.footer-main{grid-template-columns:1.5fr 1fr 1fr;gap:35px}.footer-contact{grid-column:2 / 4}.split{grid-template-columns:1fr;gap:24px}.card-grid{--cols:2 !important}.product-grid{grid-template-columns:1fr}.callout-row{grid-template-columns:1fr}}
@media(max-width:680px){.container{width:calc(100% - 36px)}.nav-wrap{height:76px;gap:11px}.brand-logo{width:188px}.order-nav-button{display:none}.mobile-order-bar{display:flex;align-items:center;justify-content:space-between;background:var(--sea-glass-strip);color:#062C34;min-height:52px;padding:11px 20px;font-size:13px;font-weight:750;gap:20px;position:relative;z-index:15}.mobile-order-main{display:flex;align-items:center;gap:12px}.mobile-order-bar .icon{width:18px;height:18px}.wave-hero{height:180px}.wave-hero.is-slim{height:84px}.wave-hero .wave-poster{object-position:34% 55%}.welcome-section{padding:46px 0 31px}.welcome-layout{grid-template-columns:1fr;gap:35px}.eyebrow{font-size:10px;letter-spacing:.14em}.welcome-copy h1{font-size:clamp(40px,9.4vw,55px);margin:16px 0 15px}.welcome-copy p{font-size:13px;margin-bottom:17px}.order-feature{min-height:259px;padding:24px}.order-feature-top{margin-bottom:19px}.order-feature h2{font-size:28px}.order-feature p{margin-bottom:19px}.shortcuts-section{padding:0 0 44px}.shortcuts-layout{grid-template-columns:1fr;gap:10px}.shortcut{min-height:90px;padding:16px 18px}.shortcut-icon{height:49px;width:49px}.shortcut-content strong{font-size:14px}.shortcut-content small{font-size:11px}.footer-main{grid-template-columns:1fr 1fr;gap:33px 20px;padding:42px 0 38px}.footer-brand{grid-column:1/-1}.footer-brand img{width:187px}.footer-brand p{margin-top:16px}.footer-contact{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:9px;font-size:10px}
  .page-intro{padding:40px 0 36px}.breadcrumb{margin-bottom:18px}.page-intro h1{font-size:clamp(34px,9vw,44px)}.lead{font-size:15px}.section{padding-bottom:52px}.section.is-tinted{padding:46px 0;margin-bottom:52px}.section-head{flex-direction:column;align-items:flex-start;gap:14px}.section-head h2,.split h2{font-size:26px}.card-grid{--cols:1 !important}.steps{grid-template-columns:1fr}.facts{--cols:1}.profile{grid-template-columns:1fr;gap:20px;padding:24px}.monogram{width:84px;height:84px;font-size:26px}.form-card{padding:22px}.form-grid{grid-template-columns:1fr}.product-card-head,.product-card-body{padding-inline:22px}.cta-band{flex-direction:column;align-items:stretch;padding:24px}.cta-band .order-feature-button,.cta-band .button{margin-left:0;min-width:0;width:100%}.contact-list{padding:4px 20px}}
@media(max-width:390px){.brand-logo{width:173px}.wave-hero{height:160px}.welcome-copy h1{font-size:40px}.order-feature-top>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}