/* Valprop Energy Solutions: ported from the Claude Design canvas
   (Valprop Site.dc.html). The canvas is a single React-runtime prototype with
   inline styles; this is the same design as real static CSS, so the live site
   needs no framework, no build step, and no editor-only components. */

:root{
  --ink:#17140F;          /* darkest ground, header/footer/hero */
  --ink-2:#241F19;        /* raised dark surface */
  --ink-3:#1C1813;
  --paper:#F5EFE4;        /* bone ground */
  --paper-2:#EAE1D2;      /* warm band */
  --paper-3:#FCF9F3;      /* card */
  --slate:#2F3A42;        /* the three-column band */
  --bronze:#B45A21;       /* primary accent */
  --bronze-lt:#D9803A;    /* hover / on-dark accent */
  --bronze-pale:#E0A06A;
  --rule-dark:#332C24;
  --rule-mid:#3E362E;
  --rule-paper:#E2D9C9;
  --rule-paper-2:#DCD1BC;
  --text-mute:#5F564C;
  --text-mute-2:#6B6157;
  --text-faint:#8A8074;
  --on-dark-mute:#A9A096;
  --on-dark-faint:#8B8073;
  --on-dark-fainter:#7C7266;
  --serif:Petrona,'Iowan Old Style',Georgia,serif;
  --sans:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1320px;
  --pad:clamp(20px,4vw,60px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
a{color:var(--bronze);text-decoration:none}
a:hover{color:var(--bronze-lt)}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Visible focus for keyboard users. The canvas prototype had none; a real
   site with a contact form needs it. */
:focus-visible{outline:2px solid var(--bronze-lt);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bronze);color:var(--paper);padding:14px 20px;
  font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------------- header ---------------- */
.site-head{background:var(--ink);border-bottom:1px solid var(--rule-dark)}
.head-in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);min-height:96px;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px);
}
.brand{display:flex;align-items:center;gap:15px;flex-shrink:0}
.brand-txt{display:flex;flex-direction:column;gap:5px}
.brand-name{font:600 22px/1 var(--serif);letter-spacing:.16em;color:var(--paper)}
.brand-sub{display:flex;align-items:center;gap:8px}
.brand-rule{width:14px;height:1px;background:var(--bronze)}
.brand-sub span{font:500 8px/1 var(--sans);letter-spacing:.3em;color:#9A8F82}

.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px);min-width:0}
.nav a{
  font-family:var(--sans);font-weight:500;font-size:clamp(10px,1.02vw,12px);
  line-height:1;letter-spacing:.09em;text-transform:uppercase;
  padding-bottom:4px;white-space:nowrap;flex-shrink:0;
  color:var(--on-dark-faint);border-bottom:1.5px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--bronze)}
.btn-book{
  font-family:var(--sans);font-weight:500;font-size:clamp(10px,1.02vw,12px);
  line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  flex-shrink:0;color:var(--paper)!important;background:var(--bronze);
  padding:14px clamp(13px,1.6vw,22px);border:none;cursor:pointer;transition:background .18s;
}
.btn-book:hover{background:var(--bronze-lt);color:var(--paper)!important}

/* mobile menu: real <details>, so it works with JS disabled */
.menu{display:none}
.menu>summary{
  list-style:none;display:flex;align-items:center;gap:12px;
  min-height:48px;padding:0 4px;cursor:pointer;
}
.menu>summary::-webkit-details-marker{display:none}
.menu-label{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.menu-bars{display:flex;flex-direction:column;gap:5px}
.menu-bars i{display:block;width:24px;height:1.5px;background:var(--bronze)}
.menu-panel{
  border-top:1px solid var(--rule-dark);
  padding:14px var(--pad) 26px;display:flex;flex-direction:column;
}
.menu-panel a{
  font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:18px 0;border-bottom:1px solid #2A241D;color:var(--on-dark-faint);
}
.menu-panel a[aria-current="page"]{color:var(--paper)}
.menu-panel .btn-book{margin-top:22px;text-align:center;font-size:12.5px;letter-spacing:.1em;padding:19px 24px}

@media (max-width:860px){
  .nav{display:none}
  .menu{display:block}
}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--ink);min-height:min(88vh,780px);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--ink) 0%,rgba(23,20,15,.94) 38%,rgba(23,20,15,.62) 66%,rgba(23,20,15,.35) 100%);
}
.hero-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.hero-in{
  position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(104px,15vh,168px) var(--pad) clamp(104px,14vh,132px);
  display:flex;flex-direction:column;justify-content:center;
}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:36px}
.eyebrow i{width:34px;height:1.5px;background:var(--bronze);flex:none}
.eyebrow span{font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-lt)}
.hero h1{
  font:300 clamp(38px,4.6vw,66px)/1.12 var(--serif);letter-spacing:-.018em;
  color:var(--paper);margin:0;max-width:21ch;text-wrap:pretty;
}
.hero-cta{display:flex;align-items:center;gap:28px;margin-top:46px;flex-wrap:wrap}
.cta-solid{
  font:500 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper)!important;background:var(--bronze);padding:19px 30px;transition:background .18s;
}
.cta-solid:hover{background:var(--bronze-lt);color:var(--paper)!important}
.cta-ghost{
  font:500 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper)!important;border:1px solid #5A4C3C;padding:19px 30px;transition:border-color .18s;
}
.cta-ghost:hover{border-color:var(--bronze-lt)}
.hero-foot{position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.hero-foot-in{
  border-top:1px solid rgba(245,239,228,.16);padding:20px 0;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.hero-foot-in b{font:500 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.hero-foot-in i{width:5px;height:5px;background:var(--bronze);flex:none}
.hero-foot-in span{font:400 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint)}

/* ---------------- three-column capability band ---------------- */
.band{background:var(--slate);color:var(--paper)}
.band-in{
  max-width:var(--wrap);margin:0 auto;padding:40px var(--pad) 56px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 clamp(24px,3vw,48px);
}
.band-col{padding:26px 0 44px;border-top:1px solid rgba(245,239,228,.18)}
.band-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.band-num{font:400 30px/1 var(--serif);color:var(--bronze-pale)}
.band-title{font:500 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.band-fig{display:block;margin-bottom:22px}
.band-col p{font:400 15.5px/1.66 var(--sans);color:#B6BEC4;margin:0}

/* ---------------- gridded paper section ---------------- */
.paper-grid{
  background:var(--paper);
  background-image:linear-gradient(#E7DFD1 1px,transparent 1px),linear-gradient(90deg,#E7DFD1 1px,transparent 1px);
  background-size:34px 34px;
}
.claim{
  max-width:var(--wrap);margin:0 auto;padding:104px var(--pad) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(32px,5vw,88px);align-items:center;
}
.kicker{font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);margin-bottom:30px}
.claim h2{font:400 clamp(30px,3.2vw,44px)/1.2 var(--serif);letter-spacing:-.012em;margin:0 0 26px;max-width:22ch;text-wrap:pretty}
.claim p{font:400 17px/1.68 var(--sans);color:var(--text-mute);margin:0;max-width:48ch}
.chart{background:var(--ink-2);padding:36px 36px 30px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px}
.chart-head b{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-pale)}
.chart-head span{font:400 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-fainter)}
.chart svg{width:100%;height:auto;display:block}

/* ---------------- pillar cards ---------------- */
.pillars{
  max-width:var(--wrap);margin:0 auto;padding:104px var(--pad) 110px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,2.4vw,32px);
}
.pcard{display:flex;flex-direction:column;transition:border-color .18s}
.pcard-a{background:var(--paper-3);border:1px solid var(--rule-paper)}
.pcard-a:hover{border-color:var(--bronze)}
.pcard-b{background:var(--ink-2);color:var(--paper)}
.pcard-media{position:relative;height:270px;background:var(--paper-2)}
.pcard-fig{height:270px;background:var(--ink-3);position:relative;overflow:hidden;display:flex;align-items:center;padding:0 40px}
.pcard-fig svg{width:100%;height:auto}
.pcard-body{padding:38px 40px 42px}
.tag{
  display:inline-block;font:500 10px/1 var(--sans);letter-spacing:.18em;
  padding:6px 9px;margin-bottom:22px;
}
.tag-a{background:var(--bronze);color:var(--paper)}
.tag-b{background:var(--bronze-lt);color:var(--ink)}
.pcard h3{font:400 clamp(24px,2.3vw,32px)/1.2 var(--serif);margin:0 0 18px}
.pcard p{font:400 16px/1.66 var(--sans);margin:0 0 30px;max-width:38ch}
.pcard-a p{color:var(--text-mute-2)}
.pcard-b p{color:var(--on-dark-mute)}
.pcard-more{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pcard-a .pcard-more{color:var(--bronze)}
.pcard-b .pcard-more{color:var(--bronze-lt)}

/* ---------------- why / split ---------------- */
.split{background:var(--ink);color:var(--paper)}
.split-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:stretch}
.split-media{position:relative;min-height:clamp(300px,42vh,520px);background:var(--ink-2)}
.split-copy{display:flex;align-items:center;padding:clamp(48px,6vw,96px) clamp(28px,5vw,88px)}
.split-copy p{font:300 clamp(26px,2.9vw,38px)/1.34 var(--serif);color:var(--paper);margin:0;max-width:28ch;text-wrap:pretty}
.underlink{
  display:inline-block;margin-top:42px;font:500 12px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper)!important;border-bottom:1.5px solid var(--bronze);padding-bottom:10px;
}
.underlink:hover{color:var(--bronze-lt)!important}

/* ---------------- markets ---------------- */
.markets-wrap{background:var(--paper-2)}
.markets{max-width:var(--wrap);margin:0 auto;padding:96px var(--pad) 104px}
.markets-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:46px}
.markets-head .kicker{margin-bottom:0}
.markets-head span{font:400 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.markets-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:0 clamp(24px,4vw,72px);border-top:1.5px solid var(--ink-2);
}
.market{display:flex;align-items:baseline;gap:16px;padding:21px 0;border-bottom:1px solid #D6CBB8}
.market-num{font:400 11px/1 var(--sans);color:var(--bronze);letter-spacing:.1em;width:22px;flex-shrink:0}
.market-city{font:400 clamp(18px,1.6vw,22px)/1 var(--serif);color:var(--ink-2);flex:1}
.market-country{font:400 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);text-align:right}

/* ---------------- closing CTA strip ---------------- */
.strip{background:var(--bronze);color:var(--paper)}
.strip-in{
  max-width:var(--wrap);margin:0 auto;padding:80px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.strip p{font:300 clamp(26px,3vw,40px)/1.22 var(--serif);max-width:26ch;text-wrap:pretty;margin:0}
.strip-btn{
  font:500 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink)!important;background:var(--paper);padding:20px 32px;white-space:nowrap;transition:background .18s,color .18s;
}
.strip-btn:hover{background:var(--ink);color:var(--paper)!important}

/* ---------------- interior page header ---------------- */
.page-head{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.page-head::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(245,239,228,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,239,228,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
.page-head-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:96px var(--pad) 104px}
.page-head .kicker{color:var(--bronze-lt);margin-bottom:34px}
.page-head h1{font:300 clamp(34px,4.2vw,58px)/1.14 var(--serif);letter-spacing:-.016em;margin:0;max-width:24ch;text-wrap:pretty}
.page-head-split{
  position:relative;max-width:var(--wrap);margin:0 auto;padding:96px var(--pad) 100px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,88px);align-items:end;
}
.page-head-split p{font:400 16.5px/1.72 var(--sans);color:var(--on-dark-mute);margin:0;max-width:44ch}

/* ---------------- about ---------------- */
.about-grid{
  max-width:var(--wrap);margin:0 auto;padding:92px var(--pad) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(32px,5vw,88px);align-items:start;
}
.pullquote{border-left:2px solid var(--bronze);padding-left:30px}
.pullquote b{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:22px}
.pullquote p{font:400 clamp(21px,2.1vw,27px)/1.46 var(--serif);color:var(--ink-2);margin:0;text-wrap:pretty}
.about-body{max-width:60ch}
.about-body p{font:400 17px/1.7 var(--sans);color:var(--text-mute);margin:0 0 24px}
.about-body p:last-child{margin-bottom:0}
.principles{
  max-width:var(--wrap);margin:0 auto;padding:88px var(--pad) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2vw,24px);
}
.principle{background:var(--paper-3);border-top:2px solid var(--bronze);padding:34px 32px 38px}
.principle .n{font:400 42px/1 var(--serif);color:var(--bronze);margin-bottom:24px}
.principle h3{font:500 12.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.principle p{font:400 15.5px/1.66 var(--sans);color:var(--text-mute-2);margin:0}

/* ---------------- what we do ---------------- */
.pillar-head{
  max-width:var(--wrap);margin:0 auto;padding:88px var(--pad) 0;
  display:flex;align-items:center;gap:16px;margin-bottom:44px;flex-wrap:wrap;
}
.pillar-head h2{font:400 clamp(28px,3vw,42px)/1.16 var(--serif);margin:0}
.pillar-head .tag{margin-bottom:0}
.services{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.service{
  background:var(--paper-3);border:1px solid var(--rule-paper);
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center;padding:36px clamp(24px,3vw,44px);
}
.service-fig{background:var(--paper-2);padding:18px 20px;flex:1 1 190px;max-width:240px}
.service-fig b{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--text-faint);margin-bottom:12px}
.service-fig .f{height:78px}
.service-fig svg{width:100%;height:100%}
.service-copy{flex:1 1 320px}
.service-copy .h{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.service-copy .n{font:400 15px/1 var(--serif);color:var(--bronze)}
.service-copy h3{font:400 clamp(22px,2.2vw,30px)/1.2 var(--serif);margin:0}
.service-copy p{font:400 16px/1.68 var(--sans);color:var(--text-mute-2);margin:0;max-width:62ch}
.pillar-b-intro{max-width:var(--wrap);margin:0 auto;padding:96px var(--pad) 56px}
.pillar-b-intro .h{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.pillar-b-intro h2{font:400 clamp(28px,3vw,42px)/1.16 var(--serif);margin:0}
.pillar-b-intro>p{font:400 17px/1.7 var(--sans);color:var(--text-mute);margin:0;max-width:58ch}
.tag-dark{background:var(--ink-2);color:var(--paper)}
.stages-wrap{background:var(--ink);color:var(--paper)}
.stages-in{max-width:var(--wrap);margin:0 auto;padding:84px var(--pad) 92px}
.stages{display:flex;flex-wrap:wrap;gap:clamp(24px,3.4vw,44px)}
.stage{flex:1 1 210px;border-top:2px solid var(--bronze);padding-top:32px;position:relative}
.stage::before{
  content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  background:var(--ink);border:2px solid var(--bronze-lt);border-radius:50%;
}
.stage .n{font:500 10px/1 var(--sans);letter-spacing:.2em;color:var(--on-dark-faint);margin-bottom:16px}
.stage h3{font:400 clamp(24px,2.4vw,31px)/1.16 var(--serif);color:var(--paper);margin:0 0 14px}
.stage p{font:400 13.5px/1.6 var(--sans);color:var(--on-dark-fainter);margin:0}
.fees{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(44px,5vw,76px)}
.fee{border-top:2px solid var(--bronze);padding:32px 0 0}
.fee b{display:block;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-lt);margin-bottom:20px}
.fee p{font:400 16px/1.68 var(--sans);color:var(--on-dark-mute);margin:0;max-width:44ch}

/* ---------------- slot pages (track record / people) ---------------- */
.slots-wrap{background:var(--paper-2)}
.slots-in{max-width:var(--wrap);margin:0 auto;padding:72px var(--pad) 88px}
.slot-note{
  display:inline-flex;align-items:center;gap:12px;padding:11px 16px;
  border:1px dashed #BFB29C;background:var(--paper);margin-bottom:34px;
}
.slot-note i{width:6px;height:6px;background:var(--bronze);flex:none}
.slot-note span{font:500 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.slot-grid{display:grid;gap:clamp(16px,2vw,24px)}
.slot-grid.four{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.slot-grid.three{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.slot{background:var(--paper);border:1px solid var(--rule-paper-2)}
.slot-head{
  background:var(--ink-2);color:var(--paper);padding:20px 32px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.slot-head b{font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-lt)}
.slot-head span{font:400 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-fainter)}
.slot-head-p{background:var(--ink-2);padding:26px 30px;display:flex;align-items:center;gap:14px}
.slot-head-p b{font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-lt)}
.slot-body{padding:34px 32px 40px;display:flex;flex-direction:column;gap:24px}
.slot-body-p{padding:32px 30px 38px;display:flex;flex-direction:column;gap:22px}
.slot-field b{display:block;font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#9A9084;margin-bottom:11px}
.bar{height:12px;background:#E4DAC7}
.bar.tall{height:14px}
.bar-stack{display:flex;flex-direction:column;gap:7px}
.people-band{position:relative;height:clamp(280px,40vh,440px);background:var(--paper-2)}

/* ---------------- contact ---------------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:stretch}
.contact-side{
  background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding:clamp(48px,6vw,96px) clamp(20px,4vw,72px);
}
.contact-side svg.deco{position:absolute;left:0;right:0;bottom:0;width:100%;height:52%;opacity:.5}
.contact-side .in{position:relative}
.contact-side h1{font:300 clamp(34px,4vw,54px)/1.14 var(--serif);letter-spacing:-.016em;margin:0 0 30px;max-width:14ch;text-wrap:pretty}
.contact-side>.in>p{font:400 17px/1.7 var(--sans);color:var(--on-dark-mute);margin:0 0 52px;max-width:40ch}
.contact-facts{display:flex;flex-direction:column;gap:26px;max-width:40ch}
.fact{border-top:1px solid var(--rule-mid);padding-top:22px}
.fact b{display:block;font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-fainter);margin-bottom:12px}
.fact .big{font:400 21px/1.4 var(--serif);color:var(--paper)}
.fact .sm{font:400 15.5px/1.6 var(--sans);color:var(--on-dark-mute)}
.contact-form-wrap{background:var(--paper-2);display:flex;align-items:center;padding:clamp(48px,5vw,80px) var(--pad)}
.contact-card{background:var(--paper);border:1px solid var(--rule-paper-2);padding:clamp(32px,3.4vw,52px);width:100%;max-width:560px}
.form-title{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:26px}
.field{margin-bottom:26px}
.field label{display:block;font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:11px}
.field input,.field textarea{
  width:100%;border:none;border-bottom:1px solid #CFC3AD;background:transparent;
  padding:10px 0;font:400 16px/1.4 var(--sans);color:var(--ink-2);
}
.field textarea{line-height:1.5;resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--bronze)}
.form-submit{
  margin-top:12px;width:100%;text-align:center;font:500 12.5px/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--bronze);
  padding:19px 24px;border:none;cursor:pointer;transition:background .18s;font-family:var(--sans);
}
.form-submit:hover{background:var(--ink-2)}
.form-submit[disabled]{opacity:.6;cursor:default}
.form-msg{margin-top:16px;font:500 14px/1.5 var(--sans);min-height:20px}
.form-msg.err{color:#9c3a2b}
.sent{min-height:440px;display:flex;flex-direction:column;justify-content:center}
.sent h2{font:400 28px/1.3 var(--serif);color:var(--ink-2);margin:0 0 16px}
.sent p{font:400 15.5px/1.64 var(--sans);color:var(--text-mute-2);margin:0}

/* ---------------- footer ---------------- */
.site-foot{background:var(--ink);color:var(--on-dark-faint)}
.foot-in{
  max-width:var(--wrap);margin:0 auto;padding:68px var(--pad) 58px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(24px,4vw,56px);flex-wrap:wrap;
}
.foot-nav{display:flex;gap:clamp(24px,3.4vw,52px);flex-wrap:wrap}
.foot-nav a{font:400 13px/1 var(--sans);color:var(--on-dark-faint);white-space:nowrap}
.foot-nav a:hover{color:var(--paper)}
.foot-meta{font:400 12px/1.7 var(--sans);color:var(--text-mute);text-align:right;margin-left:auto}
.foot-brand-name{font:600 18px/1 var(--serif);letter-spacing:.16em;color:var(--paper)}
.foot-brand-sub{font:500 7.5px/1 var(--sans);letter-spacing:.3em;color:#6E655B}

@media (max-width:600px){
  .foot-in{flex-direction:column}
  .foot-meta{text-align:left;margin-left:0}
}

/* Image slots: in the canvas these were an interactive editor component.
   On the live site they are plain frames that hold a real <img> once one
   exists, and render as a labelled placeholder until then. */
.imgslot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.imgslot img{width:100%;height:100%;object-fit:cover}
.imgslot .ph{
  padding:24px;text-align:center;font:400 11px/1.6 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:rgba(245,239,228,.32);max-width:34ch;
}
.imgslot.on-paper .ph{color:rgba(36,31,25,.34)}

/* ---------------- mobile tap targets ----------------
   Footer nav links rendered at 13px tall, well under the ~44px a finger needs.
   The desktop layout is dense on purpose, so this only relaxes at the mobile
   breakpoint rather than changing the design everywhere. */
@media (max-width:860px){
  .foot-nav{gap:0;flex-direction:column;width:100%}
  .foot-nav a{
    display:block;padding:15px 0;min-height:44px;
    border-bottom:1px solid rgba(245,239,228,.10);
  }
  .foot-in{gap:28px}
  .foot-meta{text-align:left;margin-left:0}
  .underlink{padding-top:12px;padding-bottom:14px}
  .skip{padding:16px 20px}
  /* hero runs tall on small screens; let it size to content instead */
  .hero{min-height:0}
  .hero-in{padding-top:clamp(72px,12vh,110px);padding-bottom:clamp(120px,16vh,150px)}
  .strip-in{padding-top:56px;padding-bottom:56px}
  .strip-btn{width:100%;text-align:center}
  .hero-cta{gap:14px}
  .hero-cta a{flex:1 1 100%;text-align:center}
}

/* ---------------- mobile menu overflow fix ----------------
   The <details> panel was a plain flex child of .head-in, so opening it grew
   the header row to the panel's max-content width: measured 487px against a
   375px viewport, putting 112px of every nav link off-screen and giving the
   whole page a horizontal scrollbar. This is the only navigation at or below
   860px, so it broke nav on every page on every phone.
   Taking the panel out of flow and pinning it to the header's full width is
   the fix; the header itself stays a simple flex row. */
@media (max-width:860px){
  .site-head{position:relative}
  .menu{position:static}
  .menu-panel{
    position:absolute;left:0;right:0;top:100%;width:100%;
    background:var(--ink);z-index:60;
    border-top:1px solid var(--rule-dark);
    padding:14px var(--pad) 26px;
  }
}

/* ---------------- footer contrast fix ----------------
   .foot-meta and .foot-brand-sub were painting bone-ground tokens onto the
   near-black footer: 2.56:1 and 3.21:1, both failing AA. The correct on-dark
   tokens were already defined a few lines above; this was a token mix-up, not
   a design choice. 7.5px was also simply too small to read. */
.foot-meta{color:var(--on-dark-mute)}
.foot-brand-sub{color:var(--on-dark-faint);font-size:8.5px}