:root{
  --ink:#0b0b0b;
  --paper:#ffffff;
  --mute:#7c7c7c;
  --soft:#2a2a2a;
  --hair:#e7e7e7;
  --maxtext:760px;
  --maxwide:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Jost',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* header - centered, two links, not sticky (avoids the reference's broken fixed-nav) */
header.site{padding:24px;border-bottom:1px solid var(--hair)}
.site-nav{display:flex;justify-content:space-between;align-items:baseline;max-width:var(--maxwide);margin:0 auto;gap:20px}
.site-nav a{text-decoration:none}
.site-nav .wordmark{font-weight:700;font-size:22px;letter-spacing:-.01em;color:#000}
.site-nav .to-contact{font-size:13px;color:#000;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;border-bottom:3px solid #000;padding-bottom:2px;transition:border-color 300ms ease}
.site-nav .to-contact:hover{border-bottom-color:#f5d33f}

/* module rhythm */
.module{width:90%;max-width:var(--maxtext);margin:0 auto;padding:52px 0}
.module.wide{max-width:var(--maxwide)}
.module.tight{padding:26px 0}
.module.pull{padding-top:18px}
.module.compact{padding:22px 0}

/* type */
.hero{padding-top:68px;padding-bottom:34px}
.title{font-size:2.4rem;line-height:1.5;font-weight:400;letter-spacing:normal;text-align:center;margin:0}
.title .line{display:block}
.title .mark{position:relative;display:inline-block;z-index:0}
.title .mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:9px;height:10px;background:#f5d33f;border-radius:2px;z-index:-1}
h2.sec{font-size:36px;line-height:1.3;font-weight:400;letter-spacing:-.01em;text-align:center;margin:0 0 24px}
h2.sec .mark{position:relative;display:inline-block;z-index:0}
h2.sec .mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:5px;height:10px;background:#f5d33f;border-radius:2px;z-index:-1}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.lede{font-size:18px;line-height:1.62}
.center{text-align:center}
.mute{color:var(--mute)}
strong{font-weight:700}
em{font-style:italic}

/* images */
figure{margin:0}
figure img{width:100%;background:rgba(0,0,0,.03)}
figcaption{font-size:14.5px;color:var(--mute);text-align:center;line-height:1.5;margin-top:14px;max-width:34em;margin-left:auto;margin-right:auto}

/* hero image, deliberately small (beats .module.wide on specificity) */
.module.hero-img{max-width:450px}

/* two-column section: text left, image right */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split-text p:last-child{margin-bottom:0}
.split-fig{margin:0}
.split-fig img{width:100%;height:430px;object-fit:cover;background:rgba(0,0,0,.03)}
.split-fig figcaption{font-size:14px;color:var(--mute);text-align:left;line-height:1.5;margin:12px 0 0;max-width:none}

/* project portfolio: text left, square image cluster right (1 big + 2 half, flush) */
.portfolio{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.portfolio .ptext h2.sec{text-align:left;margin:0 0 18px}
.portfolio .ptext p:last-child{margin-bottom:0}
.pcluster{display:grid;grid-template-columns:1fr 1fr;gap:10px;line-height:0}
.pcluster img{width:100%;aspect-ratio:1/1;object-fit:cover;background:rgba(0,0,0,.03)}
.pcluster .top{grid-column:1 / -1}

/* labelled lists (services / process), underscore-date style */
.kicker{font-weight:700;font-size:15px;letter-spacing:.02em;text-align:center;margin:0 0 22px}
.lines{margin:0}
.lines .row{margin:0 0 12px;line-height:1.5}
.lines .row:last-child{margin-bottom:0}
.lines .row .y{color:var(--mute)}
.lines.steps .row{padding-left:34px;position:relative}
.lines.steps .row .n{position:absolute;left:0;top:0;color:var(--mute);font-weight:700}

/* benefits - 3-up grid */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 36px}
/* "what we bring": wide content col (8, heading + stacked cards), blank col (4) */
.bring{display:grid;grid-template-columns:2fr 1fr;gap:44px;align-items:start}
.bring .sec{text-align:left;margin:0 0 24px;grid-column:1 / -1}
.bring .bgrid{grid-template-columns:1fr;gap:26px}
.benefit{margin:0}
.benefit .bt,.step .sn{font-weight:700;text-transform:uppercase;font-size:16px;margin:12px 0;line-height:1.3;color:#947200}
.benefit .bx{margin:0;color:var(--soft);font-size:15.5px;line-height:1.55}

/* process - named steps, 4-up, no tacky numbers */
.steps2{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.step .sx{margin:0;color:var(--soft);font-size:15px;line-height:1.55}

/* "how it goes": blank col (4) + wide content col (8), right-aligned heading, numbered timeline */
.roadmap{display:grid;grid-template-columns:1fr 2fr;gap:44px;align-items:start}
.roadmap .sec{text-align:right;margin:0 0 24px;grid-column:1 / -1}
.roadmap .road-main{grid-column:2}
.roadmap .steps2{display:block;gap:0;counter-reset:step;position:relative}
.roadmap .steps2::before{content:"";position:absolute;left:18px;top:19px;bottom:-30px;width:2px;background:#947200;z-index:0}
.roadmap .steps2::after{content:"";position:absolute;left:13px;bottom:-38px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #947200;z-index:0}
.roadmap .step{position:relative;counter-increment:step;padding:0 0 32px 60px}
.roadmap .step:last-child{padding-bottom:0}
.roadmap .step::before{content:counter(step);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:4px;background:#947200;color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;z-index:1}
.roadmap .step .sn{margin:8px 0 7px}

/* faq - accordion */
.faq2 details{border-bottom:1px solid var(--hair)}
.faq2 details:first-of-type{border-top:1px solid var(--hair)}
.faq2 summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::after{content:"+";color:var(--mute);font-weight:400;font-size:22px;line-height:1;flex:none}
.faq2 details[open] summary::after{content:"\2013"}
.faq2 .a{margin:0 0 18px;color:var(--soft);font-size:15.5px;line-height:1.58}

/* footer */
.foot{border-top:1px solid var(--hair);max-width:var(--maxwide);margin:0 auto;padding:24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.foot-links a{color:var(--mute);text-decoration:none;font-size:14px;margin-right:20px}
.foot-links a:hover{color:var(--ink)}
.foot-c{color:var(--mute);font-size:14px}

/* faq */
.faq .item{margin:0 0 22px}
.faq .item:last-child{margin-bottom:0}
.faq .q{font-weight:700;margin:0 0 6px}
.faq .a{margin:0;color:var(--soft)}

/* cta */
.cta{width:90%;max-width:var(--maxtext);margin:0 auto;border:1px solid var(--hair);text-align:center;padding:46px 26px}
.cta .big{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px;line-height:1.3}
.cta .btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:14px 30px;margin:0 0 16px}
.cta .take{color:var(--soft);max-width:30em;margin:0 auto;font-size:15.5px;line-height:1.55}

/* contact + credits */
.contact .title a{text-decoration:none}
.contact .title a:hover{text-decoration:underline}
.contact .row{font-size:30px;line-height:1.5;font-weight:700;text-align:center;letter-spacing:-.012em}
.credits{font-size:14px;color:var(--mute);text-align:center;line-height:1.8;border-top:1px solid var(--hair);padding-top:30px}
.credits .ck{color:var(--soft);font-weight:700}

.backtop{text-align:center;padding:34px 0 74px}
.backtop a{color:var(--mute);text-decoration:none;font-size:14px}
.backtop a:hover{color:var(--ink)}

@media (max-width:900px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .steps2{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media (max-width:760px){
  .split{grid-template-columns:1fr;gap:22px}
  .portfolio{grid-template-columns:1fr;gap:22px}
  .bring{grid-template-columns:1fr;gap:20px}
  .roadmap{grid-template-columns:1fr;gap:20px}
  .roadmap .road-main{grid-column:auto}
  .roadmap .sec{text-align:left}
}
@media (max-width:640px){
  body{font-size:16px}
  .title{font-size:30px;line-height:1.3}
  h2.sec{font-size:32px}
  .contact .row{font-size:23px}
  .module{padding:36px 0;width:88%}
  .hero{padding-top:42px}
  .cta{width:88%;padding:34px 20px}
  .bgrid{grid-template-columns:1fr;gap:24px}
  .steps2{grid-template-columns:1fr}
  .foot{flex-direction:column;text-align:center;gap:10px}
  .foot-links a{margin:0 10px}
}

/* booking bar - narrow strip above the header, dark on light page.
   Not sticky, on purpose: the header below is deliberately static (see note there),
   and a fixed strip eats the fold on phones. The whole bar is the link. */
.bookbar{display:block;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;line-height:1.35;padding:9px 24px}
.bookbar .bb-in{max-width:var(--maxwide);margin:0 auto;display:flex;justify-content:center;align-items:baseline;gap:14px;flex-wrap:wrap;text-align:center}
.bookbar .bb-say{color:rgba(255,255,255,.78)}
.bookbar .bb-do{font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:12px;white-space:nowrap;border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color 300ms ease}
.bookbar:hover .bb-do{border-bottom-color:#f5d33f}
.bookbar:focus-visible{outline:3px solid #f5d33f;outline-offset:-3px}
.bookbar .bb-arrow{margin-left:8px;display:inline-block;transition:transform 300ms ease}
.bookbar:hover .bb-arrow{transform:translateX(3px)}
@media (max-width:640px){
  .bookbar{padding:8px 16px;font-size:12.5px}
  .bookbar .bb-in{gap:4px 10px}
  .bookbar .bb-do{font-size:11.5px;letter-spacing:.14em}
}