/* =========================================================
   Bhoomi Jani Weddings — stylesheet
   Editorial / modern / minimal.
   Sans-serif display with serif italic used only as accent.
   ========================================================= */

:root{
  /* --- COLOURS: near-monochrome. Photography carries the colour. --- */
  --bg:        #FBFAF8;   /* off-white page */
  --bg-alt:    #F2F0EC;   /* soft panel */
  --bg-soft:   #EDEAE5;
  --fg:        #16150F;   /* near-black */
  --muted:     #75726A;   /* secondary text */
  --sage:      #4E5346;   /* accent, used sparingly */
  --clay:      #8C7B6A;   /* second accent, rarer still */
  --line:      #E2DFD8;
  --ink-panel: #2F332B;   /* deep sage-ink, not black */

  /* --- TYPE --- */
  --serif: 'Cormorant Garamond', Georgia, serif;   /* accents only */
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--sans); font-weight:400; letter-spacing:-.02em; line-height:1.1}
h1{letter-spacing:-.035em}
/* serif italic is the ONLY place the serif appears — emphasis, never structure */
h1 em,h2 em,h3 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
em{font-style:italic}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{max-width:1240px; margin:0 auto; padding:0 40px}
.narrow{max-width:820px; margin:0 auto; padding:0 40px}
.center{text-align:center}

/* ---------- small caps label ---------- */
.eyebrow{
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sage); font-weight:400; margin-bottom:20px;
}
.eyebrow.clay{color:var(--clay)}
.eyebrow.pale{color:rgba(255,255,255,.6)}

/* ---------- header / nav ---------- */
header.site{position:absolute; top:0; left:0; right:0; z-index:40; padding:34px 0}
header.site.solid{position:relative; padding:26px 0; border-bottom:1px solid var(--line);
  background:var(--bg)}
.nav-row{display:flex; justify-content:space-between; align-items:center;
  max-width:1240px; margin:0 auto; padding:0 40px}
.logo{font-family:var(--sans); font-size:15px; font-weight:400; letter-spacing:.32em;
  text-transform:uppercase}
.logo i{font-style:normal; color:var(--sage)}
nav.links{display:flex; gap:34px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase}
nav.links a{opacity:.8; padding-bottom:3px; transition:opacity .25s}
nav.links a:hover, nav.links a.active{opacity:1; border-bottom:1px solid currentColor}
.on-hero .logo, .on-hero nav.links{color:#fff}
.on-hero .logo i{color:#CFD8C2}

/* ---------- mobile menu ---------- */
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:8px;
  width:38px; height:34px; position:relative}
.menu-btn span{display:block; width:22px; height:1px; background:var(--fg);
  position:absolute; left:8px; transition:transform .3s, opacity .2s}
.menu-btn span:nth-child(1){top:11px}
.menu-btn span:nth-child(2){top:17px}
.menu-btn span:nth-child(3){top:23px}
.on-hero .menu-btn span{background:#fff}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.menu-open .menu-btn span{background:var(--fg)}
body.menu-open header.site{position:fixed}
body.menu-open .logo{color:var(--fg)}
body.menu-open .logo i{color:var(--sage)}

.mobile-nav{position:fixed; inset:0; background:var(--bg); z-index:30;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; opacity:0; pointer-events:none; transition:opacity .35s}
body.menu-open .mobile-nav{opacity:1; pointer-events:auto}
.mobile-nav a{font-family:var(--sans); font-size:30px; letter-spacing:-.02em;
  padding:14px 0; color:var(--fg)}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden}
.hero .media{position:absolute; inset:0;
  background:linear-gradient(150deg,#33382C 0%,#5A6650 48%,#8A7C68 100%)}
.hero .media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.15) 65%),
             linear-gradient(to right,rgba(0,0,0,.6),rgba(0,0,0,.08) 60%)}
.hero .inner{position:relative; padding-bottom:92px; max-width:860px}
.hero h1{font-size:clamp(40px,5.6vw,74px); font-weight:400}
.hero h1 em{color:#E8DCC8}
.hero .sub{margin-top:26px; font-size:19px; max-width:560px; color:rgba(255,255,255,.86)}

/* ---------- sections ---------- */
section{padding:118px 0}
section.snug{padding:78px 0}
section.alt{background:var(--bg-alt)}
section.soft{background:var(--bg-soft)}
h2.title{font-size:clamp(30px,3.6vw,46px); max-width:800px}
h2.title.center{margin-left:auto; margin-right:auto}
.lede{font-size:19px; color:var(--muted); max-width:640px; margin-top:22px}
.lede.center{margin-left:auto; margin-right:auto}

/* ---------- photo placeholders ---------- */
.ph{position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.018) 0 12px,transparent 12px 24px),
    linear-gradient(140deg,#EAE3D7,#D6CDBD);
  display:flex; align-items:center; justify-content:center}
.ph span{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#8C8474; text-align:center; padding:22px; line-height:1.9}

/* ---------- real photos ---------- */
.shot-wrap{position:relative}
.shot{position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover}
.author-box .shot-wrap,.author-box .shot{border-radius:50%}

/* ---------- layout helpers ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.split.offset{grid-template-columns:.85fr 1.15fr}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.stack-gap{margin-top:34px}

/* ---------- pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:44px; margin-top:70px}
.pillar{border-top:1px solid var(--line); padding-top:22px}
.pillar h3{font-size:23px; margin-bottom:10px}
.pillar p{color:var(--muted); font-size:15.5px; line-height:1.7}

/* ---------- package blocks ---------- */
.package{padding:96px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:78px; align-items:start}
.package:first-of-type{border-top:none}
.package .num{font-family:var(--sans); font-size:13px; font-weight:400; line-height:1;
  letter-spacing:.3em; color:var(--muted); margin-bottom:26px}
.package h3{font-size:clamp(26px,3vw,38px); margin-bottom:14px}
.package .price{font-size:15px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sage); margin-bottom:6px}
.package .when{font-size:14px; color:var(--muted); font-style:italic}
.package .hook{font-family:var(--sans); font-size:21px; font-weight:400; line-height:1.4;
  letter-spacing:-.015em; margin-bottom:24px; color:var(--fg)}
.package .body p{color:var(--muted); margin-bottom:26px}
.package .changes{font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--clay); margin-bottom:16px}
.package ul{list-style:none}
.package ul li{padding:15px 0; border-top:1px solid var(--line);
  font-size:16px; position:relative; color:var(--fg)}
.package .closer{margin-top:28px; font-family:var(--serif); font-style:italic;
  font-size:20px; line-height:1.5; color:var(--fg); padding-left:22px;
  border-left:2px solid var(--sage)}
.package .ph{width:100%; aspect-ratio:4/5; margin-top:34px}

/* ---------- testimonial ---------- */
section.quote{background:var(--bg-soft); color:var(--fg); text-align:center}
.quote blockquote{font-family:var(--serif); font-style:italic;
  font-size:clamp(24px,3vw,38px); line-height:1.42; max-width:900px; margin:0 auto;
  font-weight:400; letter-spacing:.005em; color:var(--fg)}
.quote .attrib{margin-top:34px; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted)}
.quote .attrib strong{color:var(--sage); font-weight:400; display:block; margin-bottom:8px;
  font-size:14px; letter-spacing:.16em}

/* ---------- buttons ---------- */
.btn{display:inline-block; margin-top:34px; padding:16px 42px;
  border:1px solid currentColor; font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; transition:background .3s,color .3s}
.btn:hover{background:var(--fg); color:var(--bg)}
.btn.solid{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn.solid:hover{background:transparent; color:var(--fg)}
.on-dark .btn:hover{background:#fff; color:var(--ink-panel)}

/* ---------- dark CTA ---------- */
.cta{background:var(--ink-panel); color:#fff; text-align:center}
.cta h2{color:#fff}
.cta .lede{color:rgba(255,255,255,.7)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:190px 0 78px; border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(36px,5vw,60px)}
.page-hero .lede{margin-top:24px}

/* ---------- contact ---------- */
.contact-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:90px}
.field{margin-bottom:26px}
.field label{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px}
.field input,.field textarea{width:100%; border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:11px 0; font-family:var(--sans); font-size:16.5px;
  font-weight:300; color:var(--fg)}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--sage)}
button.btn{border:1px solid var(--fg); background:var(--fg); color:var(--bg); cursor:pointer;
  font-family:var(--sans)}

/* ---------- footer ---------- */
footer{padding:64px 0; border-top:1px solid var(--line); text-align:center;
  font-size:14px; color:var(--muted)}
footer .logo{display:block; margin-bottom:16px; font-size:14px; color:var(--fg)}
footer .fnav{display:flex; gap:26px; justify-content:center; margin:22px 0;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px);
  transition:opacity .95s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  body{font-size:16px}
  .container,.narrow{padding:0 24px}
  .nav-row{padding:0 24px}
  nav.links{display:none}
  .menu-btn{display:block}
  header.site{padding:22px 0}
  header.site.solid{padding:18px 0}
  .split,.split.offset,.package,.contact-wrap{grid-template-columns:1fr; gap:40px}
  .package{padding:64px 0}
  .package .num{font-size:56px}
  .pillars{grid-template-columns:1fr 1fr; gap:30px; margin-top:48px}
  .grid-3{grid-template-columns:1fr 1fr}
  section{padding:80px 0}
  .page-hero{padding:150px 0 56px}
  .hero .inner{padding-bottom:64px}
}
@media(max-width:560px){
  .pillars,.grid-3,.grid-2{grid-template-columns:1fr}
  .grid-3 > div:first-child{grid-column:span 1 !important}
}

/* =========================================================
   BLOG
   ========================================================= */

/* --- index cards --- */
.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:44px}
.post-card{display:block; background:var(--bg-alt); transition:transform .4s}
.post-card:hover{transform:translateY(-5px)}
.post-card .ph{width:100%}
.pc-body{padding:32px 34px 38px}
.pc-body h3{font-size:25px; line-height:1.2; letter-spacing:-.025em; margin-bottom:14px}
.pc-body p{color:var(--muted); font-size:16px}
.readmore{display:inline-block; margin-top:20px; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage); border-bottom:1px solid currentColor;
  padding-bottom:3px}

/* --- article --- */
.article-hero{border-bottom:none; padding-bottom:36px}
.crumbs{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:26px}
.crumbs a{border-bottom:1px solid var(--line)}
.post-meta{margin-top:26px; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted)}

.toc{background:var(--bg-alt); padding:32px 38px; margin-bottom:64px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:40px}
.toc li{font-size:15.5px; padding:5px 0; break-inside:avoid}
.toc a{color:var(--fg); border-bottom:1px solid transparent}
.toc a:hover{border-color:var(--sage)}

.article-body{font-size:18px; line-height:1.85}
.article-body h2{font-size:clamp(27px,3.2vw,36px); margin:64px 0 22px;
  padding-top:22px; border-top:1px solid var(--line)}
.article-body h2:first-child{margin-top:0; border-top:none; padding-top:0}
.article-body h3{font-size:23px; margin:34px 0 12px}
.article-body p{margin-bottom:22px}
.article-body strong{font-weight:500}
.article-body a{color:var(--sage); border-bottom:1px solid currentColor}

.article-body ul.spec{list-style:none; margin:0 0 28px}
.article-body ul.spec li{padding:14px 0; border-top:1px solid var(--line);
  position:relative; font-size:17px; line-height:1.6}

.callout{background:var(--bg-alt); border-left:2px solid var(--clay);
  padding:30px 34px; margin:36px 0}
.callout p{margin:0; font-family:var(--serif); font-style:italic; font-size:23px;
  line-height:1.5; letter-spacing:.005em}

.table-wrap{overflow-x:auto; margin:32px 0 36px}
.article-body table{width:100%; border-collapse:collapse; font-size:16px; min-width:520px}
.article-body th{text-align:left; font-family:var(--sans); font-weight:500; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
  padding:0 18px 14px 0; border-bottom:1px solid var(--fg)}
.article-body td{padding:16px 18px 16px 0; border-bottom:1px solid var(--line);
  vertical-align:top}
.article-body tbody tr:hover{background:rgba(0,0,0,.015)}

/* --- FAQs --- */
.faqs{margin-top:8px}
.faq-item{border-top:1px solid var(--line); padding:26px 0}
.faq-item h3{font-size:21px; margin:0 0 10px}
.faq-item p{color:var(--muted); margin:0; font-size:17px}

/* --- author + related --- */
.author-box{display:grid; grid-template-columns:150px 1fr; gap:34px; align-items:start;
  background:var(--bg-alt); padding:38px 40px; margin-top:72px}
.author-box .ph{width:150px; border-radius:50%}
.author-box h3{font-size:26px; margin-bottom:10px}
.author-box p{color:var(--muted); font-size:16px}
.author-box .btn{margin-top:22px; padding:13px 32px}

.related{margin-top:56px; padding:38px 40px; border:1px solid var(--line)}
.related h3{font-size:26px; margin:6px 0 12px}
.related h3:hover{color:var(--sage)}
.related p{color:var(--muted); font-size:16px; margin:0}

@media(max-width:900px){
  .post-grid{grid-template-columns:1fr; gap:32px}
  .toc{padding:26px 24px; margin-bottom:44px}
  .toc ol{columns:1}
  .article-body{font-size:17px}
  .author-box{grid-template-columns:1fr; gap:24px; padding:30px 26px}
  .author-box .ph{width:110px}
  .callout{padding:24px 22px}
  .callout p{font-size:19px}
}

/* =========================================================
   MODERN / MINIMAL REFINEMENTS
   Loaded last, so these win. Editorial structure, Duet-like
   restraint: more air, less ornament, quieter accents.
   ========================================================= */

/* --- more air --- */
section{padding:150px 0}
section.snug{padding:96px 0}
.container{max-width:1300px; padding:0 52px}
.narrow{max-width:780px; padding:0 52px}
.nav-row{max-width:1300px; padding:0 52px}

/* --- display type: bigger, tighter, lighter --- */
.hero h1{font-size:clamp(42px,6.4vw,88px); font-weight:200; letter-spacing:-.04em;
  line-height:1.02}
.hero .sub{font-weight:300; font-size:18px; color:rgba(255,255,255,.8); max-width:480px}
h2.title{font-size:clamp(30px,4.2vw,56px); font-weight:200; letter-spacing:-.035em;
  line-height:1.06}
.page-hero h1{font-size:clamp(38px,5.6vw,72px); font-weight:200; letter-spacing:-.04em}
.package h3{font-weight:300; letter-spacing:-.03em}
.pillar h3{font-size:20px; font-weight:400; letter-spacing:-.01em}
.article-body h2{font-weight:300; letter-spacing:-.03em}

/* --- quieter labels --- */
.eyebrow{font-size:10.5px; letter-spacing:.32em; color:var(--muted); font-weight:400;
  margin-bottom:26px}
.eyebrow.clay{color:var(--muted)}
nav.links{gap:30px; font-size:10.5px; letter-spacing:.24em; font-weight:400}
nav.links a{opacity:.7}

/* --- hairline buttons --- */
.btn{padding:17px 44px; font-size:10.5px; letter-spacing:.28em; font-weight:400;
  border-color:currentColor}

/* --- accents pulled back: rules instead of colour --- */
.package .price{color:var(--fg); font-size:13px; letter-spacing:.18em; font-weight:400}
.package .changes{color:var(--muted); letter-spacing:.28em; font-size:10.5px}
.package .closer{border-left:none; padding-left:0; padding-top:24px;
  border-top:1px solid var(--line); font-size:21px; color:var(--muted)}
.pillar{border-top:1px solid var(--fg)}
.callout{background:none; border-left:none; border-top:1px solid var(--fg);
  border-bottom:1px solid var(--line); padding:34px 0; margin:48px 0}
.callout p{color:var(--fg)}
.article-body a{color:var(--fg)}
.readmore{color:var(--fg)}
.toc{background:none; border-top:1px solid var(--fg);
  border-bottom:1px solid var(--line); padding:30px 0}

/* --- photo placeholders: neutral, no stripes --- */
.ph{background:linear-gradient(160deg,#EDEAE4,#DEDAD2)}
.ph span{color:#98938A; letter-spacing:.2em; font-size:10px}

/* --- blog cards: flat, borderless --- */
.post-card{background:none}
.post-card:hover{transform:none}
.post-card .ph,.post-card .shot{transition:opacity .5s}
.post-card:hover .ph,.post-card:hover .shot{opacity:.82}
.pc-body{padding:26px 0 0}
.pc-body h3{font-weight:300; font-size:26px; letter-spacing:-.03em}
.post-grid{gap:56px}

.author-box{background:none; border-top:1px solid var(--fg); padding:44px 0 0}
.related{border:none; border-top:1px solid var(--line); padding:38px 0 0}
.related h3{font-weight:300; letter-spacing:-.03em}

/* --- tables: lighter --- */
.article-body th{color:var(--muted); letter-spacing:.2em; font-size:10.5px;
  border-bottom:1px solid var(--fg)}
.article-body tbody tr:hover{background:none}

/* --- footer --- */
footer{padding:88px 0}
footer .fnav{font-size:10.5px; letter-spacing:.24em; gap:30px}

/* --- MOTION: slower, softer, staggered --- */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:none}

/* images ease in with a slight scale — Duet-like, barely noticeable */
.reveal .ph{clip-path:inset(0 0 0 0); transform:scale(1.04);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.reveal.in .ph{transform:scale(1)}

/* stagger children of a revealed block */
.reveal.in > *{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
.reveal.in > *:nth-child(2){animation-delay:.08s}
.reveal.in > *:nth-child(3){animation-delay:.16s}
.reveal.in > *:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in > *,.reveal .ph{animation:none !important; transform:none !important;
    opacity:1 !important; transition:none !important}
}

@media(max-width:900px){
  section{padding:88px 0}
  section.snug{padding:60px 0}
  .container,.narrow,.nav-row{padding:0 26px}
  .post-grid{gap:44px}
  footer{padding:60px 0}
}

/* =========================================================
   PACKAGE: brief + collapsed "Included Services" + testimonial
   ========================================================= */

.package .brief{color:var(--muted); font-size:17px; line-height:1.8; margin-bottom:32px}

details.included{border-top:1px solid var(--fg); border-bottom:1px solid var(--line);
  margin-bottom:32px}
details.included summary{list-style:none; cursor:pointer; padding:20px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px}
details.included summary::-webkit-details-marker{display:none}
details.included summary span{font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--fg)}
details.included summary em{font-style:normal; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); position:relative; padding-right:26px}
details.included summary em::after{content:"+"; position:absolute; right:0; top:50%;
  transform:translateY(-50%); font-size:16px; color:var(--fg); transition:transform .3s}
details.included[open] summary em::after{content:"\2013"}
details.included summary:hover span{opacity:.6}

.inc-body{padding-bottom:12px; animation:incfade .45s cubic-bezier(.16,1,.3,1) both}
@keyframes incfade{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.inc-head{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin:22px 0 4px}
.inc-head:first-child{margin-top:6px}
.package .inc-body ul{list-style:none; margin:0}
.package .inc-body ul li{padding:11px 0; border-top:1px solid var(--line);
  font-size:15.5px; line-height:1.6; position:relative; color:var(--fg)}

blockquote.pkg-quote{margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}
blockquote.pkg-quote p{font-family:var(--serif); font-style:italic; font-size:19px;
  line-height:1.55; color:var(--fg); margin:0 0 16px}
blockquote.pkg-quote cite{font-style:normal; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted)}

@media(max-width:900px){
  .package .brief{font-size:16px}
  details.included summary{padding:17px 0}
}

/* "also available" note inside a closer */
.package .closer .also{display:block; margin-top:16px; font-family:var(--sans);
  font-style:normal; font-size:14.5px; line-height:1.7; color:var(--muted)}

/* .spec list, available outside blog articles too (About page) */
ul.spec{list-style:none; margin:0 0 28px}
ul.spec li{padding:16px 0; border-top:1px solid var(--line);
  position:relative; font-size:17px; line-height:1.7; color:var(--fg)}
ul.spec li strong{font-weight:400}

/* contact details + footer links */
.contact-details a{color:var(--fg); border-bottom:1px solid var(--line); line-height:2.4}
.contact-details a:hover{border-color:var(--fg)}
.contact-details span{color:var(--muted)}
footer a[href^="mailto"], footer a[href*="instagram"]{color:var(--fg);
  border-bottom:1px solid var(--line)}
footer a[href^="mailto"]:hover, footer a[href*="instagram"]:hover{border-color:var(--fg)}

/* honeypot field — hidden from people, visible to bots */
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}


/* ---------- package scope spec ---------- */
.scope{margin:22px 0 26px; border-top:1px solid var(--line)}
.scope > div{display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:9px 0; border-bottom:1px solid var(--line)}
.scope dt{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:400}
.scope dd{margin:0; font-size:13.5px; color:var(--fg); text-align:right}
.addon-note{margin-top:44px; padding-top:30px; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted); max-width:640px; line-height:1.75}
.addon-note strong{color:var(--fg); font-weight:400}

/* ---------- tier comparison ---------- */
.tiers{margin:30px 0 34px; overflow-x:auto; max-width:100%}
.package,.package>div,.package .body{min-width:0}
.tiers table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:400px}
.tiers thead th{font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:400; text-align:right; padding:0 0 12px 14px}
.tiers tbody th{font-weight:400; text-align:left; color:var(--muted);
  padding:11px 14px 11px 0; border-top:1px solid var(--line); font-size:12.5px}
.tiers tbody td{text-align:right; padding:11px 0 11px 14px;
  border-top:1px solid var(--line); color:var(--fg)}
.tiers tbody tr:last-child th,.tiers tbody tr:last-child td{
  border-top:1px solid var(--fg); padding-top:13px}
.tiers tbody tr:last-child td{letter-spacing:.02em}

@media (max-width:640px){
  .tiers table{min-width:0; font-size:12px}
  .tiers thead th{padding-left:8px; font-size:9px; letter-spacing:.1em}
  .tiers tbody th{padding-right:0; font-size:11.5px; line-height:1.4}
  .tiers tbody td{padding-left:8px}
}

.fnav{flex-wrap:wrap; justify-content:center; row-gap:10px}

.hero h1,.page-hero h1{text-wrap:balance}

/* ---------- what happens next ---------- */
.steps{margin-top:44px; padding-top:30px; border-top:1px solid var(--line)}
.steps ol{list-style:none; counter-reset:step; margin-top:22px}
.steps li{counter-increment:step; position:relative; padding-left:44px;
  margin-bottom:24px; font-size:15.5px; line-height:1.75; color:var(--muted)}
.steps li::before{content:counter(step,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-size:11px; letter-spacing:.18em; color:var(--clay)}
.steps li strong{color:var(--fg); font-weight:400}

/* ---------- FAQ ---------- */
.faq-list{margin-top:30px; border-top:1px solid var(--line)}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q summary{list-style:none; cursor:pointer; padding:22px 0; display:flex;
  justify-content:space-between; align-items:flex-start; gap:24px;
  font-size:17px; font-weight:300; letter-spacing:-.015em; color:var(--fg)}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+"; color:var(--muted); font-size:17px; flex:none}
.faq-q[open] summary::after{content:"\2013"}
.faq-a{padding:0 0 24px; max-width:660px}
.faq-a p{color:var(--muted); font-size:15.5px; line-height:1.85}

.field select{width:100%; border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:11px 0; font-family:var(--sans); font-size:16.5px;
  font-weight:300; color:var(--fg); border-radius:0; appearance:none;
  -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 10px) 20px, calc(100% - 5px) 20px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.field select:focus{outline:none; border-color:var(--sage)}

/* ---------- full-bleed editorial band ---------- */
section.bleed{padding:0; overflow:hidden; max-width:100%}
section.bleed .ph{width:100%; max-width:100%; margin:0}
@media(max-width:900px){
  section.bleed .ph{aspect-ratio:4/3 !important}
}

/* ---------- a little more air between sections ---------- */
@media(min-width:901px){
  section{padding:132px 0}
  section.snug{padding:88px 0}
}

/* Services: the three-line "which one is mine" key */
.keyrow{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:8px auto 54px;
  max-width:980px; padding-top:26px; border-top:1px solid var(--line)}
.keyrow div{font-size:14.5px; color:var(--muted); line-height:1.5}
.keyrow strong{display:block; color:var(--fg); font-weight:400; margin-bottom:4px}
@media (max-width:760px){.keyrow{grid-template-columns:1fr; gap:18px}}

/* Testimonial beside a photo */
section.quote{text-align:left}
section.quote .split{gap:64px}
.quote blockquote{margin:0; font-size:clamp(22px,2.4vw,30px)}
.quote-link{display:inline-block; margin-top:26px; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage); border-bottom:1px solid currentColor}
@media (max-width:760px){section.quote .split{gap:34px}}

/* About: founder block */
.founder{display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center}
.founder .name{font-size:clamp(44px,6vw,76px); font-weight:200; letter-spacing:-.04em;
  line-height:1; margin:14px 0 10px}
.founder .role{font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin-bottom:30px}
.founder p{font-size:18px; color:var(--fg); line-height:1.65; max-width:520px}
.about-panel{background:var(--ink-panel); color:#fff}
.about-panel .eyebrow{color:rgba(255,255,255,.55)}
.about-panel p{font-family:var(--serif); font-style:italic; font-size:clamp(24px,3vw,34px);
  line-height:1.35; max-width:820px; margin:18px auto 0; text-align:center}
.welcome p{font-size:19px; line-height:1.65; max-width:620px; margin-top:18px}
.welcome p + p{margin-top:16px}
.particular li{padding:22px 0; border-top:1px solid var(--line); font-size:17px;
  color:var(--muted); line-height:1.6}
.particular li strong{color:var(--fg); font-weight:400}
.particular{list-style:none; margin-top:34px; padding:0}
@media (max-width:760px){.founder{grid-template-columns:1fr; gap:36px}}

/* Blog: short posts */
.article-body p.reach{margin-top:40px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic; font-size:22px; color:var(--fg)}
.article-body p.reach a{color:var(--sage); border-bottom:1px solid currentColor}

/* Services hero: small serif line between the h1 and the intro */
.howline{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--fg);
  margin-top:22px}
.page-hero.slim{padding:150px 0 44px; border-bottom:none}
.page-hero.slim h1{font-size:clamp(34px,4.4vw,52px)}

/* Home: statement card overlapping the full-bleed photo */
section.overlap{padding:0; overflow:visible; position:relative}
section.overlap .card{position:relative; z-index:2; background:var(--bg);
  padding:96px 64px 56px; margin-bottom:-88px; max-width:760px}
section.overlap .card .lede{margin-top:18px}
section.overlap .bleed{padding:0; overflow:hidden}
section.overlap .bleed .ph{width:100%; max-width:100%; margin:0}
@media (max-width:760px){
  section.overlap .card{padding:64px 28px 36px; margin:0 16px -48px; width:auto}
  section.overlap .bleed .ph{aspect-ratio:4/3 !important}
}

/* Services sub-links in the nav */
.has-sub{position:relative}
.has-sub .sub{position:absolute; top:100%; left:-32px; padding-top:22px; display:none}
.has-sub:hover .sub{display:block}
.has-sub .sub a{display:block; white-space:nowrap; background:var(--bg); color:var(--fg);
  opacity:1; padding:16px 36px 16px 32px; font-size:11px; letter-spacing:.24em;
  border:none; border-left:1px solid var(--line); line-height:1}
.has-sub .sub a:first-child{padding-top:26px}
.has-sub .sub a:last-child{padding-bottom:26px}
.has-sub .sub a:hover{color:var(--sage); border-left-color:var(--sage); border-bottom:none}
.mobile-nav a.sub-link{font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  padding:7px 24px; color:var(--muted); text-align:center; max-width:340px; line-height:1.7}
.mobile-nav a.sub-link:last-of-type{margin-bottom:14px}

/* Services page: jump row under the heading */
.jump{display:flex; flex-wrap:wrap; gap:18px 48px; margin-top:38px; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase}
.jump a{color:var(--muted); padding-bottom:6px; border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}
.jump a:hover{color:var(--fg); border-color:var(--fg)}
section[id]{scroll-margin-top:24px}

/* Inquiry form */
form.inquiry{max-width:1040px}
form.inquiry .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 48px}
form.inquiry .field.wide{grid-column:1/-1}
form.inquiry fieldset{border:none; padding:0; margin:0 0 38px}
form.inquiry legend{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px; padding:0}
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 40px}
.checks label{display:flex; gap:12px; align-items:baseline; font-size:15.5px; color:var(--fg);
  cursor:pointer; line-height:1.5}
.checks label span{display:block; font-size:13px; color:var(--muted)}
.checks input{appearance:none; width:14px; height:14px; border:1px solid var(--fg);
  flex:none; position:relative; top:2px; cursor:pointer}
.checks input:checked{background:var(--fg)}
.check-error{font-size:13px; color:#8C4A3C; margin-top:10px}
.field textarea::placeholder,.field input::placeholder{color:#B5B1A8}
.keyrow.two{grid-template-columns:repeat(2,1fr); max-width:760px}
@media (max-width:900px){form.inquiry .grid{grid-template-columns:repeat(2,1fr); gap:0 32px}}
@media (max-width:640px){form.inquiry .grid{grid-template-columns:1fr} .checks{grid-template-columns:1fr}}
.checks label{text-transform:none; letter-spacing:0; font-size:16px; color:var(--fg);
  display:grid; grid-template-columns:14px 1fr; gap:0 12px; margin:0}
.checks label span{grid-column:2; font-size:13px; color:var(--muted); letter-spacing:0;
  text-transform:none; margin-top:2px}