html,body{margin:0;padding:0}img{max-width:100%;height:auto}
:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}

:root{--cream:#F7F1E7;--sand:#EFE7DA;--clay:#E7DAC9;--soft2:#5C5045;--ink:#2E2823;--soft:#6E6255;--rust:#B14F45;--rust2:#9A3F34;--mark:#D97268;--rule:#D6B496;--hair:rgba(46,40,35,.12)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:'Shippori Mincho',Georgia,serif;width:1440px;max-width:100%;overflow-x:hidden}
.eb{font-size:10.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--rust)}
.eb.r:after{content:"";display:block;width:70px;height:1px;background:var(--mark);margin:12px 0 0}

/* ── ACT ONE ─────────────────────────────── */
.act1{position:relative;height:1080px;overflow:hidden;background:#171114}
.act1 .plate{position:absolute;top:76px;left:auto;right:34px;width:740px;opacity:1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.act1 .veil{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(23,17,20,.90) 0%, rgba(23,17,20,.72) 30%, rgba(23,17,20,.16) 46%, rgba(23,17,20,0) 60%),
  linear-gradient(180deg, rgba(23,17,20,.55) 0%, rgba(23,17,20,0) 20%, rgba(23,17,20,0) 66%, rgba(23,17,20,.70) 100%)}
.act1 .prosc{position:absolute;top:0;left:0;width:1440px;height:1080px}
.act1 .navscrim{position:absolute;top:0;left:0;right:0;height:170px;z-index:4;
  background:linear-gradient(180deg, rgba(23,17,20,.88) 0%, rgba(23,17,20,.52) 46%, rgba(23,17,20,0) 100%)}
.nav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:36px 60px;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:#F7F1E7;z-index:5}
.nav .logo{font-weight:600;font-size:14px;letter-spacing:.24em}
.nav ul{display:flex;gap:30px;list-style:none;opacity:.92}
.nav .menu{display:none}
.act1 .copy{position:absolute;left:96px;bottom:126px;width:560px;z-index:4}
.act1 .eb{color:#F0C8C2}
.act1 .eb.r:after{background:#F0C8C2}
.act1 h1{color:#F7F1E7;font-weight:400;font-size:64px;line-height:1.06;margin:22px 0 0;letter-spacing:.004em}
.act1 h1 em{font-style:italic;color:#F0C8C2}
.act1 .stand{color:#F7F1E7;opacity:.9;font-size:16.5px;line-height:1.76;max-width:470px;margin:22px 0 0}
.cta{display:inline-block;margin-top:32px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#F0C8C2;text-decoration:none;border-bottom:1px solid rgba(240,200,194,.5);padding-bottom:6px}

/* ── ACT TWO · drawn first ──────────────── */
.act2{background:var(--clay);padding:118px 96px 130px;margin-top:0}
.a2head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px}
.a2head h2{font-weight:400;font-size:46px;line-height:1.14;max-width:620px}
.a2head p{color:var(--soft2);font-size:15.5px;line-height:1.74;max-width:390px;padding-bottom:8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:58px 0 0;align-items:end}
.pair figure{position:relative}
.pair img{width:100%;display:block}
.pair .l img{border:1px solid var(--hair)}
.pair .r{z-index:2}
.pair img{box-shadow:0 20px 48px rgba(46,40,35,.20)}
.cap{margin-top:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft2)}
.pair .r .cap{position:static}





/* ── ACT SEVEN · case studies ───────────── */
.act7{background:var(--sand);padding:104px 96px 118px}
.act7 .eb{color:var(--rust2)}
.act7 .eb.r:after{background:var(--mark)}
.a7head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px}
.a7head h2{font-weight:400;font-size:44px;line-height:1.14;margin-top:22px}
.a7head p{color:var(--soft2);font-size:15.5px;line-height:1.74;max-width:400px;padding-bottom:8px}
.feat{display:grid;grid-template-columns:1fr 420px;gap:0 60px;margin:58px 0 0;align-items:center}
.feat img{width:100%;display:block;box-shadow:0 22px 54px rgba(46,40,35,.24)}
.feat .k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--rust2)}
.feat h3{font-weight:400;font-size:31px;line-height:1.18;margin:14px 0 0}
.feat .sub{font-style:italic;color:var(--soft2);font-size:17px;margin:8px 0 0}
.feat p.b{font-size:15.5px;line-height:1.76;color:var(--ink);margin:18px 0 0}
.feat dl{display:grid;grid-template-columns:96px 1fr;gap:7px 0;margin:20px 0 0;
  font-size:11px;letter-spacing:.06em}
.feat dt{color:var(--rust2);text-transform:uppercase;letter-spacing:.18em;font-size:9px;padding-top:2px}
.feat dd{margin:0;color:var(--soft2)}
.feat .go{display:inline-block;margin-top:24px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rust2);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:6px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px;margin:76px 0 0}
.four a{text-decoration:none;color:inherit;display:block}
.four img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;
  box-shadow:0 16px 40px rgba(46,40,35,.20)}
.four .k{margin-top:15px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--rust2)}
.four h3{font-weight:400;font-size:19px;line-height:1.26;margin:8px 0 0}
.four .soon{display:inline-block;margin-top:8px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft2);border:1px solid var(--hair);padding:3px 7px}
.allcs{margin:66px 0 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rust2)}

/* ── ACT SIX · proof ────────────────────── */
.act6{background:#2E2823;padding:104px 96px 110px}
.a6head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px}
.a6head h2{color:#F7F1E7;font-weight:400;font-size:44px;line-height:1.14;margin-top:22px}
.a6head p{color:#F7F1E7;opacity:.82;font-size:15.5px;line-height:1.74;max-width:400px;padding-bottom:8px}
.a6 .eb{color:#F0C8C2}
.a6 .eb.r:after{background:#F0C8C2}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 60px;margin:56px 0 0}
.cols3 h3{font-weight:500;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:#F0C8C2;margin:0 0 18px}
.cols3 ul{list-style:none;padding:0;margin:0}
.cols3 li{font-size:15.5px;padding:13px 0;border-bottom:1px solid rgba(247,241,231,.16)}
.cols3 li a{color:#F7F1E7;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:rgba(240,200,194,.45)}
.cols3 li a:hover{color:#F0C8C2;text-decoration-color:#F0C8C2}
.rotwrap{margin:76px 0 0;padding:36px 0 0;border-top:1px solid rgba(247,241,231,.22)}
.rot{position:relative;overflow:hidden;transition:height .55s ease}
.rot blockquote{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;
  transition:opacity .7s ease;pointer-events:none}
.rot blockquote.on{opacity:1;pointer-events:auto}
.rot p{color:#F7F1E7;font-size:22px;line-height:1.58;max-width:900px;margin:0}
.rot cite{display:block;margin-top:20px;font-style:normal;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:#F0C8C2}
.dots{display:flex;gap:10px;margin:34px 0 0}
.dots button{background:none;border:0;padding:6px 4px;cursor:pointer;
  font-family:inherit;font-size:9.5px;letter-spacing:.18em;color:rgba(247,241,231,.42);
  border-bottom:1px solid rgba(247,241,231,.22)}
.dots button.on{color:#F0C8C2;border-bottom-color:#F0C8C2}
.dots button:focus-visible{outline:2px solid #F0C8C2;outline-offset:3px}
@media (prefers-reduced-motion: reduce){.rot,.rot blockquote{transition:none}}

/* ── ACT FIVE · luxury experiences ──────── */
.act5{position:relative;background:var(--cream)}
.a5band{position:relative;height:720px;overflow:hidden}
.a5band img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.a5band .scrim{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(20,16,14,.90) 0%, rgba(20,16,14,.88) 30%, rgba(20,16,14,.84) 46%, rgba(20,16,14,.30) 64%, rgba(20,16,14,.04) 100%),
  linear-gradient(180deg, rgba(20,16,14,.40) 0%, rgba(20,16,14,0) 26%, rgba(20,16,14,0) 62%, rgba(20,16,14,.44) 100%)}
.a5band .copy{position:absolute;left:96px;top:50%;transform:translateY(-50%);width:560px}
.a5band .eb{color:#F0C8C2}
.a5band .eb.r:after{background:#F0C8C2}
.a5band h2{color:#F7F1E7;font-weight:400;font-size:48px;line-height:1.12;margin:22px 0 0}
.a5band h2 em{font-style:italic;color:#F0C8C2}
.a5band p{color:#F7F1E7;opacity:.92;font-size:16.5px;line-height:1.76;max-width:500px;margin:22px 0 0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;padding:96px 96px 0}
.trio figure img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 20px 48px rgba(46,40,35,.20)}
.trio .cap{margin-top:15px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft2)}
.book{padding:80px 96px 0}
.book .hd{font-size:10.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--rust)}
.book .places{margin-top:16px;font-size:21px;line-height:1.6;color:var(--ink);max-width:900px}
.book .bookmore{display:inline-block;margin-top:22px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rust);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:6px}
.svcs{padding:64px 96px 118px}
.svcs .hd{font-size:10.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--rust);
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.svcs ul{list-style:none;padding:0;margin:0;columns:2;column-gap:80px}
.svcs li{padding:17px 0;border-bottom:1px solid var(--hair);font-size:17px;
  display:flex;justify-content:space-between;align-items:baseline;break-inside:avoid}
.svcs li i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--rust)}

/* ── ACT FOUR · bespoke ─────────────────── */
.act4{position:relative;background:#171114;padding:104px 96px 110px;overflow:hidden}
.a4{display:grid;grid-template-columns:360px 1fr;gap:0 88px;align-items:center;max-width:1180px;margin:0 auto}
.a4 .card{background:#fff;padding:14px;box-shadow:0 26px 70px rgba(0,0,0,.55);transform:rotate(-1.6deg)}
.a4 .card img{display:block;width:100%}
.a4 .card span{display:block;padding:12px 2px 14px;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--soft2)}
.a4 .eb{color:#F0C8C2}
.a4 .eb.r:after{background:#F0C8C2}
.a4 h2{color:#F7F1E7;font-weight:400;font-size:44px;line-height:1.14;margin:22px 0 0}
.a4 h2 em{font-style:italic;color:#F0C8C2}
.a4 p{color:#F7F1E7;opacity:.9;font-size:16.5px;line-height:1.76;max-width:470px;margin:22px 0 0}

/* ── ACT THREE · the studio wall ────────── */
.act3{position:relative;margin:0;padding:104px 0 130px;background:var(--cream)}
.a3head{padding:0 96px;display:flex;align-items:flex-end;justify-content:space-between;gap:60px}
.a3head h2{font-weight:400;font-size:46px;line-height:1.14;max-width:560px}
.a3head p{color:var(--soft);font-size:15.5px;line-height:1.74;max-width:420px;padding-bottom:8px}
.wall{position:relative;margin:52px 96px 0;columns:5;column-gap:30px}
.pin{break-inside:avoid;background:#fff;padding:12px 12px 0;margin:0 0 34px;
  box-shadow:0 18px 44px rgba(46,40,35,.20);display:inline-block;width:100%}
.pin img{display:block;width:100%}
.pin span{display:block;padding:11px 2px 12px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft2)}
.pin:nth-child(1){transform:rotate(-2.2deg)}
.pin:nth-child(2){transform:rotate(1.5deg)}
.pin:nth-child(3){transform:rotate(-1.1deg)}
.pin:nth-child(4){transform:rotate(2.1deg)}
.pin:nth-child(5){transform:rotate(-1.7deg)}
.pin:nth-child(6){transform:rotate(1.8deg)}
.pin:nth-child(7){transform:rotate(-1.4deg)}
.pin:nth-child(8){transform:rotate(2.4deg)}
.pin:nth-child(9){transform:rotate(-2.0deg)}
.pin:nth-child(10){transform:rotate(1.2deg)}
.more{margin:6px 96px 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rust)}
.note{padding:26px 96px 60px;background:var(--cream);text-align:center;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}




/* ── ACT EIGHT · the close ──────────────── */
.act8{background:var(--cream);padding:118px 96px 124px;text-align:center}
.act8 .eb{color:var(--rust)}
.act8 .eb:after{content:"";display:block;width:70px;height:1px;background:var(--mark);margin:12px auto 0}
.act8 h2{font-weight:400;font-size:46px;line-height:1.16;margin:24px auto 0;max-width:760px}
.act8 p{color:var(--soft2);font-size:16.5px;line-height:1.76;max-width:560px;margin:22px auto 0}
.doors{display:flex;gap:38px;justify-content:center;align-items:baseline;margin:38px 0 0;flex-wrap:wrap}
.doors a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding-bottom:7px}
.doors .first{color:var(--rust);border-bottom:1px solid var(--rule)}
.doors .second{color:var(--soft2);border-bottom:1px solid var(--hair)}

/* ── FOOTER ─────────────────────────────── */
.foot{background:#2E2823;padding:88px 96px 46px;color:#F7F1E7}
.footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:0 56px}
.foot .mark{font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase}
.foot .line{margin-top:16px;font-size:13.5px;line-height:1.85;opacity:.72;max-width:230px}
.foot h4{font-weight:500;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:#F0C8C2;margin:0 0 16px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 11px}
.foot a{color:#F7F1E7;text-decoration:none;font-size:14px;opacity:.86}
.foot a:hover{opacity:1;color:#F0C8C2}
.foot .social{display:flex;flex-wrap:wrap;gap:12px 18px;margin:18px 0 0;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase}
.footrule{height:1px;background:rgba(247,241,231,.18);margin:56px 0 20px}
.footend{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6;flex-wrap:wrap;gap:12px}
@media (max-width: 1000px){
  .act8{padding:70px var(--pad) 76px}
  .act8 h2{font-size:28px}
  .doors{gap:22px;flex-direction:column;align-items:center}
  .foot{padding:64px var(--pad) 40px}
  .footgrid{grid-template-columns:1fr 1fr;gap:38px 26px}
  .foot a{font-size:13px}
  .foot .social{gap:10px 14px;font-size:9px;letter-spacing:.14em}
  .foot .line{max-width:none}
  .footend{flex-direction:column;gap:8px}
}

/* ── MOTION · weight on the scroll, and quiet reveals ── */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.08s}.rev.d2{transition-delay:.16s}.rev.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .rev{opacity:1;transform:none;transition:none}
}

/* ── NARROW SCREENS ─────────────────────── */
@media (max-width: 1000px){
  /* WCAG 2.2 AA, 2.5.8 Target Size (Minimum) — every link a thumb has to hit
     must clear 24px. Twenty-two were sitting at 20-22px. */
  a{ }
  .cta, .feat .go, .book .bookmore, .doors a, .more,
  .a6 a, .act6 a, .foot .cols a, .foot .social a{
    display:inline-block; min-height:26px; padding-top:3px; padding-bottom:7px}
  .act6 li, .foot .cols li{margin-bottom:4px}

  body{width:100%}
  :root{--pad:22px}

  /* ACT ONE · full-height stage, artwork bleeding, words over the dark */
  .act1{height:auto;min-height:100svh;padding:0;display:block;position:relative}
  .act1 .prosc{display:none}
  .act1 .navscrim{height:110px;z-index:6}
  .nav{position:absolute;top:0;left:0;right:0;z-index:7;padding:20px var(--pad);
    font-size:10px;letter-spacing:.16em}
  .nav ul{display:none}
  .nav .menu{display:block;letter-spacing:.2em}
  .act1 .plate{position:absolute;top:74px;right:-16%;width:128%;max-width:none;margin:0;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
  .act1 .veil{display:block;background:
    linear-gradient(180deg,rgba(23,17,20,.55) 0%,rgba(23,17,20,0) 14%,
    rgba(23,17,20,0) 36%,rgba(23,17,20,.93) 57%,rgba(23,17,20,1) 66%,rgba(23,17,20,1) 100%)}
  .act1 .copy{position:absolute;left:0;right:0;bottom:0;width:auto;padding:0 var(--pad) 46px;z-index:5}
  .act1 h1{font-size:40px;line-height:1.06}
  .act1 .stand{font-size:15.5px;max-width:none;margin-top:16px}
  .cta{margin-top:24px}

  /* shared section rhythm */
  .act2,.act4,.act6,.act7{padding:64px var(--pad)}
  .act3{padding:64px 0 72px}
  .a3head,.book,.svcs{padding-left:var(--pad);padding-right:var(--pad)}
  .a2head,.a3head,.a6head,.a7head{display:block}
  .a2head h2,.a3head h2,.a6head h2,.a7head h2,.a4 h2,.a5band h2{font-size:28px;max-width:none}
  .a2head p,.a3head p,.a6head p,.a7head p{max-width:none;margin-top:14px;padding-bottom:0;font-size:15px}

  /* ACT TWO */
  .pair{grid-template-columns:1fr;gap:26px;margin-top:32px}
  .pair img{box-shadow:0 12px 30px rgba(46,40,35,.18)}

  /* ACT THREE · a rail you swipe, not ten screens you scroll */
  .wall{columns:auto;margin:30px 0 0;padding:4px var(--pad) 18px;
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  .pin{flex:0 0 156px;width:156px;margin:0;padding:8px 8px 0;scroll-snap-align:start;
    transform:none !important;box-shadow:0 10px 24px rgba(46,40,35,.18)}
  .pin img{height:190px;object-fit:cover}
  .pin span{padding:8px 1px 9px;font-size:8.5px}
  .more{margin:14px var(--pad) 0}

  /* ACT FOUR */
  .a4{grid-template-columns:1fr;gap:26px}
  .a4 .card{max-width:250px}
  .a4 p{font-size:15px;max-width:none}

  /* ACT FIVE · the band stops being an overlay */
  .act5{background:var(--cream)}
  .a5band{height:auto;background:#171114}
  .a5band img{height:290px;object-position:50% 56%}
  .a5band .scrim{display:none}
  .a5band .copy{position:static;transform:none;width:auto;padding:30px var(--pad) 34px}
  .a5band p{max-width:none;font-size:15px}
  .trio{padding:56px 0 0;grid-template-columns:none;display:flex;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-left:var(--pad);padding-right:var(--pad)}
  .trio figure{flex:0 0 74%;scroll-snap-align:start}
  .book{padding-top:52px}
  .book .places{font-size:17px}
  .svcs{padding:46px var(--pad) 72px}
  .svcs ul{columns:1}
  .svcs li{font-size:15.5px;padding:14px 0}

  /* ACT SEVEN */
  .feat{grid-template-columns:1fr;gap:22px;margin-top:32px}
  .feat h3{font-size:25px}
  .feat p.b{font-size:15px}
  .four{grid-template-columns:1fr 1fr;gap:26px 16px;margin-top:44px}
  .four h3{font-size:15.5px}
  .four .k{font-size:8px}
  .allcs{margin-top:44px}

  /* ACT SIX */
  .cols3{grid-template-columns:1fr 1fr;gap:0 20px;margin-top:34px}
  .cols3 li{font-size:13.5px;padding:11px 0}
  .cols3 h3{font-size:8.5px}
  .cols3 > div:last-child{grid-column:1 / -1;margin-top:26px}
  .rotwrap{margin-top:48px}
  .rot p{font-size:17px}
  .note{padding:26px var(--pad) 56px}
}
@media (max-width: 620px){
  .footgrid{grid-template-columns:1fr;gap:32px 0}
  .act1 h1{font-size:33px}
  .a2head h2,.a3head h2,.a6head h2,.a7head h2,.a4 h2,.a5band h2{font-size:25px}
  .feat h3{font-size:22px}
  .rot p{font-size:16px}
  .trio figure{flex:0 0 82%}
}


#brx-header{display:none!important}
article.post-53868 > h1:first-child{display:none!important}
body{display:block!important}
#brx-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}

/*__temFix 29 Aug 2026 — link sizes, footer headings, site footer. Delete this block and change the three .foot h3 back to h4 to undo.*/
body.page-id-53868 #brx-footer{display:none!important}
body.page-id-53868 .foot h3{font-family:Prata,serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#F0C8C2;margin:0 0 9px;font-weight:400;line-height:normal}
/*__temFootHeading: was var(--rust) #B14F45, which is 2.82:1 on the dark footer. #F0C8C2 is 9.52:1 and is already used in this design on the numbered buttons. #E09A93 is 6.38:1 if a warmer rust is preferred.*/
body.page-id-53868 .foot a{display:inline-block;padding-block:6px}
body.page-id-53868 .dots button{min-width:24px;min-height:24px}
@media (max-width:700px){
 body.page-id-53868 .foot a{padding-block:12px}
 body.page-id-53868 .dots button{min-width:44px;min-height:44px}
}

/*__temFirstScreen 29 Aug 2026 — the opening panel was a fixed 1080px tall with the copy pinned 126px off its bottom, so on a laptop the "We do two things" sentence and the button fell below the fold. The panel is now the height of the screen, capped at 1080. The opening eyebrow and button were also lifted off 10.5px. Delete this block to undo.*/
@media (min-width:768px){
 body.page-id-53868 .act1{height:min(1080px,100svh);min-height:620px}
 body.page-id-53868 .plate{height:calc(100% - 118px);width:auto;max-width:56vw}
}
body.page-id-53868 .act1 .eb{font-size:13.5px;letter-spacing:.28em}
body.page-id-53868 .act1 .cta{font-size:12px}

/*__temColour v3, 29 Aug 2026 — dusky rose lightened to #B99095 so the house ink #2E2823 works on it again (5.18 against a 4.5 minimum) instead of a one-off near-black. Sage stays at Christopher's #859260, which needs the darker #0F0D0B (5.80). Delete this block to go back to beige.*/
body.page-id-53868 .act2{background:#B99095}
body.page-id-53868 .act2 h2,body.page-id-53868 .act2 p,body.page-id-53868 .act2 .cap,body.page-id-53868 .act2 .eb{color:#2E2823}
body.page-id-53868 .act4{background:#859260}
body.page-id-53868 .act4 h2,body.page-id-53868 .act4 h2 em,body.page-id-53868 .act4 h2 i,body.page-id-53868 .act4 p,body.page-id-53868 .act4 .eb,body.page-id-53868 .act4 a,body.page-id-53868 .act4 .cta{color:#0F0D0B}
body.page-id-53868 .act4 .cta{border-bottom-color:#0F0D0B}

/*__temHeadFit 29 Aug 2026 — the new heading "Every design we’ve produced" needs 636px at 46px and the column is 620, so it broke onto three lines with "produced" stranded. 43px fits with room to spare. Scoped to desktop so the narrow-screen size is untouched. Delete this block to undo.*/
@media (min-width:768px){body.page-id-53868 .a2head h2{font-size:43px}}

/*__temHeadBalance 29 Aug 2026 — the new paragraph is roughly double the old one, so the column split was rebalanced: heading 580 wide at 41px (it needs 566 for its first line), paragraph 430. 580 + 60 gap + 430 = the 1070 available. Desktop only. Delete this block to undo.*/
@media (min-width:768px){
 body.page-id-53868 .a2head h2{font-size:41px;max-width:580px}
 body.page-id-53868 .a2head p{max-width:430px}
}

/*__temPairHead 29 Aug 2026 — label above the two pictures. Level 3 so the heading order stays correct under the level 2 above it, and styled explicitly here rather than inheriting a generic h3, which would render it as a large serif heading. Ink on the rose measures 5.18. Delete this block and the h3 to undo.*/
body.page-id-53868 .act2 .pairhead{font-family:Prata,serif;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#2E2823;font-weight:400;margin:52px 0 0;line-height:normal}
body.page-id-53868 .act2 .pairhead + .pair{margin-top:18px}

/*__temPairSize 29 Aug 2026 — the two pictures were the same width but different heights (346 and 395) because the sources are 3:2 and 1.31:1. Both now sit in the same 1.4:1 box. The crop is small either way: about 18px off each side of the Sherlock room, about 12px off the top and bottom of Swan Lake. Delete this block to go back to ragged tops.*/
body.page-id-53868 .act2 .pair{align-items:start}
body.page-id-53868 .act2 .pair img{aspect-ratio:1.4/1;object-fit:cover;object-position:center;height:auto}

/*__temStraight 29 Aug 2026 — the Straight Answers section, Christopher’s own copy, placed after the case studies so the money question is answered a third of the way down instead of at the very bottom. Short direct sentences are what Google’s AI answers lift. Delete this block and the .act9 section to undo.*/
body.page-id-53868 .act9{background:#F7F1E7;padding:118px 96px 130px}
body.page-id-53868 .a9head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin:0 0 54px}
body.page-id-53868 .a9head h2{font-family:Prata,serif;font-weight:400;font-size:41px;line-height:1.14;max-width:560px;color:#2E2823;margin:0}
body.page-id-53868 .a9head p{color:var(--soft2);font-size:15.5px;line-height:1.74;max-width:390px;padding-bottom:8px;margin:0}
body.page-id-53868 .qa{display:grid;grid-template-columns:1fr 1fr;gap:40px 60px}
body.page-id-53868 .qa-row h3{font-family:Prata,serif;font-size:19px;line-height:1.3;margin:0 0 10px;color:#2E2823;font-weight:400;letter-spacing:0;text-transform:none}
body.page-id-53868 .qa-row p{font-size:15.5px;line-height:1.74;color:var(--soft2);margin:0}
body.page-id-53868 .testi{margin:66px 0 0;border-top:1px solid rgba(214,180,150,.55);padding:44px 0 0;max-width:920px}
body.page-id-53868 .testi blockquote{margin:0;font-family:Prata,serif;font-size:21px;line-height:1.52;color:#2E2823}
body.page-id-53868 .testi figcaption{margin:20px 0 0;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft2)}
@media (max-width:767px){
 body.page-id-53868 .act9{padding:64px var(--pad)}
 body.page-id-53868 .a9head{display:block}
 body.page-id-53868 .a9head h2{font-size:28px;max-width:none}
 body.page-id-53868 .a9head p{max-width:none;margin-top:14px;padding-bottom:0}
 body.page-id-53868 .qa{grid-template-columns:1fr;gap:30px}
 body.page-id-53868 .testi blockquote{font-size:18px}
}

/*__temQAopen 29 Aug 2026 — the five questions open and close instead of sitting as a wall of text. One column, hairline between each, first one open. All the answers stay in the page code so search engines and screen readers still read every word. Delete this block, the script below and the button markup to go back to plain text.*/
body.page-id-53868 .act9 .qa{display:block;max-width:920px}
body.page-id-53868 .act9 .qa-row{border-top:1px solid rgba(214,180,150,.55)}
body.page-id-53868 .act9 .qa-row:last-child{border-bottom:1px solid rgba(214,180,150,.55)}
body.page-id-53868 .act9 .qa-row h3{margin:0}
body.page-id-53868 .act9 .qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:none;border:0;cursor:pointer;text-align:left;padding:26px 2px;font-family:Prata,serif;font-size:19px;line-height:1.3;color:#2E2823;letter-spacing:0;text-transform:none}
body.page-id-53868 .act9 .qa-mark{flex:0 0 auto;position:relative;width:15px;height:15px}
body.page-id-53868 .act9 .qa-mark::before,body.page-id-53868 .act9 .qa-mark::after{content:"";position:absolute;background:#B14F45;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
body.page-id-53868 .act9 .qa-mark::before{left:0;top:7px;width:15px;height:1px}
body.page-id-53868 .act9 .qa-mark::after{left:7px;top:0;width:1px;height:15px}
body.page-id-53868 .act9 .qa-row.open .qa-mark::after{transform:scaleY(0)}
body.page-id-53868 .act9 .qa-a{overflow:hidden;max-height:0;transition:max-height .42s cubic-bezier(.22,.61,.36,1)}
body.page-id-53868 .act9 .qa-a.open{max-height:420px}
body.page-id-53868 .act9 .qa-a p{font-size:15.5px;line-height:1.74;color:var(--soft2);margin:0 0 28px;max-width:640px}
body.page-id-53868 .act9 .qa-q:focus-visible{outline:2px solid #B14F45;outline-offset:3px}
@media (max-width:767px){
 body.page-id-53868 .act9 .qa-q{font-size:17px;padding:22px 2px}
 body.page-id-53868 .act9 .qa-a.open{max-height:640px}
}
@media (prefers-reduced-motion:reduce){
 body.page-id-53868 .act9 .qa-a,body.page-id-53868 .act9 .qa-mark::before,body.page-id-53868 .act9 .qa-mark::after{transition:none}
}

/*__temCalc 29 Aug 2026 — the 25% rule from Christopher’s own copy, made into a slider. Range £10,000 to £250,000 in £5,000 steps, starting at £100,000 — all four numbers are easy to change here. Delete this block, the script and the .calc markup to go back to plain text.*/
body.page-id-53868 .act9 .qa-a.open{max-height:760px}
body.page-id-53868 .calc{margin:6px 0 30px;max-width:560px}
body.page-id-53868 .calc-lab{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft2);margin:0 0 18px}
body.page-id-53868 .calc-range{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;cursor:pointer;display:block;margin:0}
body.page-id-53868 .calc-range::-webkit-slider-runnable-track{height:1px;background:rgba(46,40,35,.28)}
body.page-id-53868 .calc-range::-moz-range-track{height:1px;background:rgba(46,40,35,.28)}
body.page-id-53868 .calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#B14F45;border:0;margin-top:-10.5px}
body.page-id-53868 .calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#B14F45;border:0}
body.page-id-53868 .calc-range:focus-visible{outline:2px solid #B14F45;outline-offset:6px}
body.page-id-53868 .calc-out{font-family:Prata,serif;font-size:27px;line-height:1.3;color:#2E2823;margin:22px 0 0}
body.page-id-53868 .calc-to{color:#B14F45}
body.page-id-53868 .calc-note{font-size:12px;line-height:1.6;color:var(--soft2);margin:10px 0 0}
@media (max-width:767px){
 body.page-id-53868 .act9 .qa-a.open{max-height:940px}
 body.page-id-53868 .calc-out{font-size:22px}
}

/*__temQuoteWide 29 Aug 2026 — third attempt, and the right one. The questions now use the whole 1070 width, which is what removes the gap on the right. The quote gets its own full-width moment beneath: 268 characters needs a wide measure, not a 372px column where it ran to twelve lines with "wow!" stranded on its own. Answers are capped at 720 so the reading line stays comfortable even though the rows are full width. Delete this block and unwrap .qa-wrap to undo.*/
body.page-id-53868 .act9 .qa-wrap{display:block}
body.page-id-53868 .act9 .qa{max-width:none;width:100%}
body.page-id-53868 .act9 .qa-a p{max-width:720px}
body.page-id-53868 .act9 .testi{position:static;background:none;border:0;padding:0;margin:96px auto 0;max-width:880px;text-align:center;width:auto}
body.page-id-53868 .act9 .testi::before{content:"";display:block;width:70px;height:1px;background:#B14F45;margin:0 auto 40px;position:static}
body.page-id-53868 .act9 .testi blockquote{margin:0;font-family:Prata,serif;font-size:27px;line-height:1.5;color:#2E2823;letter-spacing:.002em}
body.page-id-53868 .act9 .testi figcaption{margin:30px 0 0;padding:0;border:0;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft2);line-height:1.7}
@media (max-width:1023px){
 body.page-id-53868 .act9 .testi{margin-top:72px;max-width:640px}
 body.page-id-53868 .act9 .testi blockquote{font-size:22px}
}
@media (max-width:767px){
 body.page-id-53868 .act9 .testi{margin-top:56px;text-align:left}
 body.page-id-53868 .act9 .testi::before{margin:0 0 30px}
 body.page-id-53868 .act9 .testi blockquote{font-size:19px;line-height:1.55}
 body.page-id-53868 .act9 .qa-a p{max-width:none}
}

/*__temCutout 29 Aug 2026 — Christopher cut out on a transparent ground, standing on the cream beside the practical questions. No box and no shadow: it is a cut-out, and a frame round it would look pasted on. Tall and narrow is exactly the shape a side column wants, which is why this works where the quote did not. Below 1200 it moves under the questions at a smaller size. Delete this block and the .whoami figure to undo.*/
body.page-id-53868 .act9 .whoami{margin:44px 0 0}
body.page-id-53868 .act9 .whoami img{display:block;width:auto;height:auto;max-width:200px;max-height:575px}
body.page-id-53868 .act9 .whoami figcaption{margin:14px 0 0;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#2E2823;line-height:1.9}
body.page-id-53868 .act9 .whoami figcaption span{display:block;color:var(--soft2)}
@media (min-width:1200px){
 body.page-id-53868 .act9 .qa-wrap{display:flex;align-items:flex-start;gap:70px}
 body.page-id-53868 .act9 .qa{flex:1 1 auto;min-width:0;max-width:none}
 body.page-id-53868 .act9 .whoami{flex:0 0 260px;width:260px;margin:0;position:sticky;top:96px;text-align:center}
 body.page-id-53868 .act9 .whoami img{max-width:100%;max-height:none;margin:0 auto}
}

/*__temLogo 29 Aug 2026 — the top left was the words set in Prata, not the logo. This is the site's own logo from its settings, the complete lockup with the spiral, the glasses and the bowtie, as the house style requires. White on the near-black opening panel, so no recolouring needed. Delete this block and put the span back to undo.*/
body.page-id-53868 .act1 .nav img.logo{display:block;width:150px;height:auto;max-width:150px}
@media (max-width:767px){body.page-id-53868 .act1 .nav img.logo{width:112px}}

/*__temArrange 29 Aug 2026 — a way out at the foot of the questions, for anyone whose question is not on the list. The number is a real tel: link so it dials from a phone. Delete this block and the .qa-more paragraph to undo.*/
body.page-id-53868 .act9 .qa-more{margin:38px 0 0;font-size:15.5px;line-height:1.74;color:var(--soft2)}
body.page-id-53868 .act9 .qa-more a{display:inline-block;padding-block:6px;color:#B14F45;border-bottom:1px solid rgba(177,79,69,.45);text-decoration:none}
body.page-id-53868 .act9 .qa-more a:hover{border-bottom-color:#B14F45}
@media (max-width:767px){body.page-id-53868 .act9 .qa-more a{padding-block:12px}}