/* Self-hosted production fonts — local WOFF2 only */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/fonts/CormorantGaramond-Medium.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/fonts/CormorantGaramond-MediumItalic.woff2') format('woff2');
  font-style:italic;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('assets/fonts/SourceSans3-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('assets/fonts/SourceSans3-SemiBold.woff2') format('woff2');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
/* Ocean Sea Burials — audited production stylesheet */
:root{
  --paper:#fbf8f2;
  --navy:#153a63;
  --navy-deep:#102c49;
  --gold:#b58b31;
  --text:#203041;
  --muted:#5d6b78;
  --line:rgba(21,58,99,.18);
  --shadow:0 18px 40px rgba(16,44,73,.08);
  --wrap:min(1120px,calc(100% - 48px));

  --type-section-title:44px;
  --type-feature-title:40px;
  --type-intro:18px;
  --type-body:19px;
  --type-card-body:15px;
  --type-faq-question:22px;
  --type-eyebrow:13.55px;
  --type-small-title:12.6px;
  --type-meta:10.5px;
  --type-button:13.5px;
  --leading-title:.98;
  --leading-intro:1.30;
  --leading-body:1.32;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Source Sans 3',Arial,sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.5;
}
img{display:block;width:100%;height:auto;border-radius:0}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
.wrap{width:var(--wrap);margin:0 auto}
.eyebrow{
  display:flex;
  align-items:center;
  gap:1rem;
  text-transform:uppercase;
}
.eyebrow::after{
  content:"";
  height:1px;
  background:currentColor;
}
.sr-only,.skip-link:not(:focus){
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.skip-link:focus{
  position:fixed;
  left:1rem;
  top:1rem;
  z-index:9999;
  padding:.75rem 1rem;
  background:var(--navy);
  color:#fff;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(251,248,242,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(21,58,99,.08);
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
  min-height:74px;
}
.brand{
  display:inline-flex;
  flex-direction:column;
  color:var(--navy);
  letter-spacing:.18em;
}
.brand-word{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:clamp(1.75rem,2.6vw,2.35rem);
  line-height:.9;
}
.brand-sub{
  margin-top:.45rem;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.66em;
}
.site-nav{
  display:flex;
  justify-content:center;
  gap:clamp(1rem,2vw,2rem);
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.site-nav a{
  position:relative;
  padding:.5rem 0;
  color:var(--navy-deep);
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
.header-note{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  white-space:nowrap;
  color:var(--navy-deep);
}
.header-note-line{
  width:48px;
  height:1px;
  margin-top:.9rem;
  background:var(--gold);
}
.header-note small{
  display:block;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.header-note strong{display:block;font-weight:600}
.nav-toggle{
  display:none;
  margin-left:auto;
  width:50px;
  height:50px;
  border:1px solid var(--line);
  border-radius:0;
  background:rgba(255,255,255,.55);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span:not(.sr-only){display:block;width:22px;height:2px;background:var(--navy)}

/* Hero */
.hero{
  position:relative;
  display:grid;
  min-height:0;
  height:auto;
  aspect-ratio:1024/291;
  align-items:stretch;
  overflow:hidden;
  background:#dbe9f4;
}
.hero-media,.hero-overlay{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{
  background:linear-gradient(90deg,rgba(250,248,241,.62) 0%,rgba(250,248,241,.44) 27%,rgba(250,248,241,.12) 49%,rgba(250,248,241,0) 66%);
}
.hero-content{
  position:relative;
  z-index:1;
  width:min(888px,calc(100% - 136px));
  height:100%;
  margin:0 auto;
  padding:37px 0 0;
}
.hero .eyebrow{
  margin:0 0 14px;
  color:#ad8429;
  font-size:8.075px;
  line-height:1;
  font-weight:600;
  letter-spacing:.255em;
}
.hero .eyebrow::after{width:63px}
.hero h1{
  max-width:none;
  margin:0;
  color:#132f4d;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:49.3px;
  line-height:.88;
  font-weight:500;
  letter-spacing:.018em;
}
.hero-dek{
  max-width:465px;
  margin:11px 0 0;
  color:#173653;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:21.25px;
  line-height:1.03;
  font-style:italic;
  font-weight:500;
  letter-spacing:-.005em;
}
.hero-meta{
  position:relative;
  display:grid;
  grid-template-columns:32% 25.5% 23.5% 19%;
  width:580px;
  margin:27px 0 0;
  padding:25px 0 0;
  gap:0;
}
.hero-meta::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:445px;
  height:1px;
  background:rgba(181,139,49,.82);
}
.hero-meta>div{
  min-height:39px;
  padding:0 21px;
  border-right:1px solid rgba(181,139,49,.70);
}
.hero-meta>div:first-child{padding-left:0}
.hero-meta>div:last-child{padding-right:0;border-right:0}
.hero .meta-label,.hero .meta-value{
  display:block;
  color:#153653;
  font-family:'Source Sans 3',Arial,sans-serif;
  text-transform:uppercase;
}
.hero .meta-label{
  font-size:8.925px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:.13em;
}
.hero .meta-value{
  margin-top:7px;
  font-size:8.075px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:.105em;
}

/* Process */
.section-process{padding:22px 0 24px;background:#dbeaf4}
.section-process .process-intro{
  display:grid;
  grid-template-columns:420px 1fr;
  column-gap:64px;
  align-items:start;
  margin-bottom:18px;
}
.section-process .process-intro>div:first-child{padding-top:0}
.section-process .process-intro>div:last-child{padding-top:14px}
.section-process .eyebrow{
  margin:0 0 8px;
  color:#17395f;
  font-size:var(--type-eyebrow);
  line-height:1;
  font-weight:600;
  letter-spacing:.24em;
}
.section-process .eyebrow::after{width:68px;background:var(--gold)}
.section-process h2{
  max-width:340px;
  margin:0;
  color:#15365d;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-section-title);
  line-height:var(--leading-title);
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.section-process .process-intro>div:last-child p{
  max-width:720px;
  margin:0;
  color:#213b59;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-intro);
  line-height:var(--leading-intro);
  font-weight:500;
}
.process-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.process-step{
  min-height:136px;
  padding:0 20px;
  border-right:1px solid rgba(181,139,49,.72);
}
.process-step:first-child{padding-left:0}
.process-step:last-child{padding-right:0;border-right:0}
.step-number{
  display:block;
  margin:0 0 11px;
  color:var(--gold);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;
  line-height:.95;
  font-weight:500;
}
.process-step h3{
  margin:0 0 7px;
  color:#17395f;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:var(--type-small-title);
  line-height:1.15;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}
.process-step p{
  margin:0;
  color:#2a4057;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-card-body);
  line-height:1.28;
  font-weight:500;
}

/* Captain */
.section-john{padding:0;background:#f7f2e8}
.john-grid{
  display:grid;
  grid-template-columns:1.42fr 1.08fr .66fr;
  min-height:300px;
  width:100%;
}
.john-photo{margin:0;min-width:0;overflow:hidden}
.john-photo img{width:100%;height:100%;min-height:300px;object-fit:cover}
.john-photo-captain img,.john-photo-compass img{object-position:center}
.john-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px 54px 40px;
  background:#f7f2e8;
  color:#263b52;
}
.john-copy .eyebrow{
  margin:0 0 12px;
  color:#17395f;
  font-size:var(--type-eyebrow);
  line-height:1;
  font-weight:600;
  letter-spacing:.24em;
}
.john-copy .eyebrow::after{width:78px;background:var(--gold)}
.john-copy h2{
  margin:0 0 16px;
  color:#17395f;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-feature-title);
  line-height:var(--leading-title);
  font-weight:500;
}
.john-credentials{
  margin:0 0 17px;
  color:#17395f;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:var(--type-meta);
  line-height:1.55;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.john-copy>p:not(.eyebrow):not(.john-credentials){
  max-width:560px;
  margin:0 0 20px;
  color:#2d4055;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-body);
  line-height:var(--leading-body);
  font-weight:500;
}
.john-button,.certificate-button,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:var(--type-button);
  line-height:1;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.john-button{
  align-self:flex-start;
  gap:30px;
  min-width:205px;
  min-height:42px;
  padding:10px 18px 9px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#fff;
}
.john-button:hover,.john-button:focus-visible{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}

/* Testimonial parallax */
.testimonial-band{
  height:54px;
  background:#e9e5dc;
  border-top:1px solid rgba(28,47,73,.10);
  border-bottom:1px solid rgba(28,47,73,.10);
}
.testimonial-parallax{
  position:relative;
  display:grid;
  place-items:center;
  min-height:355px;
  overflow:hidden;
  isolation:isolate;
}
.testimonial-parallax-media{
  position:absolute;
  inset:-8% 0;
  z-index:0;
  transform:translate3d(0,0,0) scale(1.08);
  will-change:transform;
  backface-visibility:hidden;
}

.testimonial-parallax-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.testimonial-parallax-inner{
  position:relative;
  z-index:1;
  width:min(920px,calc(100% - 56px));
  padding:76px 0 72px;
  text-align:center;
}
.testimonial-parallax blockquote{max-width:880px;margin:0 auto}
.testimonial-parallax blockquote p{
  margin:0;
  color:#fff;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:40px;
  line-height:1.06;
  font-weight:500;
  letter-spacing:.004em;
  text-align:center;
  text-shadow:0 1px 2px rgba(10,28,47,.28),0 4px 14px rgba(10,28,47,.16);
}
.testimonial-parallax blockquote footer{
  margin-top:20px;
  color:#fff;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.20em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 1px 2px rgba(10,28,47,.24);
}
.testimonial-parallax blockquote footer span{margin-left:10px}

/* Ceremonies */
.section-ceremonies{padding:30px 0 34px;background:#f7f2e8}
.ceremonies-heading{
  display:grid;
  grid-template-columns:420px 1fr;
  column-gap:64px;
  align-items:start;
  margin-bottom:24px;
}
.ceremonies-title .eyebrow{
  margin:0 0 8px;
  color:#17395f;
  font-size:var(--type-eyebrow);
  line-height:1;
  font-weight:600;
  letter-spacing:.24em;
}
.ceremonies-title .eyebrow::after{width:66px;background:var(--gold)}
.ceremonies-title h2{
  margin:0;
  color:#17395f;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-section-title);
  line-height:var(--leading-title);
  font-weight:500;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.ceremonies-intro{padding-top:14px}
.ceremonies-intro p{
  max-width:720px;
  margin:0;
  color:#263c53;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-intro);
  line-height:var(--leading-intro);
  font-weight:500;
}
.ceremonies-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ceremony-item{min-width:0}
.ceremony-item img{width:100%;aspect-ratio:1.78/1;object-fit:cover}
.ceremony-copy{padding-top:15px}
.ceremony-copy h3{
  margin:0 0 6px;
  color:#17395f;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:var(--type-small-title);
  line-height:1.15;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.ceremony-copy p{
  margin:0;
  color:#2b4056;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-card-body);
  line-height:1.28;
  font-weight:500;
}

/* Certificate */
.section-certificate{position:relative;min-height:0;padding:0;overflow:hidden;background:none}
.certificate-fullframe{display:block;width:100%;height:auto;object-fit:contain}
.certificate-overlay{
  position:absolute;
  inset:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:min(1200px,calc(100% - 48px));
  margin:0 auto;
  pointer-events:none;
}
.certificate-text{
  width:min(45%,560px);
  max-width:560px;
  margin-left:0;
  padding:0;
  color:#17395f;
  background:transparent;
  pointer-events:auto;
}
.certificate-text .eyebrow{
  margin:0 0 10px;
  color:#17395f;
  font-size:var(--type-eyebrow);
  line-height:1;
  font-weight:600;
  letter-spacing:.24em;
}
.certificate-text .eyebrow::after{width:76px;background:var(--gold)}
.certificate-text h2{
  margin:0 0 12px;
  color:#17395f;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-section-title);
  line-height:var(--leading-title);
  font-weight:500;
  letter-spacing:-.01em;
}
.certificate-text>p:not(.eyebrow){
  max-width:540px;
  margin:0 0 18px;
  color:#294158;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-body);
  line-height:var(--leading-body);
  font-weight:500;
}
.certificate-button{
  gap:42px;
  min-width:350px;
  min-height:48px;
  padding:11px 18px 10px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#fff;
}
.certificate-button:hover,.certificate-button:focus-visible{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}

/* FAQ */
.section-faq{padding:54px 0 58px;background:#f7f2e8}
.faq-heading{
  display:grid;
  grid-template-columns:420px 1fr;
  column-gap:64px;
  align-items:start;
  margin-bottom:34px;
}
.section-faq .eyebrow{
  margin:0 0 13px;
  color:#17395f;
  font-size:var(--type-eyebrow);
  line-height:1;
  font-weight:600;
  letter-spacing:.24em;
}
.section-faq .eyebrow::after{width:92px;background:var(--gold)}
.section-faq h2{
  margin:0;
  color:#17395f;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-section-title);
  line-height:var(--leading-title);
  font-weight:500;
  letter-spacing:.005em;
}
.faq-heading>div:last-child{padding-top:14px}
.faq-heading>div:last-child p{
  max-width:720px;
  margin:0;
  color:#294158;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-intro);
  line-height:var(--leading-intro);
  font-weight:500;
}
.faq-list{display:grid;gap:0;border-top:1px solid rgba(23,57,95,.18)}
.faq-list details{padding:0;border:0;border-bottom:1px solid rgba(23,57,95,.18);background:transparent}
.faq-list summary{
  position:relative;
  padding:25px 58px 25px 0;
  color:#17395f;
  cursor:pointer;
  list-style:none;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:var(--type-faq-question);
  line-height:1.30;
  font-weight:600;
  letter-spacing:.018em;
  text-transform:none;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  color:var(--gold);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:51px;
  line-height:1;
  font-weight:500;
}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{
  max-width:980px;
  margin:0;
  padding:0 66px 26px 0;
  color:#294158;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-body);
  line-height:1.36;
  font-weight:500;
}

/* Vessels */
.vessel-band{padding:0 0 44px;background:#f7f2e8}
.vessel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vessel-grid figure{margin:0;min-width:0;overflow:hidden}
.vessel-grid img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Contact */
.section-contact{padding:0 0 38px;background:#f7f2e8}
.contact-panel{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:42px;
  padding:36px 42px;
  background:#17395f;
  color:#fff;
}
.contact-panel .eyebrow{
  margin:0 0 10px;
  color:#d5b467;
  font-size:var(--type-eyebrow);
  line-height:1;
  font-weight:600;
  letter-spacing:.24em;
}
.contact-panel .eyebrow::after{width:70px;background:#d5b467}
.contact-panel h2{
  margin:0 0 12px;
  color:#fff;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-feature-title);
  line-height:var(--leading-title);
  font-weight:500;
  letter-spacing:.005em;
}
.contact-panel>div:first-child>p:not(.eyebrow){
  max-width:690px;
  margin:0;
  color:rgba(255,255,255,.92);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--type-body);
  line-height:var(--leading-body);
  font-weight:500;
}
.contact-location{
  margin:20px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(213,180,103,.48);
  color:#fff;
  font-style:normal;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:16px;
  line-height:1.25;
  letter-spacing:.06em;
}
.contact-location strong{
  display:inline-block;
  margin-bottom:4px;
  color:#fff;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.contact-location a{color:#fff}
.contact-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:0;align-content:center}
.contact-panel .button{
  min-height:43px;
  padding:0 18px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#fff;
}
.contact-panel .button:not(.button-secondary):hover,.contact-panel .button:not(.button-secondary):focus-visible{
  background:var(--navy-deep);
  border-color:var(--navy-deep);
  color:#fff;
}
.contact-panel .button-secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.52);
}
.contact-panel .button-secondary:hover,.contact-panel .button-secondary:focus-visible{background:rgba(255,255,255,.14)}

/* Footer */
.site-footer{padding:22px 0 26px;background:#f7f2e8}
.footer-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
  padding-top:18px;
  border-top:1px solid rgba(23,57,95,.18);
}
.footer-brand .brand-word{font-size:2rem}
.footer-brand .brand-sub{font-size:.68rem}
.footer-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem 1.5rem;
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer-note{
  color:#536476;
  text-align:right;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:16px;
  line-height:1.25;
}

/* Desktop rail */
@media(min-width:901px){
  .wrap,.certificate-overlay{width:min(1200px,calc(100% - 48px))}
  .testimonial-parallax-inner{width:min(920px,calc(100% - 48px))}
}

/* Large hero */
@media(min-width:1025px){
  .hero-content{width:min(1170px,calc(100% - 9.6vw));padding-top:clamp(37px,3.7vw,56px)}
  .hero .eyebrow{font-size:clamp(8.075px,.7905vw,11.475px)}
  .hero .eyebrow::after{width:clamp(63px,6.15vw,94px)}
  .hero h1{font-size:clamp(49.3px,4.8025vw,73.1px)}
  .hero-dek{max-width:clamp(465px,45.4vw,690px);margin-top:clamp(11px,1.05vw,16px);font-size:clamp(21.25px,2.0655vw,31.45px)}
  .hero-meta{width:clamp(580px,56.6vw,860px);margin-top:clamp(27px,2.63vw,40px);padding-top:clamp(25px,2.43vw,37px)}
  .hero-meta::before{width:76.7%}
  .hero-meta>div{padding:0 clamp(21px,2.05vw,31px)}
  .hero .meta-label{font-size:clamp(13.925px,.867vw,14.175px)}
  .hero .meta-value{font-size:clamp(12.005px,.7905vw,13.9px)}
}

/* Header / tablet transitions */
@media(max-width:1080px){
  .header-inner{grid-template-columns:auto auto 1fr}
  .header-note{display:none}
  .john-copy{padding:34px 38px}
}

@media(max-width:980px){
  .vessel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vessel-grid figure:last-child{grid-column:1/-1}
}

@media(max-width:960px){
  .john-grid{grid-template-columns:1.2fr 1fr}
  .john-photo-compass{grid-column:1/-1;height:240px}
  .john-photo-compass img{min-height:240px;object-position:center 54%}
}

@media(max-width:920px){
  .site-nav{
    position:absolute;
    top:calc(100% + 8px);
    left:24px;
    right:24px;
    display:none;
    flex-direction:column;
    gap:.6rem;
    padding:1rem;
    background:rgba(251,248,242,.98);
    border:1px solid rgba(21,58,99,.12);
    box-shadow:var(--shadow);
    text-align:center;
  }
  .site-nav.is-open{display:flex}
  .nav-toggle{display:inline-flex;justify-self:end}
  .header-inner{position:relative;grid-template-columns:auto 1fr auto}

  .hero{aspect-ratio:auto;min-height:390px}
  .hero-media img{object-position:63% center}
  .hero-content{width:min(100% - 56px,760px);padding-top:40px;padding-bottom:22px}
  .hero h1{font-size:clamp(40.8px,7.48vw,54.4px)}
  .hero-dek{max-width:470px;font-size:clamp(19.55px,3.4vw,23.8px)}
  .hero-meta{grid-template-columns:1fr;width:min(580px,88%);margin-top:26px;gap:.8rem}
  .hero-meta>div{padding-bottom:.8rem;border-right:0;border-bottom:1px solid rgba(181,139,49,.35)}
  .hero-meta>div:last-child{padding-bottom:0;border-bottom:0}

  .section-process{padding:28px 0 30px}
  .section-process .process-intro{grid-template-columns:1fr;gap:18px}
  .section-process h2{max-width:none}
  .section-process .process-intro>div:last-child{padding-top:0}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-step,.process-step:first-child,.process-step:last-child{
    padding:16px 18px;
    border-right:1px solid rgba(181,139,49,.5);
    border-bottom:1px solid rgba(181,139,49,.35);
  }
  .process-step:nth-child(2n){border-right:0}

  .ceremonies-heading{grid-template-columns:1fr;gap:18px}
  .ceremonies-intro{padding-top:0}
  .ceremonies-grid{gap:22px}

  .faq-heading{grid-template-columns:1fr;gap:16px}
  .faq-heading>div:last-child{padding-top:0}

  .contact-panel{grid-template-columns:1fr;padding:30px;gap:30px}
  .footer-inner{grid-template-columns:1fr}
  .footer-note{text-align:left}
}

/* Tablet type system */
@media(max-width:900px) and (min-width:701px){
  :root{
    --type-section-title:38px;
    --type-feature-title:35px;
    --type-intro:16px;
    --type-body:15.5px;
    --type-card-body:14.5px;
    --type-faq-question:16px;
    --type-eyebrow:10.5px;
    --type-small-title:11.55px;
    --type-meta:10px;
    --type-button:10.5px;
  }
  .certificate-overlay{width:min(100% - 40px,820px)}
  .certificate-text{width:min(52%,460px);max-width:460px}
  .certificate-button{min-width:290px;min-height:46px}
  .faq-list summary{padding:21px 48px}
  .faq-list summary::after{font-size:28px}
  .faq-list details p{padding:0 48px 22px 0}
}

/* Mobile */
@media(max-width:700px){
  :root{
    --wrap:min(100% - 32px,1200px);
    --type-section-title:31px;
    --type-feature-title:31px;
    --type-intro:16px;
    --type-body:15px;
    --type-card-body:15px;
    --type-faq-question:15.5px;
    --type-eyebrow:10px;
    --type-small-title:11px;
    --type-meta:9.5px;
    --type-button:10.5px;
  }
  .header-inner{min-height:84px}
  .brand-word{font-size:2.1rem}
  .brand-sub{font-size:.66rem;letter-spacing:.3em}

  .john-grid{grid-template-columns:1fr}
  .john-photo-captain,.john-photo-compass{height:auto}
  .john-photo-captain img,.john-photo-compass img{min-height:0;aspect-ratio:16/10}
  .john-copy{padding:30px 22px 32px}

  .section-certificate{display:flex;flex-direction:column;background:#cfe0ee}
  .certificate-overlay{position:static;order:1;display:block;width:100%;background:transparent}
  .certificate-fullframe{order:2}
  .certificate-text{width:min(100% - 32px,560px);max-width:none;margin:0 auto;padding:28px 0 30px}
  .certificate-button{width:100%;min-width:0;min-height:44px}

  .section-faq{padding:32px 0 36px}
  .faq-list summary{padding:18px 40px 18px 0}
  .faq-list summary::after{font-size:28px}
  .faq-list details p{padding:0 36px 20px 0;line-height:1.34}

  .vessel-band{padding-bottom:30px}
  .vessel-grid{grid-template-columns:1fr;gap:14px}
  .vessel-grid figure:last-child{grid-column:auto}

  .contact-panel{padding:28px 22px 30px;gap:24px}
  .contact-actions{gap:8px}
  .contact-panel .button{width:100%;min-height:44px}
}

@media(max-width:640px){
  .vessel-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .hero{
    min-height:0;
    aspect-ratio:auto;
    grid-template-rows:auto auto;
    background:#f7f3eb;
  }
  .hero-media{position:relative;grid-row:2;height:46vw;min-height:190px;max-height:280px}
  .hero-media img{object-position:68% center}
  .hero-overlay{display:none}
  .hero-content{grid-row:1;width:min(100% - 32px,560px);height:auto;padding:26px 0 18px}
  .hero .eyebrow{margin-bottom:11px;font-size:7.225px}
  .hero .eyebrow::after{width:52px}
  .hero h1{font-size:clamp(37.4px,11.9vw,51px);line-height:.9}
  .hero-dek{max-width:23ch;margin-top:9px;font-size:clamp(17.85px,5.61vw,22.95px)}
  .hero-meta{width:100%;margin-top:22px;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:16px;row-gap:10px}
  .hero-meta::before{width:100%}
  .hero-meta>div{min-height:44px;padding:0 12px 7px}
  .hero-meta>div:nth-child(odd){padding-left:0}
  .hero-meta>div:nth-child(even){border-right:0}
  .hero .meta-label{font-size:7.65px}
  .hero .meta-value{margin-top:5px;font-size:7.225px}

  .process-grid{grid-template-columns:1fr}
  .process-step,.process-step:first-child,.process-step:last-child{
    min-height:0;
    padding:15px 0;
    border-right:0;
    border-bottom:1px solid rgba(181,139,49,.35);
  }
  .process-step:last-child{border-bottom:0}

  .testimonial-band{height:30px}
  .testimonial-parallax{min-height:250px}
  .testimonial-parallax-media{inset:-5% 0}
  .testimonial-parallax-inner{width:min(100% - 28px,920px);padding:48px 0 46px}
  .testimonial-parallax blockquote p{font-size:28px;line-height:1.10}
  .testimonial-parallax blockquote footer{margin-top:16px;font-size:10px;letter-spacing:.18em}
}

@media(max-width:900px) and (min-width:621px){
  .testimonial-band{height:42px}
  .testimonial-parallax{min-height:300px}
  .testimonial-parallax-inner{width:min(100% - 40px,920px);padding:60px 0 58px}
  .testimonial-parallax blockquote p{font-size:34px}
}


/* =========================================================
   MOBILE READABILITY AUDIT — typography only
   No layout, imagery, spacing, or desktop/tablet changes.
   ========================================================= */
@media(max-width:700px){
  :root{
    --type-intro:16px;
    --type-body:16px;
    --type-card-body:16px;
    --type-faq-question:16.5px;
    --type-eyebrow:11px;
    --type-small-title:12px;
    --type-meta:11px;
    --type-button:12px;
  }

  .brand-sub{
    font-size:.72rem;
  }

  .contact-location strong{
    font-size:11px;
  }
}

@media(max-width:620px){
  .hero .eyebrow{
    font-size:9.5px;
  }

  .hero .meta-label{
    font-size:10.5px;
  }

  .hero .meta-value{
    font-size:10px;
  }

  .testimonial-parallax blockquote footer{
    font-size:11px;
  }
}


/* Footer website credit + mobile centering */
.footer-credit{
  display:inline-block;
  margin-top:5px;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.025em;
}

.footer-credit a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(21,58,99,.25);
}

.footer-credit a:hover,
.footer-credit a:focus-visible{
  color:var(--navy-deep);
  border-bottom-color:var(--navy-deep);
}

@media(max-width:700px){
  .footer-inner{
    justify-items:center;
    text-align:center;
  }

  .footer-brand{
    align-items:center;
  }

  .footer-nav{
    justify-content:center;
    text-align:center;
  }

  .footer-note{
    text-align:center;
  }
}


/* Mobile ceremony cards — stack for readable image + copy rhythm */
@media(max-width:700px){
  .ceremonies-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .ceremony-item{
    display:block;
  }

  .ceremony-item img{
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
  }

  .ceremony-copy{
    padding-top:14px;
  }

  .ceremony-copy h3{
    margin-bottom:8px;
  }

  .ceremony-copy p{
    max-width:none;
  }
}



/* Near-fold editorial images are hydrated by motion.js only as they approach the viewport. */
img.deferred-media{
  background:#e8e4db;
}

/* Performance containment — defer below-the-fold rendering work */
.section-process,
.section-john,
.testimonial-band,
.testimonial-parallax,
.section-ceremonies,
.section-certificate,
.section-faq,
.vessel-band,
.section-contact,
.site-footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

/* Motion system — scroll reveals only; hero renders immediately for LCP */
html.motion-ready .scroll-reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:
    opacity .72s ease var(--reveal-delay,0ms),
    transform .82s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
html.motion-ready .scroll-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.motion-ready .scroll-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}