/* ============================================================
   AFINA ALTERATIONS
   Design tokens — swap these six values to match the real brand
   ============================================================ */
:root{
  --ink:      #3A2A31;   /* deep plum — darkest tone of the logo gradient */
  --slate:    #574551;   /* secondary text */
  --calico:   #F1ECE9;   /* page ground — warm stone */
  --linen:    #FBF8F7;   /* raised surfaces */
  --ochre:    #7A5461;   /* accent — actions, ticks (kept var name) */
  --thread:   #DDD1CE;   /* hairlines */
  --blush:    #D9B5B0;   /* logo gradient, light stop */
  --mauve:    #8C6B77;   /* logo gradient, dark stop */

  --display: "Fraunces", Georgia, serif;
  --body:    "Karla", system-ui, -apple-system, sans-serif;
  --mono:    "DM Mono", ui-monospace, monospace;

  --rail: 64px;
  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--calico); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:17.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ochre); outline-offset:3px; border-radius:2px}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:500; margin:0; line-height:1.14; letter-spacing:-0.004em;
  font-variation-settings:"SOFT" 20,"WONK" 0;
}
h1{font-size:clamp(2.35rem,5.6vw,4.3rem); line-height:1.1}
h2{font-size:clamp(1.75rem,3.3vw,2.6rem)}
h3{font-size:clamp(1.22rem,1.8vw,1.5rem); line-height:1.25}
h4{font-size:1.06rem; font-family:var(--body); font-weight:700; letter-spacing:0; font-variation-settings:normal}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.05rem,1.4vw,1.19rem); line-height:1.65; color:var(--slate); max-width:58ch}
.eyebrow{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ochre);
  margin:0 0 1.4rem; display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--thread); max-width:120px}
.prose{max-width:66ch}
.prose p{color:var(--slate)}
.prose strong{color:var(--ink); font-weight:600}

/* ---------- signature: the seam rule ---------- */
/* A tailor's tape running the left edge. Ticks every 8px, long tick every 40px.
   Doubles as a section marker. Collapses under 1080px. */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:60;
  display:none; pointer-events:none;
}
.rail::before{
  content:""; position:absolute; top:0; bottom:0; right:0; width:1px;
  background:var(--thread);
}
.rail::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:9px;
  background:repeating-linear-gradient(to bottom,
    var(--thread) 0 1px, transparent 1px 8px);
  opacity:.85;
}
.rail-mark{
  position:absolute; right:18px; top:50%;
  writing-mode:vertical-rl; transform:translateY(-50%);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);
  transition:opacity .3s ease;
}
@media(min-width:1080px){
  .rail{display:block}
  body{padding-left:var(--rail)}
}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--calico) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--thread);
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  height:72px; display:flex; align-items:center; gap:2rem;
}
/* Wordmark — logo disc + Cinzel lockup echoing the logo's own lettering */
.mark{display:flex; align-items:center; gap:.72rem; text-decoration:none; line-height:1; flex-shrink:0}
.mark img{width:42px; height:42px; flex-shrink:0}
.mark .wm{display:flex; flex-direction:column}
.mark b{font-family:"Cinzel",serif; font-weight:500; font-size:1.02rem; letter-spacing:.13em; text-transform:uppercase}
.mark span{font-family:"Cinzel",serif; font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mauve); margin-top:.3rem}
@media(max-width:400px){.mark b{font-size:.9rem} .mark img{width:36px;height:36px}}

.nav{display:flex; gap:1.6rem; margin-left:auto; align-items:center}
.nav a{
  font-size:.94rem; text-decoration:none; color:var(--slate);
  padding:.35rem 0; position:relative; white-space:nowrap; transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--ochre); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a.btn,.nav a.btn[aria-current="page"]{color:var(--linen)}
.nav a.btn:hover{color:#fff}
.nav a.btn::after{display:none}

.burger{
  margin-left:auto; display:none; background:none; border:1px solid var(--thread);
  border-radius:2px; width:42px; height:38px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.burger i{display:block; width:17px; height:1px; background:var(--ink)}

@media(max-width:900px){
  .nav{
    display:none; position:absolute; top:72px; left:0; right:0;
    background:var(--calico); border-bottom:1px solid var(--thread);
    flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--gut) 1.4rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.72rem 0; border-bottom:1px solid var(--thread); font-size:.98rem}
  .nav .btn{margin-top:1rem; border-bottom:none; text-align:center}
  .burger{display:flex}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-size:.925rem; font-weight:600; letter-spacing:.01em;
  padding:.85rem 1.55rem; border-radius:2px; text-decoration:none; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--linen);
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{background:var(--ochre); border-color:var(--ochre); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--linen); border-color:var(--ink)}
.btn-sm{padding:.62rem 1.1rem; font-size:.86rem}
.btns{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.page{display:block; animation:fade .4s ease both}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
section.band{padding:clamp(58px,8vw,104px) 0; border-top:1px solid var(--thread)}
section.band:first-child{border-top:none}
.band-tint{background:var(--linen)}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,116px) 0 clamp(48px,7vw,88px); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:-42%; right:-24%; width:86vw; height:86vw; max-width:1000px; max-height:1000px; border-radius:50%; background:radial-gradient(circle, rgba(217,181,176,.40) 0%, rgba(217,181,176,.20) 38%, rgba(140,107,119,.07) 60%, transparent 76%); pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:end}
.hero .hero-grid{align-items:stretch}
.hero .hero-grid > div:first-child{display:flex; flex-direction:column; justify-content:flex-end}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:italic; color:var(--ochre)}
.hero .lede{margin-top:1.7rem}

/* ---------- image slots (awaiting real photography) ---------- */
.plate{
  position:relative; background:var(--linen); border:1px solid var(--thread);
  border-radius:2px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.6rem; min-height:220px; overflow:hidden;
}
.plate::before{
  content:""; position:absolute; inset:9px; border:1px dashed var(--thread); border-radius:1px;
}
.plate span{
  position:relative; font-family:var(--mono); font-size:.68rem; line-height:1.75;
  letter-spacing:.11em; text-transform:uppercase; color:var(--slate); max-width:24ch;
}
.plate-tall{min-height:min(68vh,560px)}

/* real photography */
.shot{position:relative; border:1px solid var(--thread); border-radius:2px; padding:9px; background:var(--linen)}
.shot img{width:100%; height:auto; border-radius:1px; display:block}
.shot-tall img{aspect-ratio:5/6; height:100%; object-fit:cover}
.shot-45 img{aspect-ratio:4/5; object-fit:cover}
.shot-32 img{aspect-ratio:3/2; object-fit:cover}
.shot figcaption{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slate); padding:.9rem .2rem .2rem; text-align:center;
}
.plate-wide{min-height:300px}

/* ---------- cards ---------- */
.grid{display:grid; gap:1px; background:var(--thread); border:1px solid var(--thread); border-radius:2px; overflow:hidden}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-7 .cell:nth-child(7){grid-column:span 2}
@media(max-width:880px){.grid-7 .cell:nth-child(7){grid-column:span 1}}
@media(max-width:880px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.cell{background:var(--linen); padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column}
a.cell{text-decoration:none; color:inherit; transition:background .18s}
a.cell:hover{background:#fff}
a.cell:hover h4{color:var(--ochre)}
a.cell .from::after{content:" \2192"; opacity:0; transition:opacity .18s}
a.cell:hover .from::after{opacity:1}
.cell h4{margin-bottom:.5rem}
.cell p{font-size:.955rem; color:var(--slate); margin-bottom:1rem}
.cell .from{
  margin-top:auto; font-family:var(--mono); font-size:.88rem; font-weight:500; letter-spacing:.02em; color:var(--ochre);
}

/* ---------- price tables ---------- */
.pricegroup{margin-bottom:3.1rem}
.pricegroup h3{
  padding-bottom:.7rem; border-bottom:1px solid var(--ink); margin-bottom:.2rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.pricegroup h3 small{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); font-weight:500;
}
.prow{
  display:flex; align-items:baseline; gap:1rem;
  padding:.92rem 0; border-bottom:1px solid var(--thread);
}
.prow dt{flex:1; font-size:1.01rem}
.prow dd{
  margin:0; font-family:var(--mono); font-size:1rem; font-weight:500;
  white-space:nowrap; color:var(--ink);
}
.prow dd.quote{font-size:.82rem; color:var(--slate); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap}
dl{margin:0}

/* ---------- services layout ---------- */
.price-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,5vw,72px); align-items:start}
@media(max-width:960px){.price-layout{grid-template-columns:1fr}}
.price-aside{position:sticky; top:104px}
@media(max-width:960px){.price-aside{position:static}}
.aside-card{background:var(--linen); border:1px solid var(--thread); border-radius:2px; padding:1.7rem}
.aside-card p{font-size:.9rem; color:var(--slate)}
.aside-card hr{border:none; border-top:1px solid var(--thread); margin:1.4rem 0}
.aside-card .aside-q{color:var(--ink); margin-bottom:.4rem}
.booking-card{background:var(--linen); border:1px solid var(--thread); border-radius:2px; padding:clamp(24px,3.4vw,38px)}
.booking-card hr{border:none; border-top:1px solid var(--thread); margin:2.1rem 0 1.6rem}
.booking-card .deets li:first-child{border-top:none}
.booking-card .deets li:last-child{border-bottom:none}

.minima{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--thread);
  border:1px solid var(--thread); border-radius:2px; margin-top:2.4rem; overflow:hidden}
@media(max-width:760px){.minima{grid-template-columns:1fr}}
.minima > div{background:var(--linen); padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.3rem}
.minima .k{font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--slate)}
.minima .v{font-family:var(--display); font-size:1.75rem; line-height:1; color:var(--ink)}
.minima .n{font-size:.89rem; color:var(--slate); line-height:1.5}

/* ---------- notes / callouts ---------- */
.note{
  border-left:2px solid var(--ochre); background:var(--linen);
  padding:1.35rem 1.6rem; border-radius:0 2px 2px 0;
}
.note h4{margin-bottom:.6rem}
.note p:last-child,.note ul:last-child{margin-bottom:0}
.ticklist{list-style:none; padding:0; margin:0 0 1em}
.ticklist li{position:relative; padding-left:1.55rem; margin-bottom:.68rem; color:var(--slate); font-size:.99rem}
.ticklist li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--ochre);
}
.ticklist li:last-child{margin-bottom:0}

/* ---------- steps (bridal process — genuinely sequential) ---------- */
.steps{counter-reset:s; display:grid; gap:0; margin-top:2.4rem}
.step{
  counter-increment:s; display:grid; grid-template-columns:76px 1fr; gap:1.4rem;
  padding:1.7rem 0; border-top:1px solid var(--thread);
}
.step:last-child{border-bottom:1px solid var(--thread)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:.85rem; color:var(--ochre); letter-spacing:.08em; padding-top:.2rem;
}
.step h4{margin-bottom:.35rem}
.step p{color:var(--slate); font-size:.955rem; margin:0; max-width:58ch}

/* ---------- reviews ---------- */
.quote-card{
  background:var(--linen); border:1px solid var(--thread); border-radius:2px;
  padding:clamp(22px,3vw,34px); display:flex; flex-direction:column;
}
.quote-card blockquote{
  margin:0 0 1.3rem; font-family:var(--body); font-size:1.03rem; line-height:1.62; color:var(--ink);
}
.quote-card cite{
  margin-top:auto; font-style:normal; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
}
.stars{color:var(--ochre); letter-spacing:.22em; font-size:.82rem; margin-bottom:1rem}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:start}
.rev-grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.rev-grid-2{grid-template-columns:1fr}}
@media(max-width:880px){.rev-grid{grid-template-columns:1fr}}

/* ---------- accordion (client terms) ---------- */
details.acc{border-bottom:1px solid var(--thread)}
details.acc summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.4rem 1.15rem 0; position:relative;
  font-weight:600; font-size:1rem; display:flex; gap:1rem; align-items:baseline;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary b{font-family:var(--mono); font-weight:400; font-size:.78rem; color:var(--ochre); flex-shrink:0}
details.acc summary::after{
  content:""; position:absolute; right:4px; top:1.55rem;
  width:9px; height:9px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:rotate(45deg); transition:transform .25s ease;
}
details.acc[open] summary::after{transform:rotate(-135deg)}
details.acc .acc-body{padding:0 0 1.5rem; max-width:74ch}
details.acc .acc-body p{font-size:.94rem; color:var(--slate)}
details.acc .acc-body p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.deets{list-style:none; padding:0; margin:0}
.deets li{padding:1rem 0; border-bottom:1px solid var(--thread); display:grid; grid-template-columns:132px 1fr; gap:1.1rem; align-items:baseline}
@media(max-width:480px){.deets li{grid-template-columns:1fr; gap:.35rem}}
.deets li:first-child{border-top:1px solid var(--thread)}
.deets dt,.deets .k{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
}
.deets .v{font-size:.985rem; line-height:1.5}

.mapwrap{border:1px solid var(--thread); border-radius:2px; padding:9px; background:var(--linen)}
.mapwrap iframe{display:block; width:100%; height:clamp(360px,58vh,560px); border:0; border-radius:1px}

/* ---------- to-be-supplied chip ---------- */
.tbc{
  display:inline-block; font-family:var(--mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ochre); border:1px solid var(--ochre);
  border-radius:2px; padding:.18rem .48rem; vertical-align:middle;
}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(115deg, var(--mauve) 0%, var(--ink) 62%); color:var(--calico); text-align:center; padding:clamp(58px,8vw,96px) 0}
.cta-band h2{color:var(--linen)}
.cta-band p{color:#E3D3D4; max-width:52ch; margin:1.1rem auto 0}
.cta-band .btns{justify-content:center}
.cta-band .btn{background:var(--linen); border-color:var(--linen); color:var(--ink)}
.cta-band .btn:hover{background:var(--blush); border-color:var(--blush); color:var(--ink)}
.cta-band .btn-ghost{background:transparent; color:var(--calico); border-color:rgba(255,255,255,.42)}
.cta-band .btn-ghost:hover{background:var(--calico); color:var(--ink); border-color:var(--calico)}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#CFC0C6; padding:clamp(48px,6vw,72px) 0 2rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer h5{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blush); margin:0 0 1.1rem; font-weight:400;
}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:.62rem}
footer a{text-decoration:none; font-size:.95rem; transition:color .2s}
footer a:hover{color:var(--linen)}
.foot-mark img{width:66px; height:66px; margin-bottom:1.1rem}
.foot-mark b{font-family:"Cinzel",serif; font-size:1.02rem; letter-spacing:.13em; text-transform:uppercase; color:var(--linen); display:block; font-weight:500}
.foot-mark span{font-family:"Cinzel",serif; font-size:.66rem; letter-spacing:.235em; text-transform:uppercase; color:var(--blush)}
.foot-mark p{font-size:.88rem; margin-top:1.1rem; max-width:30ch}
.foot-base{
  border-top:1px solid rgba(255,255,255,.13); margin-top:3rem; padding-top:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; color:#B5A3AB;
}
.foot-base a{font-family:var(--mono); font-size:.76rem}

@media(max-width:560px){
  body{font-size:16.5px}
  .btns{gap:.7rem}
  .btns .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* multi-page additions */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--linen);
  padding:.7rem 1.1rem; z-index:200; border-radius:0 0 2px 0; text-decoration:none}
.skip:focus{left:0}
img{height:auto}
html{scroll-behavior:smooth}
[id^="pg-"]{scroll-margin-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}