@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Epilogue:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap');

/* =========================================================
   FLIPPING FABULOUS LLC
   Editorial property-transformation system
   Display: Newsreader | Text: Epilogue | Data: DM Mono
   ========================================================= */

:root{
  /* palette */
  --ink:        #1E1E1B;
  --tuatara:    #262622;
  --ink-soft:   #32322C;
  --plaster:    #F3EEE8;
  --plaster-2:  #E9E2DA;
  --wine:       #8C3037;
  --red:        #A61C35;
  --slate:      #5C7073;
  --edward:     #D9A3AC;
  --blossom:    #D9ADBD;
  --charm:      #D97791;

  /* roles */
  --bg:         var(--ink);
  --fg:         #F2ECE6;
  --fg-2:       #CFC5BC;
  --fg-3:       #9C948C;
  --line:       rgba(242,236,230,.16);
  --line-soft:  rgba(242,236,230,.09);
  --accent:     var(--charm);

  /* type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --text:    "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* metrics */
  --wrap: 1300px;
  --gut: clamp(20px, 4.4vw, 56px);
  --sec: clamp(60px, 7.2vw, 104px);
  --rail: 58px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--text); font-size:17px; line-height:1.65;
  font-weight:400; letter-spacing:0;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--charm); color:#241417}

/* ---------- light surface ---------- */
.light{
  background:var(--plaster); color:var(--tuatara);
  --fg:#262622; --fg-2:#4C4C45; --fg-3:#6E6A62;
  --line:rgba(38,38,34,.18); --line-soft:rgba(38,38,34,.10);
}
.wine{
  background:var(--wine); color:#FBF4F2;
  --fg:#FBF4F2; --fg-2:#EFD9DC; --fg-3:#DCBFC4;
  --line:rgba(251,244,242,.24); --line-soft:rgba(251,244,242,.14);
}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec); position:relative}
.sec--tight{padding-block:calc(var(--sec) * .62)}
.grid{display:grid; gap:clamp(22px,3vw,40px)}
.hr{height:1px; background:var(--line); border:0; margin:0}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--fg-3); display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--charm); flex:none;
}
.eyebrow--plain::before{display:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.018em; line-height:1.08}
.d1{font-size:clamp(42px,7.2vw,96px); line-height:1; letter-spacing:-.025em}
.d2{font-size:clamp(34px,4.6vw,62px); line-height:1.02; letter-spacing:-.018em}
.d3{font-size:clamp(25px,2.5vw,36px); line-height:1.1}
.d4{font-size:clamp(20px,1.6vw,24px); line-height:1.18}
.ital{font-style:italic}
.lead{font-size:clamp(17.5px,1.35vw,21px); line-height:1.55; color:var(--fg-2); max-width:62ch}
.body{color:var(--fg-2)}
.small{font-size:14.5px; line-height:1.55; color:var(--fg-2)}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3)}
.num{font-family:var(--display); font-size:clamp(30px,3.4vw,50px); line-height:1; color:var(--charm); font-weight:400}
.ink-accent{color:var(--charm)}
.light .ink-accent{color:var(--wine)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  --bw:1px;
  display:inline-flex; align-items:center; gap:.72em; cursor:pointer;
  padding:15px 26px; border:var(--bw) solid var(--line); background:transparent;
  color:var(--fg); font-size:13px; font-weight:560; letter-spacing:.11em;
  text-transform:uppercase; font-family:var(--text);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  position:relative; text-align:left;
}
.btn:hover{transform:translateY(-2px)}
.btn__ar{transition:transform .35s var(--ease)}
.btn:hover .btn__ar{transform:translateX(5px)}
.btn--fill{background:var(--charm); border-color:var(--charm); color:#241417}
.btn--fill:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn--wine{background:var(--wine); border-color:var(--wine); color:#FBF4F2}
.btn--wine:hover{background:var(--red); border-color:var(--red)}
.btn--line:hover{border-color:var(--charm); color:var(--charm)}
.light .btn--line:hover{border-color:var(--wine); color:var(--wine)}
.btn[disabled]{opacity:.42; pointer-events:none}
.btn--sm{padding:11px 18px; font-size:11.5px}

.tlink{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
  border-bottom:1px solid var(--line); padding-bottom:6px; transition:.3s var(--ease);
}
.tlink:hover{color:var(--charm); border-color:var(--charm); gap:1em}
.light .tlink:hover{color:var(--wine); border-color:var(--wine)}

/* ---------- top notice ---------- */
.notice{
  background:var(--wine); color:#FBF4F2; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:9px 16px;
}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:70; background:rgba(30,30,27,.86);
  backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:74px; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.brand{display:flex; align-items:baseline; gap:10px; flex:none}
.brand__mark{
  font-family:var(--display); font-size:23px; letter-spacing:-.02em; color:#F2ECE6;
  font-weight:500; line-height:1;
}
.brand__mark i{font-style:italic; color:var(--charm)}
.brand__sub{font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-3)}
.nav{display:flex; align-items:center; gap:clamp(14px,1.9vw,30px)}
.nav a{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:#CFC5BC; padding:6px 0; position:relative; transition:color .3s var(--ease);
}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--charm); transition:width .35s var(--ease)}
.nav a:hover{color:#F2ECE6}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:#F2ECE6}
.hdr__cta{display:flex; align-items:center; gap:14px}
.hdr__tel{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:#CFC5BC}
.hdr__tel:hover{color:var(--charm)}
.burger{display:none; width:42px; height:42px; border:1px solid var(--line);
  background:none; cursor:pointer; align-items:center; justify-content:center; flex:none}
.burger span{display:block; width:17px; height:1px; background:#F2ECE6; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px;
  height:1px; background:#F2ECE6; transition:.3s var(--ease)}
.burger span::before{top:-5px} .burger span::after{top:5px}
.drawer{
  position:fixed; inset:0; z-index:90; background:var(--ink); padding:22px var(--gut) 40px;
  display:flex; flex-direction:column; transform:translateY(-100%);
  transition:transform .5s var(--ease); overflow-y:auto;
}
.drawer[data-open="true"]{transform:translateY(0)}
.drawer__top{display:flex; justify-content:space-between; align-items:center; height:52px}
.drawer__close{background:none; border:1px solid var(--line); width:42px; height:42px; cursor:pointer;
  font-size:19px; line-height:1}
.drawer nav{display:flex; flex-direction:column; margin-top:26px; border-top:1px solid var(--line-soft)}
.drawer nav a{font-family:var(--display); font-size:clamp(28px,8vw,40px); padding:16px 0;
  border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:baseline}
.drawer nav a b{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--fg-3); letter-spacing:.14em}

/* ---------- vertical rail ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:60;
  border-right:1px solid var(--line-soft); display:flex; align-items:center;
  justify-content:center; pointer-events:none; mix-blend-mode:normal;
}
.rail span{
  writing-mode:vertical-rl; font-family:var(--mono); font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--fg-3); opacity:.75;
}
@media(max-width:1180px){.rail{display:none}}
@media(min-width:1181px){ body[data-rail] .hdr__in,body[data-rail] .wrap{padding-left:calc(var(--gut) + var(--rail))} }

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(560px,86vh,880px); display:flex; align-items:flex-end;
  overflow:hidden; border-bottom:1px solid var(--line-soft)}
.hero .hero__bg{position:absolute; inset:0; z-index:0}
.hero .hero__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,30,27,.72) 0%, rgba(30,30,27,.30) 34%, rgba(30,30,27,.55) 62%, rgba(30,30,27,.94) 100%)}
.hero__in{position:relative; z-index:2; width:100%; padding-block:clamp(40px,7vh,74px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,60px); align-items:end}
.hero h1{margin:18px 0 0}
.hero__side{border-left:1px solid var(--line); padding-left:clamp(18px,2vw,28px)}
.hero__meta{display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line-soft)}
.hero__meta div{min-width:120px}
.hero__meta b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); font-weight:400; margin-bottom:5px}
.hero__meta span{font-size:14.5px; color:var(--fg-2)}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}
  .hero__side{border-left:0; border-top:1px solid var(--line); padding:22px 0 0}}

/* ---------- designed photo frames ---------- */
.frame{
  position:relative; overflow:hidden; background:var(--ink-soft);
  isolation:isolate;
}
.frame img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.frame--r43{aspect-ratio:4/3} .frame--r11{aspect-ratio:1/1}
.frame--r32{aspect-ratio:3/2} .frame--r45{aspect-ratio:4/5}
.plate{position:absolute; inset:0; z-index:0}
.plate__grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(242,236,230,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,236,230,.07) 1px, transparent 1px);
  background-size:46px 46px}
.plate__wash{position:absolute; inset:0}
.plate--a .plate__wash{background:
  radial-gradient(120% 90% at 18% 8%, rgba(140,48,55,.85) 0%, transparent 58%),
  radial-gradient(110% 100% at 92% 92%, rgba(92,112,115,.7) 0%, transparent 60%),
  linear-gradient(160deg,#33332C 0%, #23231F 100%)}
.plate--b .plate__wash{background:
  radial-gradient(120% 90% at 82% 10%, rgba(217,119,145,.75) 0%, transparent 56%),
  radial-gradient(110% 100% at 8% 96%, rgba(140,48,55,.75) 0%, transparent 62%),
  linear-gradient(200deg,#3A3229 0%, #211F1C 100%)}
.plate--c .plate__wash{background:
  radial-gradient(100% 80% at 50% 0%, rgba(217,173,189,.55) 0%, transparent 60%),
  linear-gradient(180deg,#2E2E28 0%, #1D1D1A 100%)}
.plate__house{position:absolute; inset:0; display:grid; place-items:center; opacity:.5}
.plate__house svg{width:min(58%,320px); height:auto; stroke:rgba(242,236,230,.55); fill:none;
  stroke-width:1.1; vector-effect:non-scaling-stroke}
.frame img{filter:saturate(.94) contrast(1.03)}
.frame[data-photo]:not(.hero__bg)::after{content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none; background:linear-gradient(178deg, rgba(140,48,55,.12) 0%, rgba(30,30,27,.10) 46%, rgba(30,30,27,.42) 100%)}
.file__thumb{width:100%; max-width:132px; aspect-ratio:3/2; flex:none}
.plate__tag{position:absolute; left:14px; bottom:12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(242,236,230,.6); z-index:2}

/* ---------- before / after slider ---------- */
.ba{position:relative; overflow:hidden; user-select:none; touch-action:pan-y; cursor:ew-resize;
  background:var(--ink-soft)}
.ba .frame img{object-position:center}
.ba .ba__pane{position:absolute; inset:0}
.ba .ba__pane--after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__handle{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px;
  background:rgba(242,236,230,.92); z-index:5; transform:translateX(-1px)}
.ba__knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:var(--plaster); color:var(--tuatara);
  display:grid; place-items:center; font-family:var(--mono); font-size:14px; letter-spacing:0;
  box-shadow:0 6px 26px rgba(0,0,0,.45)}
.ba__lbl{position:absolute; bottom:14px; z-index:4; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; padding:6px 11px;
  background:rgba(30,30,27,.72); color:#F2ECE6; border:1px solid rgba(242,236,230,.2)}
.ba__lbl--l{left:14px} .ba__lbl--r{right:14px}

/* ---------- dossier index rows ---------- */
.files{border-top:1px solid var(--line)}
.file--img{grid-template-columns:82px 132px minmax(0,1fr) minmax(0,1fr) 130px}
@media(max-width:860px){
  .file--img{grid-template-columns:56px minmax(0,1fr); row-gap:12px}
  .file--img > *:nth-child(n+2){grid-column:2}
  .file--img .file__thumb{max-width:100%}
}
.file{
  display:grid; grid-template-columns:82px minmax(0,1.15fr) minmax(0,1fr) 150px;
  gap:clamp(14px,2.4vw,34px); align-items:center; padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line); position:relative; transition:.4s var(--ease);
}
.file::before{content:""; position:absolute; inset:0 -20px; background:rgba(242,236,230,.035);
  opacity:0; transition:opacity .4s var(--ease); z-index:-1}
.file:hover::before{opacity:1}
.light .file::before{background:rgba(38,38,34,.04)}
.file:hover{padding-left:10px}
.file__no{font-family:var(--display); font-size:clamp(28px,3vw,44px); line-height:1; color:var(--fg-3)}
.file:hover .file__no{color:var(--charm)}
.light .file:hover .file__no{color:var(--wine)}
.file__ttl{font-family:var(--display); font-size:clamp(21px,2.1vw,30px); line-height:1.08}
.file__meta{display:flex; flex-wrap:wrap; gap:8px}
.file__go{justify-self:end; text-align:right}
@media(max-width:860px){
  .file{grid-template-columns:56px minmax(0,1fr); row-gap:10px}
  .file__meta{grid-column:2} .file__go{grid-column:2; justify-self:start; text-align:left}
}

/* ---------- partner rows (partners.html) ---------- */
.file__thumb--round{border-radius:50%; max-width:112px; aspect-ratio:1/1}
/* the shared .file grid is declared after .file--img and wins on
   specificity, so the roster states its own columns */
#roster > .file.file--img{grid-template-columns:82px 112px minmax(0,1.1fr) minmax(0,1fr) 120px}
@media(max-width:860px){
  #roster > .file.file--img{grid-template-columns:56px minmax(0,1fr)}
  .file--img .file__thumb--round{max-width:88px}
}
.file__initials{display:grid; place-items:center; border:1px solid var(--line);
  background:rgba(242,236,230,.03); font-family:var(--display); font-style:italic;
  font-size:clamp(26px,2.6vw,36px); color:var(--charm)}
.file__lic{margin:12px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--fg-2)}
.file__lic span{white-space:nowrap}
.file__lic i{font-style:normal; color:var(--fg-3); margin:0 .25em}
.file__brk{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; line-height:1.4; color:var(--fg-3)}
.file__brk img{width:56px; height:auto; flex:none; opacity:.92}
.pcontact{list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft);
  display:grid; gap:5px; font-size:14px; line-height:1.5}
.pcontact li{display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px}
.pcontact span{font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-3); padding-top:3px}
.pcontact div{color:var(--fg-2); overflow-wrap:anywhere}
.pcontact a{color:var(--fg); border-bottom:1px solid var(--line); transition:color .3s var(--ease), border-color .3s var(--ease)}
.pcontact a:hover{color:var(--charm); border-color:var(--charm)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- chips / tags ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; padding:6px 11px;
  border:1px solid var(--line); color:var(--fg-2);
}
.chip--accent{border-color:var(--charm); color:var(--charm)}
.light .chip--accent{border-color:var(--wine); color:var(--wine)}
.chip--sample{border-color:var(--slate); color:var(--slate)}
.chip--live{border-color:var(--charm); color:var(--charm)}
.chip--live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--charm)}

/* ---------- cards / panels ---------- */
.panel{border:1px solid var(--line); padding:clamp(22px,2.6vw,34px); position:relative;
  background:rgba(242,236,230,.02)}
.light .panel{background:rgba(255,255,255,.5)}
.panel--flat{background:none}
.panel__no{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--fg-3); margin-bottom:16px}

.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,64px); align-items:start}
.split--r{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media(max-width:900px){.split,.split--r{grid-template-columns:1fr}}
.sticky{position:sticky; top:106px}
@media(max-width:900px){.sticky{position:static}}

/* ---------- steps ---------- */
.step{display:grid; grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr); gap:clamp(16px,2.6vw,36px);
  padding:clamp(22px,2.6vw,34px) 0; border-bottom:1px solid var(--line)}
.step:first-child{border-top:1px solid var(--line)}
.step__time{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--charm); margin-top:10px}
.light .step__time{color:var(--wine)}
.step__more{color:var(--fg-2); font-size:15.5px; margin-top:10px; max-width:66ch}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  padding:22px 0; font-family:var(--display); font-size:clamp(18px,1.7vw,24px); line-height:1.22; color:var(--fg)}
.acc__q span{flex:none; font-family:var(--mono); font-size:16px; color:var(--charm); transition:transform .35s var(--ease)}
.light .acc__q span{color:var(--wine)}
.acc__item[data-open="true"] .acc__q span{transform:rotate(45deg)}
.acc__a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.acc__a p{padding-bottom:24px; max-width:74ch; color:var(--fg-2)}

/* ---------- forms / wizard ---------- */
.field{margin-bottom:20px}
.field label,.lbl{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:9px}
.inp,select.inp,textarea.inp{
  width:100%; background:rgba(242,236,230,.04); border:1px solid var(--line); color:var(--fg);
  padding:14px 16px; font-size:16px; transition:.3s var(--ease); border-radius:0; appearance:none;
}
.light .inp{background:rgba(255,255,255,.7)}
.inp:focus{outline:none; border-color:var(--charm); background:rgba(242,236,230,.07)}
.light .inp:focus{border-color:var(--wine); background:#fff}
.inp::placeholder{color:var(--fg-3)}
textarea.inp{min-height:120px; resize:vertical; line-height:1.55}
select.inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C948C' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.row-2{grid-template-columns:1fr}}
.err{color:var(--charm); font-size:13px; margin-top:7px; display:none}
.field[data-err="true"] .inp{border-color:var(--charm)}
.field[data-err="true"] .err{display:block}
/* A form level error sits outside any .field, so it carries its own
   show rule. The hidden attribute is the only switch, which keeps
   the JS to err.hidden = false. */
.err--form:not([hidden]){display:block}

.opts{display:grid; gap:10px}
.opts--2{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.opt{position:relative; display:block; cursor:pointer}
.opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.opt__box{border:1px solid var(--line); padding:16px 18px; transition:.3s var(--ease);
  display:flex; gap:14px; align-items:flex-start; height:100%}
.opt:hover .opt__box{border-color:var(--fg-3)}
.opt input:checked + .opt__box{border-color:var(--charm); background:rgba(217,119,145,.09)}
.light .opt input:checked + .opt__box{border-color:var(--wine); background:rgba(140,48,55,.07)}
.opt input:focus-visible + .opt__box{outline:2px solid var(--charm); outline-offset:2px}
.opt__dot{width:15px; height:15px; border:1px solid var(--fg-3); border-radius:50%; flex:none; margin-top:4px;
  position:relative; transition:.3s var(--ease)}
.opt input:checked + .opt__box .opt__dot{border-color:var(--charm); background:var(--charm)}
.light .opt input:checked + .opt__box .opt__dot{border-color:var(--wine); background:var(--wine)}
.opt__dot::after{content:""; position:absolute; inset:4px; background:var(--ink); border-radius:50%; opacity:0}
.opt input:checked + .opt__box .opt__dot::after{opacity:1}
.opt b{display:block; font-weight:560; font-size:15.5px; margin-bottom:3px}
.opt small{color:var(--fg-2); font-size:13.5px; line-height:1.45; display:block}
.opt--sq .opt__dot{border-radius:0}
.opt input:checked + .opt__box .opt--sq .opt__dot::after{border-radius:0}

/* wizard shell */
.wiz{border:1px solid var(--line); background:rgba(242,236,230,.025)}
.light .wiz{background:rgba(255,255,255,.55)}
.wiz__bar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(18px,2.4vw,30px); border-bottom:1px solid var(--line); flex-wrap:wrap}
.wiz__dots{display:flex; gap:6px; flex-wrap:wrap}
.wiz__dot{width:26px; height:3px; background:var(--line); transition:.4s var(--ease)}
.wiz__dot[data-on="true"]{background:var(--charm)}
.light .wiz__dot[data-on="true"]{background:var(--wine)}
.wiz__body{padding:clamp(22px,3vw,42px)}
.wiz__step{display:none; animation:fade .45s var(--ease)}
.wiz__step[data-active="true"]{display:block}
@keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.wiz__foot{display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:18px clamp(18px,2.4vw,30px); border-top:1px solid var(--line); flex-wrap:wrap}
.wiz__q{font-family:var(--display); font-size:clamp(24px,2.6vw,36px); line-height:1.08; margin-bottom:10px}
.wiz__hint{color:var(--fg-2); font-size:15px; margin-bottom:24px; max-width:60ch}

/* uploader */
.drop{border:1px dashed var(--line); padding:32px 22px; text-align:center; cursor:pointer;
  transition:.3s var(--ease)}
.drop:hover,.drop[data-over="true"]{border-color:var(--charm); background:rgba(217,119,145,.06)}
.drop input{display:none}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:16px}
.thumb{position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb button{position:absolute; top:4px; right:4px; width:22px; height:22px; border:0;
  background:rgba(30,30,27,.8); color:#fff; cursor:pointer; font-size:13px; line-height:1}

/* summary + result */
.sum{border:1px solid var(--line); padding:20px 22px; margin-bottom:22px}
.sum dl{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0}
.sum dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); padding-top:3px}
.sum dd{margin:0; font-size:15.5px}
.result{text-align:center; padding:clamp(24px,4vw,52px) 0}
.result__ring{width:112px; height:112px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--charm); position:relative}
.result__ring b{font-family:var(--display); font-size:34px; color:var(--charm)}

/* ---------- calendar ---------- */
.cal{border:1px solid var(--line)}
.cal__head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line)}
.cal__nav{background:none; border:1px solid var(--line); width:34px; height:34px; cursor:pointer}
.cal__nav:hover{border-color:var(--charm); color:var(--charm)}
.cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line-soft); padding:1px}
.cal__dow{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); text-align:center; padding:10px 0; background:var(--bg)}
.light .cal__dow{background:var(--plaster)}
.cal__day{background:var(--bg); border:0; padding:14px 0; cursor:pointer; font-size:14.5px;
  color:var(--fg); transition:.25s var(--ease); font-family:var(--mono)}
.light .cal__day{background:var(--plaster)}
.cal__day:hover:not([disabled]){background:rgba(217,119,145,.16)}
.cal__day[disabled]{color:var(--fg-3); opacity:.35; cursor:default}
.cal__day[data-sel="true"]{background:var(--charm); color:#241417}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px; margin-top:16px}
.slot{border:1px solid var(--line); background:none; padding:12px 8px; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; transition:.25s var(--ease)}
.slot:hover{border-color:var(--charm); color:var(--charm)}
.slot[data-sel="true"]{background:var(--charm); border-color:var(--charm); color:#241417}

/* ---------- article ---------- */
.prose{max-width:70ch; font-size:17.5px}
.prose h2{font-size:clamp(23px,2.2vw,31px); margin:38px 0 14px}
.prose h3{font-size:clamp(19px,1.7vw,23px); margin:30px 0 10px}
.prose p{color:var(--fg-2); margin-bottom:1.1em}
.prose ul{color:var(--fg-2); padding-left:20px; margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:30px 0; padding-left:22px; border-left:2px solid var(--charm);
  font-family:var(--display); font-size:clamp(20px,2vw,26px); line-height:1.28; color:var(--fg)}
.light .prose blockquote{border-color:var(--wine)}

/* ---------- dashboard ---------- */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:14px}
.stat{border:1px solid var(--line); padding:18px 20px}
.stat b{display:block; font-family:var(--display); font-size:38px; line-height:1; margin-bottom:6px}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:400}
.tbl td{padding:14px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.tbl tr:hover td{background:rgba(242,236,230,.03)}
.scroll-x{overflow-x:auto}
.score{font-family:var(--mono); font-size:13px; padding:4px 9px; border:1px solid var(--line); display:inline-block}
.score[data-t="hot"]{border-color:var(--charm); color:var(--charm)}
.score[data-t="warm"]{border-color:var(--edward); color:var(--edward)}
.score[data-t="cool"]{border-color:var(--slate); color:var(--slate)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line); padding-block:clamp(46px,5vw,72px) 26px}
.ftr__grid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr));
  gap:clamp(24px,3vw,44px)}
@media(max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-3); font-weight:400; margin-bottom:16px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ftr a:hover{color:var(--charm)}
.ftr__bar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); margin-top:clamp(34px,4vw,54px); padding-top:20px}
.ftr__bar p{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; color:var(--fg-3); text-transform:uppercase}
.disclaimer{font-size:12.5px; color:var(--fg-3); max-width:78ch; line-height:1.5; margin-top:16px}

/* ---------- cta band ---------- */
.band{position:relative; overflow:hidden}
.band__in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,60px);
  align-items:end}
@media(max-width:820px){.band__in{grid-template-columns:1fr}}

/* ---------- reveal ---------- */
[data-rv]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-rv].in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- utilities ---------- */
.mt-s{margin-top:14px} .mt-m{margin-top:26px} .mt-l{margin-top:44px}
.mb-m{margin-bottom:26px} .mb-l{margin-bottom:44px}
.maxw{max-width:64ch}
.center{text-align:center; margin-inline:auto}
.flexb{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.hide{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--charm); color:#241417; padding:12px 20px}
.skip:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--charm); outline-offset:3px}

@media(max-width:1024px){
  .nav,.hdr__tel{display:none}
  .burger{display:flex}
}
/* The header CTA must never take the full-width mobile button
   rule, or it pushes the burger off the row. Below 560px the
   burger carries the menu on its own. */
.hdr__cta .btn{width:auto; min-height:0}
@media(max-width:560px){ .hdr__cta .btn{display:none} }

/* ---------- responsive sizing and reading comfort ---------- */
@media(max-width:767px){
  :root{--gut:20px; --sec:56px}
  body{font-size:16px; line-height:1.65}
  .notice{font-size:10px; line-height:1.45; letter-spacing:.1em}
  .hdr__in{height:64px}
  .brand__mark{font-size:20px}
  .brand__sub{display:none}
  .hero{min-height:min(760px,calc(100dvh - 32px)); align-items:flex-end}
  .hero__in{padding-block:36px}
  .hero__grid{gap:20px}
  .hero__side{padding-top:18px}
  .d1{font-size:clamp(40px,13vw,62px)}
  .d2{font-size:clamp(32px,10vw,46px)}
  .lead{font-size:17px; line-height:1.6}
  .btns{display:grid; grid-template-columns:1fr}
  .btn{width:100%; min-height:48px; justify-content:space-between; padding:14px 18px}
  .ba{aspect-ratio:4/3 !important; min-height:260px}
  .ba__knob{width:44px; height:44px}
  .ba__lbl{bottom:10px; padding:5px 8px; letter-spacing:.14em}
  .ba__lbl--l{left:10px}.ba__lbl--r{right:10px}
  .file:hover{padding-left:0}
  .panel{padding:22px 18px}
  .step{grid-template-columns:48px minmax(0,1fr)}
  .prose{font-size:16.5px; line-height:1.7}
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:12px 10px}
}

@media(min-width:768px) and (max-width:1100px){
  :root{--gut:32px; --sec:76px}
  .hero{min-height:680px}
}

/* =========================================================
   HERO TEXT LEGIBILITY OVER PHOTOGRAPHY
   Appended block. Contrast only - no layout, type scale or
   content changes. Remove this block to revert.
   ========================================================= */

/* 1. Shaped scrim: protects the two text columns and the
      bottom meta row while leaving the middle of the photo
      visible, instead of flatly darkening the whole image. */
.hero .hero__bg::after{
  background:
    linear-gradient(90deg,
      rgba(22,22,19,.66) 0%,
      rgba(22,22,19,.38) 28%,
      rgba(22,22,19,.08) 50%,
      rgba(22,22,19,.46) 62%,
      rgba(22,22,19,.78) 76%,
      rgba(22,22,19,.84) 100%),
    linear-gradient(180deg,
      rgba(22,22,19,.52) 0%,
      rgba(22,22,19,.10) 32%,
      rgba(22,22,19,.26) 58%,
      rgba(22,22,19,.88) 100%);
}

/* 1b. The hero photograph is a dark dusk shot, so any scrim
       buries it. Lift the image first, then let the scrim do
       its job. Net result: photo stays visible, text stays
       readable. */
.hero .hero__bg img{filter:brightness(1.22) contrast(1.03) saturate(.95)}

/* 1c. The designed placeholder plate is a fallback for a
       MISSING photo. Once a real photo has loaded it is dead
       weight, and in the hero it was compositing over the top
       of the image and hiding it. Drop it when a photo exists.
       Where photos already render correctly this changes
       nothing visible, the plate is behind them anyway. */
.frame:has(> img) .plate{display:none}
.hero .hero__bg img{z-index:1}
.hero .hero__bg::after{z-index:2}

/* 2. Soft shadow so light areas of a photo can never swallow
      a letterform. Kept low so it reads as depth, not glow. */
.hero__in{
  text-shadow:0 1px 2px rgba(16,16,14,.45), 0 2px 24px rgba(16,16,14,.5);
}
.hero__in .btn{text-shadow:none}

/* 3. Lift the faintest hero text off the mid tones. */
.hero .eyebrow{color:#E4DBD3}
.hero .eyebrow::before{background:var(--charm)}
.hero__meta b{color:#CFC5BC}
.hero__meta span{color:#F0EAE4}
.hero__meta{border-top-color:rgba(242,236,230,.28)}
.hero__side{border-left-color:rgba(242,236,230,.32)}
@media(max-width:900px){
  .hero__side{border-left-color:transparent; border-top-color:rgba(242,236,230,.32)}
}

/* 4. The outline button needs its own ground over a photo. */
.hero .btn--line{
  border-color:rgba(242,236,230,.55);
  background:rgba(22,22,19,.38);
  backdrop-filter:blur(4px);
}
.hero .btn--line:hover{
  border-color:var(--charm); color:var(--charm);
  background:rgba(22,22,19,.62);
}

/* 5. Below 900px the hero columns stack, so a left/right scrim
      no longer sits under the text. Swap to a vertical field. */
@media(max-width:900px){
  .hero .hero__bg::after{
    background:linear-gradient(180deg,
      rgba(22,22,19,.66) 0%,
      rgba(22,22,19,.46) 22%,
      rgba(22,22,19,.62) 48%,
      rgba(22,22,19,.78) 74%,
      rgba(22,22,19,.94) 100%);
  }
  .hero__in{text-shadow:0 1px 2px rgba(16,16,14,.55), 0 2px 26px rgba(16,16,14,.6)}
}