:root{
  --cream:#F0EEE9;
  /* Accent used only for calls to action, so it stays a signal rather than
     decoration. These are the defaults; if Zoe picks a colour in the editor
     the page overrides all four, working out the text colour and the lighter
     charcoal-band relative from whatever she chose. */
  --accent:#7A6690;
  --accent-ink:#FFFFFF;
  --accent-light:#A394B3;
  --accent-light-ink:#2E2E2E;
  --char:#2E2E2E;
  --soft:rgba(46,46,46,.66);
  --faint:rgba(46,46,46,.38);
  --line:rgba(46,46,46,.16);
  --cline:rgba(240,238,233,.22);
  --csoft:rgba(240,238,233,.75);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--char);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--char);color:var(--cream);}
/* height:auto is essential: images carry width/height attributes to reserve
   layout space, and without this the raw pixel height would squash any image
   whose CSS sets only a width. */
img{max-width:100%;display:block;height:auto;}

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--char);z-index:80;}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(20px,4vw,56px);transition:box-shadow .4s,padding .4s,background .4s;}
nav.scrolled{background:rgba(240,238,233,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:13px clamp(20px,4vw,56px);}

/* When a page opens on a dark band the nav sits over it, so it inverts until
   the page is scrolled and the nav gains its own background. */
body.nav-over-dark nav:not(.scrolled) .brand{color:var(--cream);}
body.nav-over-dark nav:not(.scrolled) .brand .dot{background:var(--cream);}
body.nav-over-dark nav:not(.scrolled) .nav-quick a{color:rgba(240,238,233,.82);}
body.nav-over-dark nav:not(.scrolled) .nav-quick a:hover{color:var(--cream);}
body.nav-over-dark nav:not(.scrolled) .nav-cta{background:var(--accent-light);color:var(--accent-light-ink);}
body.nav-over-dark nav:not(.scrolled) .menu-btn{color:var(--cream);border-color:rgba(240,238,233,.55);}
body.nav-over-dark nav:not(.scrolled) .menu-btn:hover{background:var(--cream);color:var(--char);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--char);}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--char);}
.brand .w{font-size:21px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;}
.nav-right{display:flex;gap:14px;align-items:center;}
.nav-quick{display:flex;gap:24px;align-items:center;margin-right:10px;}
.nav-quick a{font-size:13px;font-weight:600;color:var(--soft);text-decoration:none;white-space:nowrap;}
.nav-quick a:hover{color:var(--char);}
@media(max-width:820px){.nav-quick{display:none;}}
/* On a narrow phone the brand, the button and the menu together were wider
   than the screen, which pushed the menu control off the right edge. Tighten
   everything and drop the word Menu, leaving its icon and its label for
   assistive tech. */
@media(max-width:470px){
  nav,nav.scrolled{padding-left:14px;padding-right:14px;gap:10px;}
  .nav-right{gap:8px;}
  .brand .w{font-size:18px;}
  .nav-cta{font-size:12px;padding:10px 14px;}
  .menu-btn{padding:10px 12px;gap:0;}
  .menu-btn .mlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
}
/* Below 360px there is not room for the booking button as well, and losing
   the menu control would be worse. The button is in the menu and on every
   page, so it is the one that gives way. */
@media(max-width:359px){
  nav,nav.scrolled{padding-left:11px;padding-right:11px;gap:8px;}
  .brand .w{font-size:16.5px;}
  .brand{gap:7px;}
  .nav-cta{display:none;}
}
.nav-cta{font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent);padding:12px 20px;border-radius:100px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(122,102,144,.6);}
.menu-btn{display:flex;align-items:center;gap:10px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--char);background:transparent;border:1.5px solid var(--char);border-radius:100px;padding:11px 18px;cursor:pointer;transition:background .25s,color .25s;}
.menu-btn:hover{background:var(--char);color:var(--cream);}
.menu-btn .ico{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.menu-btn .ico i{width:4px;height:4px;border-radius:50%;background:currentColor;}

/* menu overlay */
#menu{position:fixed;inset:0;z-index:90;background:var(--char);color:var(--cream);display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);}
#menu.open{opacity:1;pointer-events:auto;}
#menu .mwrap{max-width:1200px;margin:0 auto;width:100%;padding:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;}
@media(max-width:860px){#menu .mwrap{grid-template-columns:1fr;}}
#menu .mlinks a{display:flex;align-items:baseline;gap:18px;text-decoration:none;color:var(--cream);padding:9px 0;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s;}
#menu.open .mlinks a{opacity:1;transform:none;}
#menu .mlinks a:hover .ml{color:var(--cream);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px;}
#menu .mlinks .mn{font-size:12px;font-weight:700;color:rgba(240,238,233,.45);width:26px;}
#menu .mlinks .ml{font-size:clamp(24px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--csoft);transition:color .25s;}
#menu .maside{border-left:1px solid var(--cline);padding-left:clamp(20px,3vw,44px);}
@media(max-width:860px){#menu .maside{border-left:0;padding-left:0;display:none;}}
#menu .maside img{max-width:280px;margin-bottom:22px;}
#menu .maside p{font-size:14px;line-height:1.7;color:var(--csoft);max-width:26em;}
#menu .maside .link{margin-top:16px;display:inline-block;}
#menu .mclose{position:absolute;top:20px;right:clamp(20px,4vw,56px);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--cream);background:transparent;border:1.5px solid rgba(240,238,233,.5);border-radius:100px;padding:11px 20px;cursor:pointer;transition:border-color .25s;}
#menu .mclose:hover{border-color:var(--cream);}
body.menu-open{overflow:hidden;}

/* ---------- shared ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}
section{padding:clamp(70px,9vw,120px) 0;}
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:24px;}
h1{font-size:clamp(34px,4.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.06;max-width:17em;}
h2{font-size:clamp(27px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:17em;}
.sub{margin-top:20px;max-width:640px;font-size:clamp(15.5px,1.4vw,17px);line-height:1.75;color:var(--soft);}
.sub strong{color:var(--char);}
.btn{display:inline-block;margin-top:30px;font-size:15px;font-weight:700;color:var(--accent-ink);background:var(--accent);padding:16px 30px;border-radius:100px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease);border:0;cursor:pointer;font-family:inherit;}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(122,102,144,.55);}
.link{font-weight:700;color:var(--char);text-decoration:none;border-bottom:2px solid var(--faint);padding-bottom:2px;transition:border-color .25s;}
.link:hover{border-color:var(--char);}

.dark{background:var(--char);color:var(--cream);}
.dark .eyebrow{color:var(--csoft);}
.dark .sub{color:var(--csoft);}
.dark .btn{background:var(--accent-light);color:var(--accent-light-ink);}
.dark .link{color:var(--cream);border-color:rgba(240,238,233,.4);}
.dark .link:hover{border-color:var(--cream);}

.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.on{opacity:1;transform:none;}
.rv.d1{transition-delay:.12s;}.rv.d2{transition-delay:.24s;}

/* ---------- hero ---------- */
.hero{padding-top:clamp(140px,17vw,200px);position:relative;overflow:hidden;}
#stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero .wrap{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-art img{width:100%;height:auto;animation:fadein 1.4s var(--ease) .3s both;}
@keyframes fadein{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
.hero-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.page-hero{padding-top:clamp(140px,16vw,190px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.38);}

/* rolling word */
.rollline{font-size:clamp(44px,6.6vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1.04;max-width:none;}
.roll{display:inline-flex;overflow:hidden;height:1.08em;vertical-align:bottom;}
.roll-in{display:flex;flex-direction:column;animation:rollv 6.8s var(--ease) .6s infinite;}
.roll-in i{font-style:normal;height:1.08em;border-bottom:6px solid var(--char);line-height:1;}
.roll-in i::before{content:attr(data-w);}
.roll-word{display:inline-block;height:1.08em;line-height:1;border-bottom:6px solid var(--char);vertical-align:bottom;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
@media(prefers-reduced-motion:reduce){.roll-in{animation:none !important;}}
.lead-line{margin-top:26px;font-size:clamp(19px,1.9vw,24px);font-weight:600;line-height:1.45;color:var(--char);max-width:26em;}

/* photos */
.photo{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(46,46,46,.4);}
.photo img{width:100%;height:100%;object-fit:cover;}

/* ---------- infographics ---------- */
.info-card{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.4);padding:clamp(20px,2.5vw,32px);}
.info-card svg{width:100%;height:auto;display:block;}
.info-card .icap{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:center;}
.dark .info-card{background:rgba(240,238,233,.05);border-color:var(--cline);}
.dark .info-card .icap{color:rgba(240,238,233,.5);}

/* ---------- neural list ---------- */
.neural{margin-top:clamp(36px,4.5vw,54px);max-width:820px;position:relative;}
.neural::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;background:var(--line);}
.nrow{position:relative;padding:16px 0 16px 42px;font-size:16px;line-height:1.65;color:var(--soft);}
.nrow::before{content:"";position:absolute;left:0;top:22px;width:18px;height:18px;border-radius:50%;background:var(--cream);border:3px solid var(--char);transition:background .3s;}
.nrow:hover::before{background:var(--char);}
.nrow strong{color:var(--char);}
.dark .neural::before{background:var(--cline);}
.dark .nrow{color:var(--csoft);}
.dark .nrow::before{background:var(--char);border-color:var(--cream);}
.dark .nrow:hover::before{background:var(--cream);}
.dark .nrow strong{color:var(--cream);}

/* ---------- card grids (content splitting) ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);margin-top:clamp(34px,4.5vw,52px);}
@media(max-width:760px){.grid2{grid-template-columns:1fr;}}
.gcard{position:relative;border:1px solid var(--line);border-radius:14px;padding:22px 24px 22px 52px;font-size:15px;line-height:1.65;color:var(--soft);background:rgba(255,255,255,.35);transition:transform .3s var(--ease),border-color .3s;}
.gcard::before{content:"";position:absolute;left:22px;top:27px;width:12px;height:12px;border-radius:50%;background:var(--char);}
.gcard:hover{transform:translateY(-3px);border-color:var(--char);}
.gcard strong{color:var(--char);}
.dark .gcard{background:rgba(240,238,233,.06);border-color:var(--cline);color:var(--csoft);}
.dark .gcard::before{background:var(--cream);}
.dark .gcard:hover{border-color:var(--cream);}
.dark .gcard strong{color:var(--cream);}

/* ---------- connected services (scroll-native, dark) ---------- */
.svc-sec{background:var(--char);color:var(--cream);}
.svc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:start;}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr;}}
.svc-brand{position:sticky;top:120px;}
@media(max-width:860px){.svc-brand{position:static;}}
.svc-brand .eyebrow{color:var(--csoft);}
.svc-brand .big{font-size:clamp(36px,4.4vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.05;}
.svc-brand img{max-width:min(280px,24vw);margin-top:28px;}
@media(max-width:860px){.svc-brand img{display:none;}}
.svc-item{position:relative;padding:clamp(26px,3vw,38px) 0 clamp(26px,3vw,38px) clamp(40px,3.6vw,58px);border-bottom:1px solid var(--cline);}
.svc-item:first-child{border-top:1px solid var(--cline);}
.svc-item::before{content:"";position:absolute;left:0;top:clamp(30px,3.6vw,46px);width:14px;height:14px;border-radius:50%;border:3px solid var(--cream);background:var(--char);transition:background .4s;}
.svc-item::after{content:"";position:absolute;left:16px;top:calc(clamp(30px,3.6vw,46px) + 8px);height:2px;width:0;background:var(--cream);transition:width .7s var(--ease);}
.svc-item.lit::before{background:var(--cream);}
.svc-item.lit::after{width:clamp(12px,1.5vw,22px);}
.svc-item h3{font-size:clamp(21px,2.4vw,29px);font-weight:800;letter-spacing:-.025em;margin-bottom:10px;}
.svc-item p{font-size:15px;line-height:1.7;color:var(--csoft);max-width:36em;}
.svc-item .link{display:inline-block;margin-top:16px;color:var(--cream);border-color:rgba(240,238,233,.4);}
.svc-item .link:hover{border-color:var(--cream);}

/* ---------- photo quote band ---------- */
/* When the quote opens the page it owns the first screen: the photograph is
   given room at the top and the words settle into the lower third, with a
   sliver of the section below showing so it reads as a page that carries on. */
.quote-band{position:relative;background-size:cover;background-position:center 28%;
  min-height:90vh;min-height:90svh;display:flex;align-items:flex-end;
  padding:clamp(120px,22vh,260px) 0 clamp(64px,10vh,120px);}
.quote-band > .wrap{width:100%;}
/* When the quote opens the page, the section beneath it does not need to
   clear the fixed nav as well, and the shorter gap keeps the headline
   above the fold instead of cutting the rolling word in half. */
.quote-band + .hero{padding-top:clamp(72px,8vw,116px);}
.quote-band::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(46,46,46,.48) 0%,rgba(46,46,46,.58) 38%,rgba(46,46,46,.88) 100%);}
.quote-band .wrap{position:relative;}
.quote-band blockquote{font-size:clamp(24px,2.9vw,39px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--cream);max-width:16em;}
.quote-band cite{display:block;margin-top:30px;font-style:normal;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--csoft);}

/* ---------- method strip ---------- */
.method{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(40px,5vw,60px);}
@media(max-width:860px){.method{grid-template-columns:1fr;}}
.mstep{border-top:3px solid var(--char);padding-top:16px;}
.mstep .mn{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.03em;color:var(--faint);margin-bottom:8px;}
.mstep h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.mstep p{font-size:14px;line-height:1.65;color:var(--soft);}
.dark .mstep{border-top-color:var(--cream);}
.dark .mstep .mn{color:rgba(240,238,233,.4);}
.dark .mstep p{color:var(--csoft);}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr;}}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.tag{font-size:12.5px;font-weight:700;letter-spacing:.04em;border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;color:var(--soft);transition:border-color .25s,color .25s;}
.tag:hover{border-color:var(--char);color:var(--char);}
.dark .tag{border-color:var(--cline);color:var(--csoft);}
.dark .tag:hover{border-color:var(--cream);color:var(--cream);}

/* ---------- routes (secondary pages) ---------- */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,28px);margin-top:clamp(36px,4.5vw,56px);}
@media(max-width:820px){.routes{grid-template-columns:1fr;}}
.route{display:block;background:rgba(255,255,255,.42);border:1px solid var(--line);border-radius:16px;padding:clamp(26px,3vw,38px);text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;}
.route:hover{transform:translateY(-6px);box-shadow:0 26px 48px -28px rgba(46,46,46,.45);border-color:var(--char);}
.route h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.025em;margin-bottom:10px;}
.route p{font-size:14.5px;line-height:1.7;color:var(--soft);}
.route .go{display:inline-block;margin-top:18px;font-size:13.5px;font-weight:700;border-bottom:2px solid var(--faint);padding-bottom:2px;transition:border-color .25s;}
.route:hover .go{border-color:var(--char);}
.dark .route{background:rgba(240,238,233,.06);border-color:var(--cline);}
.dark .route:hover{border-color:var(--cream);box-shadow:0 26px 48px -28px rgba(0,0,0,.6);}
.dark .route h3{color:var(--cream);}
.dark .route p{color:var(--csoft);}
.dark .dark .route .go{border-bottom-color:rgba(240,238,233,.45);}
.dark .route:hover .go{border-bottom-color:var(--cream);}

/* ---------- big CTA ---------- */
.bigcta{border-top:1px solid var(--line);background:rgba(255,255,255,.38);}
.bigcta h2{max-width:15em;}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);margin-top:clamp(34px,4vw,52px);align-items:start;}
@media(max-width:860px){.form-grid{grid-template-columns:1fr;}}
form{display:grid;gap:16px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.f-row{grid-template-columns:1fr;}}
label{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:7px;}
input,select,textarea{width:100%;background:rgba(255,255,255,.6);border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--char);appearance:none;transition:border-color .25s,box-shadow .25s;}
textarea{min-height:120px;resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--char);box-shadow:0 8px 20px -12px rgba(46,46,46,.4);}
.f-note{font-size:12.5px;color:var(--faint);line-height:1.6;}
/* The honeypot is moved off screen rather than hidden, because some bots
   skip display:none fields. Nobody sighted or using a screen reader meets
   it: the wrapper is aria-hidden and the input is out of the tab order. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.f-error,.f-limit{margin-top:14px;font-size:14px;line-height:1.6;color:#8A2B2B;}
.f-error a,.f-limit a{color:inherit;font-weight:700;}
.dark .f-error,.dark .f-limit{color:#F0A9A9;}
.f-done{display:none;border:1.5px solid var(--line);border-radius:16px;background:rgba(255,255,255,.6);padding:clamp(26px,3vw,40px);}
.f-done h3{font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.025em;margin-bottom:10px;}
.f-done p{font-size:15px;line-height:1.7;color:var(--soft);}
form.sent{display:none;}
form.sent + .f-done{display:block;}
.contact-ways{display:grid;gap:14px;margin-top:26px;}
.way{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding:14px 0 0;font-size:14.5px;color:var(--soft);}
.way b{color:var(--char);font-weight:700;}

/* ---------- footer ---------- */
footer{background:var(--char);color:var(--cream);}
footer .fwrap{max-width:1200px;margin:0 auto;padding:clamp(50px,6vw,80px) clamp(20px,4vw,56px) 40px;}
footer .ftop{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center;padding-bottom:clamp(30px,4vw,50px);}
@media(max-width:820px){footer .ftop{grid-template-columns:1fr;}}
footer .fbrand{font-size:26px;font-weight:800;letter-spacing:-.03em;}
footer .fsub{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--csoft);max-width:34em;}
footer .fart img{width:100%;max-width:420px;margin-left:auto;}
@media(max-width:820px){footer .fart img{margin-left:0;}}
footer .fnav{display:flex;flex-wrap:wrap;gap:12px 26px;border-top:1px solid var(--cline);padding-top:26px;}
footer .fnav a{font-size:13px;font-weight:600;color:var(--csoft);text-decoration:none;}
footer .fnav a:hover{color:var(--cream);}
footer .legal{margin-top:22px;font-size:12px;color:rgba(240,238,233,.5);}
footer .legal a{color:rgba(240,238,233,.72);text-decoration:none;border-bottom:1px solid rgba(240,238,233,.3);}
footer .legal a:hover{color:var(--cream);border-color:var(--cream);}
footer .link{color:var(--cream);border-color:rgba(240,238,233,.4);}
footer .link:hover{border-color:var(--cream);}

/* review pill */
.review{position:fixed;bottom:16px;right:16px;z-index:70;background:var(--char);color:var(--cream);border-radius:100px;padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;display:flex;gap:12px;align-items:center;box-shadow:0 12px 26px -12px rgba(46,46,46,.6);}
.review a{color:rgba(240,238,233,.75);text-decoration:none;}
.review a:hover{color:#fff;}

/* page lockup: "PropTech Growth / by Zoe." */
.lockup{font-size:clamp(38px,5.4vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1.08;}
.lockup .lk1{display:inline-block;border-bottom:clamp(3px,.35vw,5px) solid var(--char);padding-bottom:clamp(4px,.6vw,10px);}
.lockup .lk2{display:block;margin-top:clamp(8px,1vw,14px);}
.page-hero .lead-line{margin-top:clamp(24px,3vw,38px);}
.page-hero .sub{margin-top:18px;}

/* page hero with image placeholder */
.ph-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,4.5vw,70px);align-items:center;}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr;}}
.img-ph{aspect-ratio:4/3;border:2px dashed rgba(46,46,46,.35);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(46,46,46,.45);background:repeating-linear-gradient(45deg,rgba(46,46,46,.04) 0 12px,transparent 12px 24px);}
.img-ph span{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
@media(max-width:900px){.img-ph{max-height:280px;}}

/* home hero photo */
.hero-photo{aspect-ratio:4/5;max-width:420px;margin-left:auto;animation:fadein 1.4s var(--ease) .3s both;}
@media(max-width:860px){.hero-photo{margin:34px auto 0;max-width:320px;}}

/* recommendation cards */
.recs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);margin-top:clamp(34px,4.5vw,52px);}
@media(max-width:820px){.recs{grid-template-columns:1fr;}}
.rec{border:1px solid var(--line);border-radius:16px;padding:clamp(24px,2.6vw,34px);background:rgba(255,255,255,.42);transition:border-color .3s,transform .3s var(--ease);}
.rec:hover{border-color:var(--char);transform:translateY(-3px);}
.rec p{font-size:14.5px;line-height:1.75;color:var(--soft);}
.rec .who{margin-top:18px;font-size:13.5px;font-weight:800;color:var(--char);}
.rec .who span{display:block;font-weight:600;color:var(--faint);margin-top:3px;font-size:12.5px;letter-spacing:.02em;}
.dark .rec{border-color:var(--cline);background:rgba(240,238,233,.05);}
.dark .rec:hover{border-color:var(--cream);}
.dark .rec p{color:var(--csoft);}
.dark .rec .who{color:var(--cream);}
.dark .rec .who span{color:rgba(240,238,233,.55);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s !important;animation-delay:0s !important;transition-duration:.01s !important;}
  html{scroll-behavior:auto;}
}