/*
Theme Name: Castle Farm Road
Theme URI: https://castlefarmroad.com
Author: Castle Farm Road
Description: The castlefarmroad.com site, built from the approved version 6 pages. One stylesheet, one template per page, no page builder.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary
Text Domain: castlefarmroad
*/

/* Generated by 05 Build/theme-build.py from assets/css/{home-mockup,home-v6,about-v6,services-v6,work-v6,contact-v6,review-v6}.css. Edit those and rebuild. */

/* ============================================================
   HOME, FROM THE MOCKUP CARRIE APPROVED — built 5 October 2026
   Loaded by _home-mockup-a.html only. Does not use site.css.
   Palette: the agreed World Of set. Accent brown is a stand-in
   (G, #7D6B5C) until Carrie picks a letter. Pictures marked
   stand-in are crops of her two photographs.
   ============================================================ */
:root{
  --ground:#FAF6F0; --cream2:#F1ECE1; --blush:#F2E0D8;
  --ink:#2B2420; --body:#57544E; --label:#958A7C; --line:#CFC9BF;
  --dark:#464D3B;     /* footer ground: the green, same as the buttons. Carrie, 5 Oct: "make green" */
  --accent:#464D3B;   /* the greyed green from her first mockup. Carrie, 5 Oct: try green instead of brown */
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --book:"Newsreader","Iowan Old Style",Georgia,serif;
  --ui:"Karla",-apple-system,"Segoe UI",system-ui,sans-serif;
  --gut:clamp(20px,3.4vw,52px); --nav:76px; --wide:1320px;
}
*{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--book);font-weight:300;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--gut);top:8px;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:20}
  color:#EDE6DA;font-size:12.5px;letter-spacing:.05em;text-align:center;padding:9px var(--gut)}

/* ---- type ---- */
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem, 1.2rem + 2.6vw, 3.4rem);line-height:1.08;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 .35em;text-wrap:balance}
h3{font-family:var(--ui);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 .5em}
.label{font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--body);
  margin:0 0 clamp(18px,2.6vh,30px);display:flex;align-items:center;gap:12px}
.label::after{content:"";width:28px;height:1px;background:var(--body);opacity:.6}
.sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem, 1rem + 1vw, 1.7rem);color:var(--ink);margin:0 0 .9em}
p{margin:0 0 1.1em}
.more{font-family:var(--book);color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.more:hover{border-bottom-color:var(--line)}
.center{text-align:center;margin-top:clamp(28px,4vh,44px)}

/* ---- header ---- */
.head{height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut)}
.head__brand{display:flex;flex-direction:column;gap:2px}
.brand{white-space:nowrap;display:inline-flex;align-items:baseline;font-family:var(--serif);font-weight:500;
  font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1}
.brand__big{font-size:1.32em;letter-spacing:.1em}
.brand__R{height:1.22em;width:auto;display:inline-block;vertical-align:baseline;position:relative;top:.25em;
  margin-right:-.56em;margin-left:.04em}
.brand__tail{position:relative;z-index:1}
.tagline{font-family:var(--book);font-style:italic;font-size:13.5px;color:var(--body);margin:0 0 0 2px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.nav a{padding:6px 0;border-bottom:1px solid transparent}
.nav a[aria-current]{border-bottom-color:var(--ink)}
.nav a:hover{border-bottom-color:var(--line)}
.btn{display:inline-block;background:var(--accent);color:var(--ground);font-family:var(--book);font-size:14.5px;
  padding:11px 20px;border-radius:999px;white-space:nowrap;border:1px solid var(--accent)}
.nav .btn{padding:10px 18px}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);border-radius:2px;padding:12px 22px}
.split .btn, .closing .btn{border-radius:2px;padding:12px 22px;font-size:15px}

/* ---- hero: one photograph, headline over its quiet side ---- */
.hero{position:relative;height:clamp(520px, calc(100svh - var(--nav) - 40px), 820px);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(250,246,240,.55) 0%, rgba(250,246,240,.38) 32%, rgba(250,246,240,.10) 50%, rgba(250,246,240,0) 62%)}
.hero__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--gut);max-width:min(640px, 52%)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem, 1.2rem + 3.2vw, 3.9rem);line-height:1.08;
  letter-spacing:-.012em;color:var(--ink);margin:0 0 clamp(18px,3vh,28px);text-wrap:balance}
.hero p{font-size:clamp(1rem, .9rem + .35vw, 1.15rem);line-height:1.6;color:var(--ink);max-width:36ch;margin:0 0 clamp(22px,3.6vh,36px)}
.hero p:last-child{margin-bottom:0}
.hero .btn--ghost{font-size:15px}

/* ---- pictures and the stand-in badge ---- */
.ph{position:relative;overflow:hidden;background:var(--cream2)}
.ph img{width:100%;height:100%;object-fit:cover}
/* a picture shown whole inside its tile, on the cream, instead of cropped to fill */
.ph--whole img{object-fit:contain;padding:6%}
.standin{position:absolute;left:8px;top:8px;font-family:var(--ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ground);background:rgba(43,36,32,.55);padding:3px 7px;pointer-events:none}

/* ---- 2 services ---- */
.services{background:var(--cream2);padding-block:clamp(44px,7vh,76px)}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.svc li{padding:0 clamp(16px,2.4vw,36px);text-align:center;border-left:1px solid var(--line)}
.svc li:first-child{border-left:0}
.svc .ph{aspect-ratio:4/3;margin:0 auto clamp(16px,2.4vh,24px);max-width:270px}
.svc p{font-size:14.5px;line-height:1.55;margin:0;max-width:28ch;margin-inline:auto}

/* ---- split bands: copy one side, photograph the other, to the edge ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.split__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,9vh,110px) var(--gut);
  max-width:calc(var(--wide) / 2);width:100%}
.split--photoRight .split__copy{justify-self:end;padding-right:clamp(36px,5vw,80px)}
.split--photoLeft .split__copy{justify-self:start;padding-left:clamp(36px,5vw,80px)}
.split__photo{min-height:clamp(380px,56vh,620px)}
.split__photo img{position:absolute;inset:0;object-position:50% 40%}
/* a landscape photograph in a split band: keep the subject whole on wide screens */
.split__photo--wide img{object-position:50% 30%}
@media (min-width:1500px){.split__photo--wide{min-height:clamp(480px,40vw,760px)}}
.split p{max-width:46ch}
.checks{list-style:none;margin:0 0 1.4em;padding:0;max-width:34ch}
.checks li{padding:10px 0 10px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--ink);font-size:16px}
.checks li::before{content:"\2713";position:absolute;left:0;top:10px;color:var(--label);font-family:var(--ui);font-size:14px}
.split--photoLeft{border-top:1px solid var(--line)}
.closing{background:var(--cream2)}
/* the closing band shows the whole laptop, smaller, with air around it. Carrie, 13 Oct: "make image smaller" */
.closing .split__photo{min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,64px)}
.closing .split__photo img{position:static;width:min(100%, 820px);height:auto;object-fit:contain}
.closing .split__photo{background:var(--cream2)}   /* was the blush; Carrie 5 Oct: "i dont love the pink with the green". Blush parked. */

/* ---- 4 work ---- */
.work{padding-block:clamp(56px,9vh,104px)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.tiles .ph{aspect-ratio:4/3;margin-bottom:16px}
.tiles p{font-size:15px;line-height:1.55;margin:0}

/* ---- footer, the dark band ---- */
.foot{background:var(--dark);color:#DDD8CC;padding:clamp(48px,7vh,76px) 0 28px;font-size:15px}
.foot a{color:#EDE6DA}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(28px,4vw,64px);margin-bottom:clamp(32px,5vh,52px)}
.foot__brand{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:#F4EEE4}
.foot__tag{font-style:italic;color:#BDB9A8;margin:.4em 0 0}
.foot h5{font-family:var(--ui);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#BDB9A8;margin:0 0 .9em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 .45em}
.foot__mail{margin:1.1em 0 0;font-size:15px}
.foot__mail a{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.foot__disc{font-size:13.5px;line-height:1.65;color:#BDB9A8;max-width:78ch;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin:0 0 22px}
.foot__base{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:#A6A393}

/* ---- phone and tablet ---- */
@media (max-width:980px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .svc li:nth-child(3){border-left:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles li:last-child{grid-column:1 / -1;max-width:calc(50% - 12px)}
  .split{grid-template-columns:1fr}
  .split__copy{max-width:none;padding:clamp(40px,7vh,64px) var(--gut)}
  .split--photoRight .split__copy,.split--photoLeft .split__copy{padding-inline:var(--gut)}
  .split__photo{min-height:0;aspect-ratio:4/3}
  .split--photoLeft .split__photo{order:-1}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:820px){
  :root{--nav:64px}
  .brand{font-size:15px;letter-spacing:.1em} .brand__R{margin-right:-.55em}
  .tagline{display:none}
  .nav{gap:14px;font-size:12.5px} .nav a{display:none} .nav .btn{display:inline-block;padding:9px 14px;font-size:13px}
  .hero{height:clamp(480px, calc(100svh - var(--nav) - 40px), 720px)}
  .hero::before{background:linear-gradient(180deg, rgba(250,246,240,.20) 0%, rgba(250,246,240,.55) 40%, rgba(250,246,240,.92) 100%)}
  .hero__in{max-width:100%;justify-content:flex-end;padding-bottom:44px}
  .hero__img{object-position:78% 40%}
  .svc{grid-template-columns:1fr}
  .svc li{border-left:0;padding-inline:0}
  .svc .ph{max-width:none}
  .tiles{grid-template-columns:1fr}
  .foot__base{flex-direction:column;gap:6px}
}


/* ============================================================
   HOME, VERSION 5 — 14 October 2026
   The top half of the Camille Styles home page, measured 14 Oct,
   in Castle Farm Road's own faces and palette. Loaded after
   home-mockup.css by _home-v5-a.html. The hero and footer are shared.
   Camille's measures kept: wordmark 54px; header 196px; lead 534 x 800;
   right cards 270 wide, staggered; feature 580 square; list rows 96px
   thumbnails; headings 48 / 40 / 24 / 18; kickers 12px, 1.2px tracking.
   ============================================================ */
                       /* the shared header is replaced by the masthead below */
:root{--tint:var(--cream2)}
.wrap{max-width:1296px}

/* ---- 1 masthead ---- */
.mast{background:var(--ground)}
.mast__row{display:flex;align-items:center;justify-content:space-between;height:110px;padding-top:26px}
.mast__mark{font-family:var(--serif);font-weight:500;font-size:54px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.mast__mark img{display:block;height:46px;width:auto}
.foot__brand img{display:block;height:20px;width:auto}
.mast__util{display:flex;gap:28px;font-family:var(--ui);font-size:16px;color:var(--ink)}
.mast__nav{display:flex;align-items:center;gap:clamp(22px,3.4vw,50px);height:86px;font-family:var(--serif);font-size:21px;color:var(--ink)}
.mast__nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.mast__nav .search{margin-left:auto;width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;position:relative}
.mast__nav .search::after{content:"";position:absolute;width:2px;height:9px;background:var(--ink);right:-5px;bottom:-7px;transform:rotate(-45deg)}

/* the shared hero, shorter here so the grid is close */
.hero{height:clamp(400px,58vh,560px)}

/* ---- shared card grammar ---- */
.card .img{display:block;overflow:hidden;background:var(--cream2)}
.card .img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(.19,.72,.18,1)}
.card .img:hover img{transform:scale(1.025)}
.card .img:focus-visible,.card h2 a:focus-visible,.list a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.kick{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--ui);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);margin:22px 0 12px}
.kick .date{font-family:var(--ui);color:var(--label);text-transform:none;letter-spacing:0}
.card h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin:0 0 8px;letter-spacing:0;text-transform:none}
.card h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card .line{font-size:17px;color:var(--body);margin:0;line-height:1.5}

/* ---- 2 the opening grid ---- */
.lead{padding:48px 0 72px}
.lead__grid{display:grid;grid-template-columns:534px 1fr;gap:clamp(40px,8vw,166px);align-items:start}
.lead .big .img{height:800px}
.lead .big h2{font-size:48px;line-height:1.1}
.lead__right{display:grid;grid-template-columns:repeat(2,270px);gap:40px 40px;justify-content:space-between;align-content:start}
.lead__right .card .img{height:270px}
.lead__right .card.sm h2{font-size:20px}
.lead__right .card .kick{margin:14px 0 8px}

/* ---- 3 the big one: full width, 800px tall as on Camille's page, words in white ---- */
.cover{position:relative;height:clamp(460px,70vh,720px);overflow:hidden;background:#C9BCB0}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.cover::before{content:"";position:absolute;inset:0;background:rgba(43,36,32,.08)}
.cover__words{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:clamp(28px,5vh,64px) var(--gut);color:#fff;background:linear-gradient(180deg,rgba(43,36,32,0) 0%,rgba(43,36,32,.55) 100%)}
.cover__words small{font-family:var(--ui);font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.cover__words h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.1;margin:12px 0 10px;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.cover__words p{font-family:var(--serif);font-size:19px;margin:0 0 14px;max-width:40ch}
.cover__words a{font-family:var(--ui);font-size:14px;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.cover__words a:hover,.cover__words a:focus-visible{border-bottom-color:#fff}

/* ---- 4 explore: four small squares, then one large with two beside it ---- */
.explore{padding:80px 0 72px}
/* 16 Oct, Carrie: "make smaller, when they get this big we lose quality". The sources are 800 to 1600px wide; keep every card under that. */
.explore .wrap{max-width:1176px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:72px}
.row4 .card .img{aspect-ratio:1/1}
.row4 .card h2{font-size:22px}
.mix{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.mix > .card .img{aspect-ratio:4/5}
.mix > .card h2{font-size:30px}
.mix__side{display:grid;gap:40px}
.mix__side .card .img{aspect-ratio:4/3}
.mix__side .card h2{font-size:22px}
.kick:empty{display:none}
.kick .date:empty{display:none}
.card .line:empty{display:none}
.card .kick{margin:18px 0 8px}

/* ---- (old trending rules, unused) ---- */
.trend{padding:80px 0 80px}
.trend .sec{font-family:var(--serif);font-weight:400;font-size:48px;margin:0 0 40px;letter-spacing:0;text-transform:none}
.trend__grid{display:grid;grid-template-columns:580px 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.trend .feature .img{height:580px}
.trend .feature h2{font-size:40px;line-height:1.12}
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.list li:first-child{padding-top:0}
.list .img{display:block;width:96px;height:96px;overflow:hidden;background:var(--cream2)}
.list .img img{display:block;width:100%;height:100%;object-fit:cover}
.list .kick{margin:0 0 6px;justify-content:flex-start;gap:12px}
.list h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;margin:0;letter-spacing:0;text-transform:none}
.list h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- 4 the closing on the dark band ---- */
.dark{background:var(--dark);color:#EDE6DA;padding:clamp(72px,12vh,120px) 0;text-align:center}
.dark__in{max-width:60ch;margin-inline:auto}
.dark h2{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.12;color:#F4EEE4;margin:0 0 .5em}
.dark p{font-size:18px;color:#D9D2CA;margin:0 0 1.5em}
.btn--light{background:#F4EEE4;color:var(--dark);border-color:#F4EEE4;border-radius:2px;padding:12px 22px;font-size:15px}

@media (prefers-reduced-motion:reduce){.card .img img{transition:none}.card .img:hover img{transform:none}}

@media (max-width:1100px){
  .lead__grid,.trend__grid{grid-template-columns:1fr}
  .lead .big .img,.trend .feature .img{height:auto;aspect-ratio:3/4}
  .trend .feature .img{aspect-ratio:1/1}
  .lead__right{grid-template-columns:repeat(2,1fr);justify-content:stretch}
  .lead__right .card .img{height:auto;aspect-ratio:1/1}
  .row4{grid-template-columns:repeat(2,1fr)}
  .mix{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mast__row{height:auto;flex-direction:column;align-items:flex-start;gap:12px;padding-top:18px}
  .mast__mark{font-size:30px} .mast__mark img{height:28px}
  .mast__util{font-size:14px;gap:18px}
  .mast__nav{height:auto;flex-wrap:wrap;gap:10px 18px;padding:14px 0;font-size:18px}
  .mast__nav .search{display:none}
  .lead__right{grid-template-columns:1fr 1fr;gap:20px}
  .row4{grid-template-columns:1fr 1fr;gap:20px}
  .lead .big h2{font-size:34px}
  .trend .sec{font-size:36px}
  .trend .feature h2{font-size:28px}
  .dark h2{font-size:30px}
}

/* a wide photograph shown whole inside a square box, on the cream, instead of cropped */
.card.whole .img{background:var(--cream2);display:flex;align-items:center;justify-content:center;padding:6%}
.card.whole .img img{object-fit:contain;height:auto}

.row4--second{margin-top:72px}
.mix--flip{margin-top:72px}
/* 16 Oct: the flipped band only reordered the cards, so the large card landed in the narrow column. Keep the wide column with the large card. */
@media (min-width:1101px){.mix--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.mix--flip > .card{order:2}
.mix--flip .mix__side{order:1}
@media (max-width:980px){.mix--flip > .card{order:1}.mix--flip .mix__side{order:2}}

.cover--second{height:clamp(440px,66vh,680px)}
.cover--second img{object-position:50% 55%}

/* 16 Oct: wide43 retired. A 4:3 large card is shorter than the two 4:3 cards stacked beside it; 4:5 matches them. */

/* the second wide moment: the photograph at its real size, never stretched, words beneath */
.wide2{padding:40px 0 80px}
.wide2 .wrap{max-width:1104px}
.wide2 .img{display:block;overflow:hidden;background:var(--cream2)}
.wide2 .img img{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto}
.wide2__cap{margin-top:22px}
.wide2__cap h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;margin:0;letter-spacing:0;text-transform:none}
.wide2__cap h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.wide2--mid{padding:16px 0 72px}
.wide2--mid .wrap{max-width:1204px}
.wide2--mid .img img{max-width:1100px}
.wide2__cap .line{font-size:17px;color:var(--body);margin:8px 0 0;max-width:48ch}

/* ---- the four doors under the hero: what we do, from-prices, to Services. 15 Oct ---- */
.doors{padding:56px 0 8px}
.doors__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.door{display:block;color:inherit}
.door img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cream2);transition:transform 900ms cubic-bezier(.19,.72,.18,1)}
.door picture{display:block;overflow:hidden}
.door:hover img{transform:scale(1.025)}
.door .kick{margin:18px 0 8px}
.door .kick span:first-child{font-family:var(--serif);font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.15}
.door__line{font-size:16px;line-height:1.5;color:var(--body);margin:0}
.door:hover .kick span:first-child{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:1100px){.doors__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.doors__grid{grid-template-columns:1fr;gap:28px}.doors{padding-top:40px}}
@media (prefers-reduced-motion:reduce){.door img{transition:none}.door:hover img{transform:none}}


/* ============================================================
   ABOUT on the version 6 look — 14 October 2026
   Loaded after home-mockup.css and home-v6.css by _about-v6-a.html.
   Masthead, kickers, dark closing and footer come from home-v6.css.
   ============================================================ */
.ab-open{padding:48px 0 0}
.ab-open h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 1.8vw,2.7rem);line-height:1.12;letter-spacing:0;color:var(--ink);margin:0 0 36px;max-width:22ch;text-wrap:balance}
.ab-open__photo img{display:block;width:100%;max-width:1296px;height:auto;margin:0 auto}

.ab-sec{padding:80px 0}
.ab-sec--tint{background:var(--cream2)}
.ab-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.ab-grid--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ab-copy h2,.ab-narrow h2,.ab-wide{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,1.05rem + 1.3vw,2.1rem);line-height:1.25;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 .8em;max-width:30ch}
.ab-wide{max-width:24ch;font-size:clamp(1.8rem,1.1rem + 2vw,2.8rem);line-height:1.15}
.ab-copy p:not(.kick),.ab-narrow p:not(.kick){font-size:17px;max-width:52ch;margin:0 0 1em;color:var(--body)}
.ab-em{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);margin-top:.3em}
.ab-tag{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--ink);margin-top:1.2em;padding-top:1em;border-top:1px solid var(--line);max-width:52ch}
.ab-photo img{display:block;width:100%;height:auto}
.ab-photo--tall img{max-width:520px;margin-left:auto}
.ab-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);max-width:900px;margin:36px 0 40px}
.ab-two div{border-top:1px solid var(--ink);padding-top:18px}
.ab-two h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 .4em}
.ab-two p:not(.kick){font-size:17px;margin:0;color:var(--body)}
.ab-narrow{max-width:62ch}
.ab-sec .kick{margin:0 0 16px}

@media (max-width:980px){
  .ab-grid,.ab-grid--flip{grid-template-columns:1fr}
  .ab-grid--flip .ab-photo{order:-1}
  .ab-photo--tall img{max-width:none;margin:0}
  .ab-two{grid-template-columns:1fr}
  .ab-sec{padding:56px 0}
}

/* the joint closing of Two perspectives: centred under both columns, with a rule above, so it reads as both of them */
.ab-both{max-width:900px;border-top:1px solid var(--line);padding-top:36px;margin-top:8px;text-align:center}
.ab-both p:not(.kick){font-size:17px;max-width:58ch;margin:0 auto 1em;color:var(--body)}
.ab-both .ab-em{margin-top:.3em}

/* ============================================================
   ABOUT, VERSION 7 — 18 October 2026, night. The studio picture opens the page; the people band; the story composed
   in two stacks with the pictures at different sizes. The cg stacks live in home-v10.css.
   ============================================================ */
.ab7-open .col__head h1{font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);line-height:1.08;margin:0 0 20px;max-width:16ch}
.ab7-open .col__head p{font-size:18px;line-height:1.55;color:var(--body);max-width:40ch;margin:0}
.ab7-people{padding:72px 0 48px}
.ab7-story .cap{max-width:40ch}
.ab7-story .cap__body{font-size:16px;max-width:44ch}
.ab7-story .col__quote p:first-child{font-size:30px}
.ab7-story .col__quote .cap{font-family:var(--book);font-size:16px;line-height:1.55;color:var(--body);max-width:44ch}
.ab7-story .col__quote .cap b{margin-bottom:8px}
/* the story reads as a page, not a caption: picture above, the words at full measure beside the next picture */
.ab7-story .cg{grid-template-columns:1fr;row-gap:0}
.ab7-story .cg__a,.ab7-story .cg__b{margin-top:0;gap:0}
.ab7-story .cp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:72px;align-items:center;margin:0 0 96px !important;max-width:none}
.ab7-story .cg__b .cp{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.ab7-story .cg__b .cp > picture{order:2}
.ab7-story .cp.cp--bleed-l,.ab7-story .cp.cp--bleed-r{margin-left:0 !important;margin-right:0 !important;width:auto}
.ab7-story .cp--bleed-l > picture{margin-left:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.ab7-story .cp--bleed-r > picture{margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.ab7-story .cp > picture img{width:100%;height:auto;display:block}
.ab7-story .cp .cap{margin:0;max-width:none;padding:0 !important;font-size:26px;line-height:1.25}
.ab7-story .cp .cap__body{font-size:17px;line-height:1.6;max-width:54ch;margin-top:16px}
.ab7-story .col__quote{display:block;margin:0 0 72px !important;max-width:620px}
@media (max-width:900px){.ab7-story .cp,.ab7-story .cg__b .cp{display:block;margin:0 0 48px !important}.ab7-story .cg__b .cp > picture{order:0}.ab7-story .cp > picture{margin:0 calc(-1 * var(--gut)) 16px !important}}


/* ============================================================
   SERVICES on the version 6 look — 14 October 2026
   Loaded after home-mockup.css and home-v6.css by _services-v6-a.html.
   ============================================================ */
.sv-open{padding:48px 0 40px}
.sv-open h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 1.8vw,2.7rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 18px}
.sv-open__line{font-size:18px;max-width:54ch;color:var(--body);margin:0 0 .7em}
.sv-open__line:last-child{margin-bottom:0}

/* start here: words left, photograph right, on the tint */
.sv-start{background:var(--cream2);padding:64px 0}
.sv-start__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.sv-start h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,1.1rem + 2vw,2.8rem);line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 14px}
.sv-start p:not(.kick){font-size:17px;color:var(--body);max-width:50ch;margin:0 0 22px}
.sv-start .btn{border-radius:2px;padding:12px 22px;font-size:15px}
.sv-start__photo img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}

/* the four groups: photograph left, words and a price list right; alternate sides */
.sv-groups{padding:24px 0 40px}
.sv{scroll-margin-top:24px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.sv:last-child{border-bottom:0}
.sv:nth-child(even) .sv__photo{order:2}
.sv__photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.sv h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.5rem);line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px;max-width:22ch}
.sv .line{font-size:17px;color:var(--body);margin:0 0 20px}
.sv .line:empty{display:none}
.sv .line{max-width:58ch}
.sv__hows{list-style:none;margin:0 0 26px;padding:0;max-width:560px}
.sv__hows li{padding:9px 0 9px 22px;position:relative;font-size:16px;line-height:1.5;color:var(--body)}
.sv__hows li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:1px;background:var(--ink)}
.sv__hows b{font-weight:400;color:var(--ink)}
.sv__list{list-style:none;margin:0;padding:0;max-width:560px}
.sv__list li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);font-size:16.5px;color:var(--ink)}
.sv__list li:last-child{border-bottom:1px solid var(--line)}
.sv__pricing{font-size:16px;margin:28px 0 0}
.sv__pricing a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.sv__more{font-size:15px;margin:-6px 0 16px}
.sv__more a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.sv__also{font-size:16px;color:var(--body);margin:14px 0 0;max-width:560px}
.sv__also a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.sv__list[hidden]{display:none}
.sv__list .px{font-family:var(--ui);font-size:14px;color:var(--body);white-space:nowrap}

/* the two packages, on the tint */
.sv-packs{background:var(--cream2);padding:64px 0 56px}
.sv-packs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:12px}
.pack{border-top:1px solid var(--ink);padding-top:20px}
.pack h2{font-family:var(--serif);font-weight:400;font-size:2rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 4px}
.pack .px{font-family:var(--ui);font-size:14px;letter-spacing:.06em;color:var(--body);margin:0 0 14px}
.pack p:not(.kick){font-size:17px;color:var(--body);margin:0;max-width:46ch}
.sv-how{max-width:62ch;margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.sv-how p:not(.kick){font-size:16px;color:var(--body);margin:0 0 .9em}
.sv-how .kick{margin:0 0 12px}

@media (max-width:980px){
  .sv-start__in,.sv,.sv-packs__grid{grid-template-columns:1fr}
  .sv:nth-child(even) .sv__photo{order:0}
  .sv{padding:40px 0}
}

/* ============================================================
   SERVICES, VERSION 7 — 18 October 2026, night. Her words; the four groups composed like Home (the cg stacks live in
   home-v10.css); How we work as three steps beside the drawings; the review as a door; the packages without prices.
   ============================================================ */
.sv7-open .gp-top__grid{display:block}
.sv7-open__who{font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--ink);max-width:40ch;margin:18px 0 0;border-left:2px solid var(--green,#5B6B4E);padding-left:18px}
.sv7__list{list-style:none;margin:14px 0 18px;padding:0;font-family:var(--book);font-size:15.5px;line-height:1.5;color:var(--body);max-width:40ch}
.sv7__list li{padding:5px 0;border-top:1px solid var(--line)}
.sv7__list li:last-child{border-bottom:1px solid var(--line)}
.sv7-how{padding:96px 0 72px}
.sv7-how h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 48px;max-width:18ch}
.sv7-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;align-items:start}
.sv7-step__art{display:block;width:150px;height:150px;margin:0 0 18px}
.sv7-step__art img{display:block;width:100%;height:auto}
.sv7-step h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 12px}
.sv7-step p{font-size:17px;line-height:1.55;color:var(--body);margin:0 0 14px;max-width:36ch}
.sv7-step__you{font-family:var(--serif);font-size:18px;color:var(--ink);border-top:1px solid var(--line);padding-top:12px}
.sv7-noneed{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink);max-width:40ch;margin:56px 0 0;border-left:2px solid var(--wine,#7A2E3B);padding-left:22px}
.sv7-review{background:var(--paper,#F4EFE6);padding:88px 0}
.sv7-review__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:center}
.sv7-review h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 18px;max-width:14ch}
.sv7-review p{font-size:17px;line-height:1.55;color:var(--body);max-width:50ch;margin:0 0 28px}
.sv7-review__ways{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.sv7-review__pic{margin:0}
.sv7-review__pic img{display:block;width:100%;height:auto}
.sv7-packs{padding:88px 0 72px}
.sv7-packs__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;margin-top:24px}
.sv7-pack h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 4px}
.sv7-pack__line{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin:0 0 12px}
.sv7-pack p{font-size:17px;line-height:1.55;color:var(--body);max-width:46ch;margin:0}
.sv7-packs__more{margin:40px 0 0}
@media (max-width:900px){
  .sv7-steps{grid-template-columns:1fr;row-gap:40px}
  .sv7-review__in,.sv7-packs__grid{display:block}
  .sv7-review__pic{margin-top:28px}
  .sv7-pack + .sv7-pack{margin-top:36px}
  .sv7-how,.sv7-review,.sv7-packs{padding:56px 0}
}


/* ============================================================
   WORK on the version 6 look — 14 October 2026
   ============================================================ */
.wk-open{padding:48px 0 24px}
.wk-open h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 1.8vw,2.7rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 14px;max-width:18ch}
.wk-open__line{font-size:18px;color:var(--body);max-width:52ch;margin:0 0 28px}
.wk-jump{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--ui);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);padding-bottom:24px;border-bottom:1px solid var(--line)}
.wk-jump a{border-bottom:1px solid transparent;padding-bottom:3px}
.wk-jump a:hover{border-bottom-color:var(--ink)}

.wk-sec{padding:64px 0 24px;scroll-margin-top:24px}
.wk-sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 2.2vw,3rem);line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 8px}
.wk-line{font-size:17px;color:var(--body);max-width:52ch;margin:0 0 36px}

/* a 6-column grid: squares take 2, wide pieces 3, tall pieces 2 across two rows */
.wk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 32px;grid-auto-flow:dense;align-items:start}
.wk{grid-column:span 2;min-width:0}
.wk.wide{grid-column:span 3}
.wk.tall{grid-column:span 2;grid-row:span 2}
.wk .img{display:block;overflow:hidden;background:var(--cream2);aspect-ratio:1/1}
.wk.wide .img{aspect-ratio:4/3}
.wk.tall .img{aspect-ratio:2/3}
.wk.tall .img img{object-position:50% 0}
/* 16 Oct: a 4:5 picture in a 2:3 frame lost its sides (Carrie: "bad crop"); tall45 is the 4:5 frame */
.wk.tall45{grid-column:span 2;grid-row:span 2}
.wk.tall45 .img{aspect-ratio:4/5}
.wk.tall45 .img img{object-position:50% 0}
.wk .img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(.19,.72,.18,1)}
.wk.whole .img{display:flex;align-items:center;justify-content:center;padding:5%}
.wk.tall.whole .img{padding:4%}
.wk.tall.whole .img img{max-height:100%;width:auto;max-width:100%}
.wk.whole .img img{object-fit:contain;height:auto}
.wk a.img:hover img{transform:scale(1.025)}
.wk a.img:focus-visible,.wk h3 a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wk .kick{margin:16px 0 6px}
.wk h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.wk h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){.wk .img img{transition:none}.wk a.img:hover img{transform:none}}

@media (max-width:980px){
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .wk,.wk.wide,.wk.tall{grid-column:span 1;grid-row:auto}
  .wk.wide{grid-column:span 2}
}
@media (max-width:600px){
  .wk-grid{grid-template-columns:1fr}
  .wk.wide{grid-column:span 1}
}

/* 18 Oct, night: the jump row stays at the top while the archive scrolls; the opener gets the page's air */
.wk-open{padding:72px 0 0}
.wk-jump{position:sticky;top:0;background:var(--ground);z-index:5;padding-top:14px;padding-bottom:14px}
.wk-sec{padding-top:88px}
.wk-jump{box-sizing:border-box;max-width:100%}


/* ============================================================
   CONTACT and the intake form on the version 6 look — 14 October 2026
   ============================================================ */
.ct{padding:48px 0 96px}
.ct__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:start}
.ct h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 1.8vw,2.7rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 18px;max-width:14ch}
.ct__lead{font-size:17px;color:var(--body);max-width:40ch;margin:0 0 36px}
.ct__photo img{display:block;width:100%;max-width:440px;height:auto}
.ct__alt{font-size:15px;color:var(--body);margin:28px 0 0}
.ct__alt a{border-bottom:1px solid var(--line);padding-bottom:2px;color:var(--ink)}

.ct__form{display:flex;flex-direction:column;gap:26px;padding-top:12px}
.ct__form label{display:flex;flex-direction:column;gap:8px;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.ct__form small{font-family:var(--ui);font-size:13.5px;color:var(--label);line-height:1.5}
.ct__form input[type=text],.ct__form input[type=email],.ct__form input[type=url],.ct__form textarea{
  font-family:var(--book);font-size:17px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:2px}
.ct__form input:focus,.ct__form textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.ct__form textarea{resize:vertical;min-height:120px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct__form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ct__form legend{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin-bottom:6px;padding:0}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.opts label{flex-direction:row;align-items:flex-start;gap:10px;font-family:var(--book);font-size:16.5px;color:var(--body);font-weight:300}
.opts input{margin-top:5px;accent-color:var(--accent);width:16px;height:16px;flex:0 0 16px}
.ct__form .btn{align-self:flex-start;border-radius:2px;padding:13px 24px;font-size:15px;margin-top:8px;cursor:pointer;border:1px solid var(--accent)}
.ct__thanks{padding-top:12px}
.ct__thanks h2{font-family:var(--serif);font-weight:400;font-size:2.4rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
.ct__thanks p:not(.kick){font-size:17px;color:var(--body)}

@media (max-width:980px){
  .ct__grid{grid-template-columns:1fr}
  .ct__photo{display:none}
  .opts,.row2{grid-template-columns:1fr}
}


/* ============================================================
   THE REVIEW PAGE and the sample review — 15 October 2026
   ============================================================ */
.rv-open{padding:48px 0 72px}
.rv-open__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.rv-open h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,1.2rem + 3vw,3.8rem);line-height:1.08;letter-spacing:0;color:var(--ink);margin:0 0 18px}
.rv-lead{font-size:18px;color:var(--body);max-width:46ch;margin:0 0 26px}
.rv-open .btn{border-radius:2px;padding:13px 24px;font-size:15px}
.rv-note{font-family:var(--ui);font-size:13.5px;color:var(--label);margin:18px 0 0;max-width:40ch}
.rv-open__photo img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.rv-six{background:var(--cream2);padding:72px 0}
.rv-six h2,.rv-get h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,1.1rem + 2vw,2.8rem);line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 28px}
.rv-list{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;max-width:1100px}
.rv-list li{counter-increment:n;border-top:1px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.rv-list li::before{content:counter(n,decimal-leading-zero);font-family:var(--ui);font-size:12px;letter-spacing:.12em;color:var(--label)}
.rv-list b{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--ink)}
.rv-list span{font-size:16px;color:var(--body)}
.rv-get{padding:72px 0}
.rv-get__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.rv-get p{font-size:17px;color:var(--body);max-width:52ch;margin:0 0 1em}
.rv-get__photo img{display:block;width:100%;height:auto}
.rv-sample{background:var(--cream2);padding:72px 0}
.rv-sample blockquote{margin:0;max-width:60ch}
.rv-sample blockquote p{font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1vw,1.8rem);line-height:1.35;color:var(--ink);margin:0 0 18px}
.rv-sample__who{font-size:16px;color:var(--body);margin:0}
.rv-sample__who a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.rv-pay{font-family:var(--ui);font-size:12.5px;color:#E7B9A8;margin:24px auto 0;max-width:60ch}

/* the sample document */
.rv-doc{padding:48px 0 96px}
.rv-doc__in{max-width:720px;margin-inline:auto}
.rv-doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.2rem + 2.4vw,3.2rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 14px}
.rv-doc__lead{font-size:17px;color:var(--body);margin:0 0 36px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.rv-doc h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:2em 0 .5em}
.rv-doc p{font-size:17.5px;line-height:1.65;color:var(--body);margin:0 0 1em}
.rv-doc ul,.rv-doc ol{padding-left:22px;margin:0 0 1.2em}
.rv-doc li{font-size:17px;line-height:1.6;color:var(--body);margin:.5em 0}
.rv-doc b{font-weight:400;color:var(--ink)}
.rv-doc i{color:var(--label)}
.rv-doc hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.rv-doc__cta{margin-top:36px}
.rv-doc .btn{border-radius:2px;padding:13px 24px;font-size:15px}

@media (max-width:980px){.rv-open__grid,.rv-get__grid{grid-template-columns:1fr}.rv-list{grid-template-columns:1fr}.rv-get__photo{order:-1}}

.rv-shape{list-style:none;counter-reset:s;margin:0;padding:0;max-width:62ch}
.rv-shape li{counter-increment:s;padding:14px 0 14px 44px;border-top:1px solid var(--line);position:relative;font-size:17px;color:var(--body);line-height:1.55}
.rv-shape li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:var(--ui);font-size:12px;letter-spacing:.12em;color:var(--label)}
.rv-shape b{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--ink);display:block;margin-bottom:2px}


/* ============================================================
   THE BREEDERS PAGE — 15 October 2026
   Borrows the review page's grammar (rv-*). Loaded after review-v6.css.
   ============================================================ */
.br-open .rv-open__photo img{max-height:none;aspect-ratio:1/1;object-fit:cover}
.br-case .rv-get__photo img{max-width:420px;margin:0 auto}
.br-case .rv-get__photo--wide img{max-width:none}
.br-quotes{font-family:var(--serif);font-size:1.25rem;line-height:1.4;color:var(--ink)}
.br-cost blockquote p{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
.br-six__line{font-size:17px;color:var(--body);max-width:56ch;margin:-14px 0 32px}
.br-cost__h{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,1.1rem + 2vw,2.8rem);line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 18px}
.br-cost .rv-sample__who{margin-top:10px;max-width:60ch}

/* the M&M story: words in two columns, then the four faces across the page */
.br-story{padding:72px 0}
.br-story__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;margin-bottom:40px}
.br-story h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,1.1rem + 2vw,2.8rem);line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);margin:0;max-width:16ch}
.br-story .kick{margin:0 0 14px}
.br-story__copy p{font-size:17px;color:var(--body);max-width:58ch;margin:0 0 1em}
.br-strip img{display:block;width:100%;max-width:1296px;height:auto;margin:0 auto}
@media (max-width:980px){.br-story__in{grid-template-columns:1fr;gap:16px}.br-story{padding:56px 0}}


/* ============================================================
   ONE PAGE PER SERVICE GROUP — 16 October 2026, second shape: no prices.
   Loaded after home-mockup, home-v6 and work-v6.
   ============================================================ */
/* 16 Oct, third shape of the opener (Carrie: "ugh", "i would not hire me" at a headline alone on the left and the
   picture in a pale panel below): statement left, picture right at the same height, no panel, caption under the statement. */
.gp-top{padding:40px 0 48px}
.gp-top__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;grid-template-areas:"kick pic" "h1 pic" "lead pic";column-gap:clamp(32px,5vw,72px);align-items:start}
.gp-top__kick{grid-area:kick}
.gp-top__h1{grid-area:h1;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 1.8vw,2.5rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 20px;max-width:24ch;text-wrap:balance}
.gp-top__lead{grid-area:lead;font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--body);margin:0;max-width:34ch}
.gp-top__pic{grid-area:pic;align-self:start}
.gp-top__pic picture,.gp-top__pic img{display:block;width:100%;height:auto}
.gp-top__pic--tall img{max-width:440px}
@media (max-width:900px){.gp-top__grid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"kick" "h1" "lead" "pic"}.gp-top__pic{margin-top:28px}}
.gp-work{padding-top:24px}
.gp-work .kick{margin-bottom:28px}
.gp-how{background:var(--cream2);padding:64px 0}
.gp-how__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.gp-how p:not(.kick){font-size:17px;color:var(--body);max-width:52ch;margin:0 0 1em}
.gp-how .kick{margin:0 0 14px}
.gp-how__links{display:flex;gap:28px;flex-wrap:wrap;margin-top:8px}
.gp-how__links a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;font-size:16px}
.gp-how__links a:hover{border-bottom-color:var(--ink)}
@media (max-width:900px){.gp-how__in{grid-template-columns:1fr}.gp-how{padding:48px 0}}

/* 18 Oct: the page top without a picture (label, statement, one paragraph), used when the page is built from piece bands */
.gp-top--text .gp-top__grid{display:block}
.gp-top--text .gp-top__h1{max-width:24ch;margin-bottom:20px}
.gp-top--text .gp-top__lead{font-size:20px;line-height:1.45;max-width:58ch}

/* 18 Oct: the "one piece, one reason" band, to the visual review's specification.
   Picture at most 600px wide (never more than half its file), 72px gap, text centred on the picture, sides alternate. */
.pb{padding:0 0 80px}
.pb:first-of-type{padding-top:24px}
.pb__grid{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:72px;align-items:center}
.pb--right .pb__grid{grid-template-columns:minmax(0,1fr) auto}
.pb--right .pb__pic{order:2;justify-self:end}
.pb--right .pb__text{order:1}
.pb__pic{justify-self:start;max-width:600px}
.pb__pic picture,.pb__pic img{display:block;max-width:100%;height:auto;max-height:720px;width:auto}
.pb__text .kick{margin:0 0 16px}
.pb__h{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 20px;max-width:34ch}
.pb__body{font-size:17px;line-height:1.55;color:var(--body);max-width:58ch;margin:0 0 28px}
.pb__link{font-family:var(--serif);font-size:19px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.pb__link:hover{border-bottom-color:var(--ink)}
.gp-more{padding:8px 0 80px}
.gp-more a{display:inline-block;font-family:var(--serif);font-size:19px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;margin-right:40px}
.gp-more a:hover{border-bottom-color:var(--ink)}
@media (max-width:900px){
  .pb{padding-bottom:56px}
  .pb__grid,.pb--right .pb__grid{grid-template-columns:1fr}
  .pb__pic,.pb--right .pb__pic{order:1;justify-self:stretch;max-width:none;margin-bottom:20px}
  .pb--right .pb__text{order:2}
  .pb__pic img{width:100%;max-height:none}
  .pb__h{font-size:24px}
  .pb__body{font-size:16px}
}


/* ============================================================
   THE PRICING PAGE — 16 October 2026, Carrie's words. Loaded after services-v6.css.
   ============================================================ */
.pr-open{padding:48px 0 48px}
.pr-open h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.1rem + 1.8vw,2.7rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 18px;max-width:20ch;text-wrap:balance}
.pr-open__line{font-size:18px;max-width:54ch;color:var(--body);margin:0 0 .7em}
.pr-open__line:last-child{margin-bottom:0}
.pr-sec{padding:64px 0}
.pr-sec--tint{background:var(--cream2)}
.pr-sec__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.pr-sec__head .kick{margin:0 0 14px}
.pr-sec__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.5rem);line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 12px;max-width:20ch;text-wrap:balance}
.pr-sec__head p:not(.kick):not(.pr-price){font-size:17px;color:var(--body);max-width:40ch;margin:0}
.pr-price{font-family:var(--serif);font-size:28px;line-height:1.2;color:var(--ink);margin:14px 0 0;max-width:none}
.pr-sec__body p:not(.kick){font-size:17px;line-height:1.6;color:var(--body);max-width:58ch;margin:0 0 1em}
.pr-sec__body h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:28px 0 8px}
.pr-sec__body h3:first-child{margin-top:0}
.pr-sub{font-family:var(--ui);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.pr-list{list-style:none;margin:0 0 22px;padding:0;max-width:58ch}
.pr-list li{padding:9px 0 9px 22px;position:relative;font-size:16.5px;color:var(--ink);border-top:1px solid var(--line)}
.pr-list li:last-child{border-bottom:1px solid var(--line)}
.pr-list li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:1px;background:var(--ink)}
.pr-note{font-size:15px;color:var(--label)}
.pr-sec__body .sv__list{max-width:none;margin:0 0 18px}
.pr-sec__body .btn{border-radius:2px;padding:13px 24px;font-size:15px;margin-top:4px}
.pr-sec__body .more{display:inline-block;margin-top:4px}
.pr-faq h3{margin-top:24px}
.pr-faq h3:first-child{margin-top:0}
@media (max-width:900px){.pr-sec__in{grid-template-columns:1fr;gap:20px}.pr-sec{padding:48px 0}}

/* ---- digestible: a jump row, three columns of projects, the review's photograph, questions in two columns ---- */
.pr-jump{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--ui);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.pr-jump a{border-bottom:1px solid transparent;padding-bottom:3px}
.pr-jump a:hover{border-bottom-color:var(--ink)}
.pr-sec{scroll-margin-top:24px}
.pr-sec__head--center{text-align:center;max-width:60ch;margin:0 auto 40px}
.pr-sec__head--center h2,.pr-sec__head--center p{margin-left:auto;margin-right:auto;max-width:none}
.pr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.pr-col h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
.pr-col .sv__list{max-width:none;margin:0 0 14px}
.pr-col .sv__list li{font-size:16px;align-items:flex-start}
.pr-col .pr-note{font-size:14px;color:var(--label);margin:0}
.pr-photo{margin-top:28px;max-width:360px}
.pr-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.pr-faq{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(32px,6vw,96px);max-width:1000px;margin:0 auto}
.pr-faq h3{margin:0 0 8px;font-size:1.3rem}
.pr-faq p{margin:0;font-size:16.5px}
@media (max-width:900px){.pr-cols,.pr-faq{grid-template-columns:1fr}.pr-photo{display:none}}

/* ============================================================
   PRICING, VERSION 7 — 18 October 2026, night. Her words and every price; three ways to begin as a composed row with a
   piece beside each; the individual projects under her groups with a piece beside each; the review; her questions.
   ============================================================ */
.pr7-open .gp-top__grid{display:block}
.pr7-open__note{font-size:17px;line-height:1.55;color:var(--body);max-width:58ch;margin:14px 0 24px}
.pr7-jump{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--ui);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pr7-jump a{color:var(--ink);border-bottom:1px solid transparent;padding-bottom:3px}
.pr7-jump a:hover{border-bottom-color:var(--ink)}
.pr7-begin{padding:72px 0 40px}
.pr7-ways{display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;margin-top:28px;align-items:start}
.pr7-way:nth-child(2){margin-top:72px}
.pr7-way:nth-child(3){margin-top:144px}
.pr7-way .pic{margin:0 0 20px}
.pr7-way .pic img{display:block;width:100%;height:auto}
.pr7-way h2{font-family:var(--serif);font-weight:400;font-size:28px !important;line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 6px;max-width:16ch}
.pr7-way__line{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin:0 0 8px}
.pr7-price{font-family:var(--serif);font-size:36px;line-height:1.1;color:var(--ink);margin:6px 0 18px}
.pr7-way p,.pr7-group p,.pr7-review p,.pr7-faq p{font-size:16.5px;line-height:1.55;color:var(--body);margin:0 0 12px;max-width:44ch}
.pr7-note{font-size:14.5px !important;color:#6b625b !important}
.pr7-rows{list-style:none;margin:12px 0 14px;padding:0;max-width:46ch}
.pr7-rows li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--line);font-size:16px;color:var(--body)}
.pr7-rows li:last-child{border-bottom:1px solid var(--line)}
.pr7-rows b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink);white-space:nowrap}
.pr7-projects{padding:96px 0 72px}
.pr7-h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.3rem + 2vw,3rem) !important;line-height:1.08;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 12px;max-width:18ch}
.pr7-lead{font-size:18px;line-height:1.5;color:var(--body);max-width:52ch;margin:0 0 40px}
.pr7-groups{display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;align-items:start}
.pr7-group:nth-child(2){margin-top:64px}
.pr7-group:nth-child(3){margin-top:128px}
.pr7-group .pic{margin:0 0 18px}
.pr7-group .pic img{display:block;width:100%;height:auto}
.pr7-group h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 6px}
.pr7-review{background:var(--paper,#F4EFE6);padding:88px 0}
.pr7-review__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:center}
.pr7-review .pic{margin:0}
.pr7-review .pic img{display:block;width:100%;height:auto}
.pr7-faq{padding:88px 0 72px}
.pr7-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 72px;margin-top:28px}
.pr7-faq h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 8px}
@media (max-width:900px){
  .pr7-ways,.pr7-groups,.pr7-review__in,.pr7-faq__grid{display:block}
  .pr7-way,.pr7-group{margin:0 0 48px !important}
  .pr7-review .pic{margin-top:28px}
  .pr7-begin,.pr7-projects,.pr7-review,.pr7-faq{padding:56px 0}
}
.pr7-way .pr7-price,.pr7-review .pr7-price{font-family:var(--serif) !important;font-size:36px !important;line-height:1.1 !important;color:var(--ink) !important;max-width:none !important}


/* ============================================================
   HOME, VERSION 9 — 18 October 2026.
   Carrie's copy of 18 Oct, verbatim: hero, an intro, seven pieces each with its reason (the band from group-v6.css),
   the studio, the close. One menu (Work, Services with its four, About, Pricing, Start a conversation).
   Loaded after home-mockup.css, home-v6.css and group-v6.css.
   ============================================================ */

/* the one menu */
.m9{background:var(--ground);border-bottom:1px solid var(--line)}
.m9__row{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.m9__mark img{display:block;height:40px;width:auto}
.m9__nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);font-family:var(--ui);font-size:14px;letter-spacing:.02em}
.m9__nav > a,.m9__item > a{color:var(--ink);padding:6px 0;border-bottom:1px solid transparent}
.m9__nav > a:hover,.m9__item > a:hover,.m9__nav a[aria-current]{border-bottom-color:var(--ink)}
.m9__item{position:relative}
.m9__item > a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);margin:0 0 3px 8px}
.m9__sub{position:absolute;top:100%;left:-18px;min-width:230px;background:var(--ground);border:1px solid var(--line);padding:10px 0;display:none;z-index:30}
.m9__item:hover .m9__sub,.m9__item:focus-within .m9__sub{display:block}
.m9__sub a{display:block;padding:9px 18px;color:var(--ink);font-size:14px}
.m9__sub a:hover{background:var(--cream2)}
.m9__btn{display:inline-block;background:var(--accent);color:var(--ground);padding:11px 20px;border-radius:2px;font-family:var(--ui);font-size:13.5px;letter-spacing:.04em}
.m9__nav > a.m9__btn{color:var(--ground);border-bottom:0}
.m9__btn:hover{opacity:.92}
.m9__toggle{display:none}
@media (max-width:900px){
  .m9__row{height:auto;padding:14px 0;flex-wrap:wrap}
  .m9__nav{width:100%;flex-wrap:wrap;gap:10px 22px;padding-top:12px}
  .m9__sub{position:static;display:block;border:0;padding:4px 0 0 12px;min-width:0}
  .m9__item > a::after{display:none}
  .m9__sub a{padding:6px 0;font-size:13px}
}

/* the hero keeps the approved shape; the words are hers of 18 Oct */
.hero p{max-width:40ch}

/* the intro: her second hero paragraph as the lead, then the "you have put a lot into this" block */
.h9-intro{padding:64px 0 16px}
.h9-intro .kick{margin:0 0 18px}
.h9-intro__lead{font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1vw,1.75rem);line-height:1.35;color:var(--ink);max-width:40ch;margin:0 0 18px}
.h9-intro__lead--second{font-family:var(--book);font-size:19px;line-height:1.55;color:var(--body);max-width:58ch;margin:0 0 56px}
.h9-intro__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start}
.h9-intro__grid h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0;max-width:22ch}
.h9-intro__grid p{font-size:17px;line-height:1.55;color:var(--body);max-width:58ch;margin:0 0 14px}
.h9-intro__grid p:last-child{margin-bottom:0}

/* the piece bands: group-v6.css draws them; Home's bands carry several short paragraphs */
.h9-pieces{padding-top:40px}
.h9-pieces .pb__text p.pb__body{margin:0 0 14px}
.h9-pieces .pb__text p.pb__body:last-of-type{margin-bottom:28px}
.h9-pieces .pb__h{font-size:30px;max-width:26ch}
.h9-pieces .pb__link{font-style:italic}

/* the studio: the one tinted band on the page */
.h9-studio{background:var(--cream2);padding:80px 0}
.h9-studio__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start}
.h9-studio h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0;max-width:22ch}
.h9-studio p{font-size:17px;line-height:1.55;color:var(--body);max-width:58ch;margin:0 0 14px}
.h9-studio p:last-child{margin-bottom:0}

/* the close: the approved dark band with her words */
.h9-close{padding:80px 0}
.h9-close p{max-width:52ch}

@media (max-width:900px){
  .h9-intro{padding:48px 0 24px}
  .h9-intro__lead{margin-bottom:36px}
  .h9-intro__grid,.h9-studio__grid{grid-template-columns:1fr;row-gap:20px}
  .h9-pieces .pb__h{font-size:24px}
  .h9-studio{padding:56px 0}
}

/* ============================================================
   18 Oct, Carrie: "how do we make this more dynamic - soft moving a flow - not so boring".
   Three slow, quiet motions with a reason each. Off entirely for people who ask their system for less motion.
   Add ?still to the address to see the page without them.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* 1. The hero photograph pushes in very slowly, as if you were walking toward the table. 24s, once. */
  html:not(.still) .hero__img{animation:h9-push 24s ease-out 1 forwards;transform-origin:60% 55%}
  @keyframes h9-push{from{transform:scale(1)}to{transform:scale(1.06)}}
  html:not(.still) .hero__in > *{opacity:0;transform:translateY(14px);animation:h9-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  html:not(.still) .hero__in > *:nth-child(2){animation-delay:.25s}
  html:not(.still) .hero__in > *:nth-child(3){animation-delay:.5s}
  @keyframes h9-rise{to{opacity:1;transform:none}}

  /* 2. Each band arrives as you reach it: the picture first, then the words, rising a little and settling. */
  html:not(.still) .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  html:not(.still) .reveal.is-in{opacity:1;transform:none}
  html:not(.still) .pb__text.reveal{transition-delay:.18s}

}

.h9-intro__after{font-size:19px;line-height:1.55;color:var(--body);max-width:58ch;margin:0}
.h9-pieces{padding-top:24px}


/* ============================================================
   THE SYSTEM — 18 October 2026. Loaded LAST on every page, so it wins.
   Carrie: "as good if not better than ALL of these". The ten site studies measured fifteen type sizes across our
   pages and band headings that were the smallest of the set. This file settles one scale and one rhythm.
   Five sizes: label 12, body 17, lead 20, caption 22, band heading 36, page heading 40. The hero (62) is the one
   exception, approved. Body weight 400, not 300 (two studies flagged the light grey body as the readability risk).
   ============================================================ */
:root{
  --t-hero:clamp(2.2rem, 1.2rem + 3.2vw, 3.9rem);
  --t-page:clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem);     /* 40px at desktop */
  --t-band:clamp(1.6rem, 1.15rem + 1.3vw, 2.25rem);   /* 36px at desktop */
  --t-caption:22px;
  --t-lead:20px;
  --t-body:17px;
  --t-label:12px;
}
body{font-weight:400}

/* labels: one style, nothing overrides it */
.kick, p.kick, .wk .kick, .card .kick, .pb__text .kick, .gp-top__kick{
  font-family:var(--ui);font-size:var(--t-label);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);font-weight:400}

/* page headings: one size on every inner page */
.gp-top__h1, .wk-open h1, .sv-open h1, .pr-open h1, .ab-open h1, .ct h1, .rv-open h1, .shop h1, .br-open h1, .fa-open h1{
  font-size:var(--t-page);line-height:1.1}

/* band and section headings: one size, so the piece-and-reason bands carry the page */
.pb__h, .h9-pieces .pb__h, .h9-intro__grid h2, .h9-studio h2, .wk-sec h2, .wide2__cap h2, .lead .big h2, .mix > .card h2,
.dark h2, .gp-how h2, .sv-group h2, .pr-sec__head h2, .ab-sec h2{
  font-size:var(--t-band);line-height:1.15}

/* caption titles under pictures */
.wk h3, .card h2, .row4 .card h2, .lead__right .card.sm h2{font-size:var(--t-caption);line-height:1.2}

/* leads: the one line under a page heading */
.gp-top__lead, .wk-open__line, .wk-line, .h9-intro__lead--second, .sv-open p, .pr-open p, .ab-open p{font-size:var(--t-lead);line-height:1.5}

/* a lead card in each Work section: the first big file spans four columns instead of three */
.wk.lead{grid-column:span 4}
.wk.lead .img{aspect-ratio:3/2}
@media (max-width:1100px){.wk.lead{grid-column:span 6}}

/* one full-width band per page: the picture across the whole column, the words beneath in two columns */
.pb--full .pb__grid{display:block}
.pb--full .pb__pic{max-width:none;justify-self:stretch;margin:0 0 28px}
.pb--full .pb__pic picture, .pb--full .pb__pic img{width:100%;max-width:none;max-height:none;height:auto}
.pb--full .pb__text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start}
.pb--full .pb__text .kick{grid-column:1;grid-row:1}
.pb--full .pb__h{grid-column:1;grid-row:2;max-width:18ch}
.pb--full .pb__body, .pb--full .pb__link{grid-column:2}
@media (max-width:900px){.pb--full .pb__text{display:block}}

/* three doors in every closing band: see the work, what it costs, start a conversation */
.dark__doors{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:center;align-items:center;margin-top:10px}
.dark__doors .door{font-family:var(--serif);font-size:19px;color:#EDE6DA;border-bottom:1px solid rgba(237,230,218,.45);padding-bottom:2px}
.dark__doors .door:hover{border-bottom-color:#EDE6DA}

/* the empty line under the group headings on Services (seen in the preview HTML) takes no space */
p.line:empty{display:none}

/* 18 Oct, the Work captions: label (the kind), the title, then one line, the kind of business and what the piece does */
.wk__line{font-size:15px;line-height:1.45;color:var(--body);margin:6px 0 0;max-width:40ch}
.wk.lead .wk__line{max-width:56ch}

/* 18 Oct, Carrie: "bleed off page". A piece band's picture runs to the edge of the page on its outer side;
   the words stay in the column. The offset is the space outside the 1320px column plus the gutter. */
@media (min-width:901px){
  .pb:not(.pb--full) .pb__pic{--bleed:calc(max((100vw - var(--wide)) / 2, 0px) + var(--gut));max-width:none;width:calc(600px + var(--bleed))}
  .pb:not(.pb--full):not(.pb--right) .pb__pic{margin-left:calc(-1 * var(--bleed))}
  .pb--right:not(.pb--full) .pb__pic{margin-right:calc(-1 * var(--bleed))}
  .pb:not(.pb--full) .pb__pic img{width:100%;max-height:none}
  .pb--full .pb__pic{--bleed:calc(max((100vw - var(--wide)) / 2, 0px) + var(--gut));margin-left:calc(-1 * var(--bleed));margin-right:calc(-1 * var(--bleed))}
}

/* the dark close: the heading was inheriting the ink colour from the band-heading rule; on the green it is cream */
.dark h2{color:#EDE6DA}
.dark p{color:#CFC6B8}


/* ============================================================
   HOME, VERSION 10 — 18 October 2026. Carrie's brief: "Reimagine the Castle Farm Road homepage with the care and
   originality of a creative director designing their own studio's website." A page composed like a magazine issue
   about the work: every section its own shape. Loaded after home-mockup, home-v6, group-v6, home-v9 and system-v6.
   Colour drawn from the work: the Betty Blu holiday wine, the M&M Doodles blue, the newsletter ink.
   ============================================================ */
:root{--wine:#7A2E3B;--blue:#4E6E8A;--paper:#F4EFE6}
.v10 main{overflow-x:clip}
.v10 .wrap{max-width:1320px}
.v10 h1,.v10 h2,.v10 h3{font-family:var(--serif);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.v10 .kick{margin:0 0 14px}
.v10 .pic img,.v10 .pic picture{display:block;width:100%;height:auto}
.v10 .pic{margin:0;overflow:hidden}
.v10 .cap{font-size:15px;line-height:1.45;color:var(--body);margin:10px 0 0;max-width:44ch}
.v10 .cap b{font-family:var(--ui);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:4px}
.v10 .link{font-family:var(--serif);font-size:19px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.v10 .link:hover{border-bottom-color:var(--ink)}

/* 1 OPENING: headline, an oversized real website, a small postcard, a line of real writing */
.op{padding:56px 0 72px;position:relative}
.op__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;column-gap:24px;row-gap:0}
.op__head{grid-column:1/7;grid-row:1;align-self:end;padding-bottom:40px;position:relative;z-index:2}
.op__head h1{font-size:clamp(2.6rem,1.4rem + 3.6vw,4.6rem);line-height:1.02;margin:0 0 22px;max-width:11ch}
.op__head h1 em{font-style:italic;color:var(--wine)}
.op__head p{font-size:19px;line-height:1.5;color:var(--body);max-width:36ch;margin:0 0 28px}
.op__big{grid-column:6/13;grid-row:1;margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.op__big .cap{margin:12px 0 0;max-width:52ch}
.op__small{grid-column:1/5;grid-row:2;margin-top:40px;align-self:start}
.op__quote{grid-column:7/12;grid-row:2;margin-top:56px;align-self:start;border-left:2px solid var(--wine);padding-left:22px}
.op__quote p{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink);margin:0 0 8px;max-width:30ch}
.op__quote .cap{margin:0}
@media (max-width:900px){
  .op{padding:36px 0 48px}
  .op__grid{display:block}
  .op__head{padding-bottom:28px}
  .op__big{margin:0 calc(-1 * var(--gut))}
  .op__small{max-width:none;margin:28px 0 0}
  .op__quote{margin-top:40px}
}

/* 2 FEATURED PROJECT that unfolds: overview, then closer, then the system */
.fp{background:var(--paper);padding:88px 0 96px;margin-top:24px}
.fp__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:end;margin-bottom:48px}
.fp__head h2{font-size:clamp(2rem,1.3rem + 2vw,3.1rem);line-height:1.08;margin:0}
.fp__head p{font-size:18px;line-height:1.55;color:var(--body);margin:0;max-width:50ch}
.fp__over{display:grid;grid-template-columns:7fr 5fr;column-gap:24px;align-items:start}
.fp__over .pic--a{grid-column:1;margin-left:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.fp__over .pic--b{grid-column:2;margin-top:96px}
.fp__closer{display:grid;grid-template-columns:4fr 4fr 4fr;column-gap:24px;margin-top:72px;align-items:start}
.fp__closer .pic--tall{grid-row:span 1}
.fp__why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;margin-top:72px;align-items:start}
.fp__why h3{font-size:26px;line-height:1.2;margin:0 0 12px}
.fp__why dl{margin:0}
.fp__why dt{font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:18px 0 6px}
.fp__why dt:first-child{margin-top:0}
.fp__why dd{margin:0;font-size:17px;line-height:1.55;color:var(--body);max-width:58ch}
@media (max-width:900px){
  .fp{padding:56px 0 64px}
  .fp__head,.fp__over,.fp__closer,.fp__why{display:block}
  .fp__over .pic--a{margin:0 calc(-1 * var(--gut))}
  .fp__over .pic--b{margin:20px 0 0;max-width:70%}
  .fp__closer .pic{margin-top:20px}
  .fp__why{margin-top:40px}
}

/* 3 SERVICES, explored: a list on the left; choosing one changes the piece and the answer on the right */
.sv{padding:96px 0}
.sv__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.sv__list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.sv__list li{border-bottom:1px solid var(--line)}
.sv__list button{all:unset;display:flex;justify-content:space-between;align-items:baseline;gap:20px;width:100%;box-sizing:border-box;padding:20px 4px;cursor:pointer;font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--ink)}
.sv__list button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sv__list button small{font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a8077;white-space:nowrap}
.sv__list li[aria-selected="true"] button{color:var(--wine)}
.sv__list li[aria-selected="true"] button small{color:var(--wine)}
.sv__panel{position:relative;min-height:420px}
.sv__item{display:none}
.sv__item.is-on{display:block;animation:sv-in .5s ease both}
@keyframes sv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sv__item .pic{margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.sv__item h3{font-size:28px;line-height:1.2;margin:28px 0 10px;max-width:24ch}
.sv__item p{font-size:17px;line-height:1.55;color:var(--body);max-width:56ch;margin:0 0 18px}
.sv__note{font-size:14px;color:#8a8077;margin:40px 0 0;max-width:60ch}
@media (max-width:900px){
  .sv{padding:56px 0}
  .sv__grid{display:block}
  .sv__list button{font-size:24px;padding:14px 2px}
  .sv__panel{margin-top:28px;min-height:0}
  .sv__item .pic{margin:0 calc(-1 * var(--gut))}
}

/* 4 DISCOVERY: the Everyday lookbook, turned page by page, with why each page is there */
.lb{background:var(--ground);color:var(--body);padding:96px 0}
.lb .kick,.lb h2,.lb h3{color:var(--ink)}
.lb__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:center}
.lb__stage{position:relative;aspect-ratio:4/3;overflow:hidden}
.lb__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease;mix-blend-mode:multiply}
.lb__stage img.is-on{opacity:1}
.lb h2{font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;margin:0 0 18px}
.lb__why{min-height:120px}
.lb__why h3{font-size:24px;margin:0 0 8px}
.lb__why p{font-size:17px;line-height:1.55;color:var(--body);margin:0;max-width:44ch}
.lb__nav{display:flex;align-items:center;gap:14px;margin-top:28px}
.lb__nav button{all:unset;cursor:pointer;font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:10px 16px;border-radius:2px}
.lb__nav button:hover,.lb__nav button:focus-visible{border-color:var(--ink);outline:none}
.lb__nav .n{font-family:var(--ui);font-size:12px;letter-spacing:.12em;color:#8a8077;margin-left:6px}
.lb__dots{display:flex;gap:8px;margin-top:18px}
.lb__dots button{all:unset;cursor:pointer;width:34px;height:3px;background:var(--line)}
.lb__dots button[aria-current="true"]{background:var(--ink)}
@media (max-width:900px){.lb{padding:56px 0}.lb__grid{display:block}.lb__stage{margin-bottom:24px}}

/* 5 THE PEOPLE: two columns of words, one line between them, no portraits */
.ppl{padding:96px 0 88px}
.ppl__head h2{font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;margin:0 0 14px;max-width:18ch}
.ppl__head p{font-size:18px;line-height:1.55;color:var(--body);max-width:56ch;margin:0}
.ppl__two{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;margin-top:48px;position:relative}
.ppl__two::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-36px)}
.ppl__two h3{font-size:26px;margin:0 0 10px}
.ppl__two p{font-size:17px;line-height:1.55;color:var(--body);margin:0;max-width:40ch}
.ppl__line{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink);max-width:36ch;margin:56px 0 0;border-left:2px solid var(--blue);padding-left:22px}
@media (max-width:900px){.ppl{padding:56px 0}.ppl__two{display:block}.ppl__two::before{display:none}.ppl__two h3{margin-top:28px}}

/* 6 THE CLOSE: her words, two ways in */
.cl{background:var(--dark);color:#EDE6DA;padding:96px 0;border-bottom:1px solid rgba(237,230,218,.14)}
.cl h2{color:#EDE6DA;font-size:clamp(2.2rem,1.3rem + 2.6vw,3.6rem);line-height:1.06;margin:0 0 22px;max-width:16ch}
.cl p{font-size:18px;line-height:1.55;color:#CFC6B8;max-width:52ch;margin:0 0 32px}
.cl__ways{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.cl .btn{background:#EDE6DA;color:var(--dark)}
.cl .link{color:#EDE6DA;border-bottom-color:rgba(237,230,218,.45)}
@media (max-width:900px){.cl{padding:56px 0}}

/* motion: gentle entrances only; nothing moves on its own */
@media (prefers-reduced-motion: no-preference){
  .v10 .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .v10 .rv.is-in{opacity:1;transform:none}
  .v10 .rv.d2{transition-delay:.15s}
  .v10 .rv.d3{transition-delay:.3s}
}

/* after the first render */
.lb__stage{background:transparent}
@media (max-width:900px){
  .v10 .m9__sub{display:none}
  .v10 .m9__item:focus-within .m9__sub,.v10 .m9__item:hover .m9__sub{display:block}
  .v10 .m9__item > a::after{display:inline-block}
}

/* 1b THE COLLAGE OPENING (after Rose & Co.): ten pieces at their own proportions, nothing cropped, nothing boxed */
.col{padding:48px 0 64px}
.col__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;row-gap:0;align-items:start}
.col__head{grid-column:1/6;grid-row:1;padding:40px 0 48px;position:relative;z-index:2}
.col__head h1{font-size:clamp(2.6rem,1.4rem + 3.6vw,4.6rem);line-height:1.02;margin:0 0 22px;max-width:11ch}
.col__head h1 em{font-style:italic;color:var(--wine)}
.col__head p{font-size:19px;line-height:1.5;color:var(--body);max-width:34ch;margin:0 0 28px}
.col .pic{position:relative}
.col .pic img{display:block;width:100%;height:auto}
.col .cap{margin-top:8px}
.col .cap b{margin:0}
.col__p1{grid-column:6/9;grid-row:1;margin-top:24px}
.col__p2{grid-column:9/13;grid-row:1;margin-top:96px;margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.col__p3{grid-column:1/5;grid-row:2;margin-top:-40px}
.col__p4{grid-column:5/7;grid-row:2;margin-top:72px}
.col__p5{grid-column:7/10;grid-row:2;margin-top:-16px}
.col__p6{grid-column:10/13;grid-row:2;margin-top:120px}
.col__p7{grid-column:2/5;grid-row:3;margin-top:64px}
.col__p8{grid-column:5/9;grid-row:3;margin-top:-24px}
.col__p9{grid-column:9/12;grid-row:3;margin-top:96px}
.col__quote{grid-column:1/6;grid-row:4;margin-top:72px;border-left:2px solid var(--wine);padding-left:22px}
.col__quote p{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink);margin:0 0 8px;max-width:30ch}
.col__quote .cap{margin:0}
/* a slot that changes picture: the pictures stack and crossfade; the slot keeps the first picture's height */
.swap{display:grid}
.swap img{grid-area:1/1;opacity:0;transition:opacity 1.2s ease}
.swap img.is-on{opacity:1}
.swap .cap{grid-row:2}
.v10 .rv{transition-delay:var(--d,0s)}
/* the featured row of three, staggered */
.fp__closer--stagger > :nth-child(2){margin-top:48px}
.fp__closer--stagger > :nth-child(3){margin-top:96px}
@media (max-width:900px){
  .col{padding:28px 0 40px}
  .col__grid{grid-template-columns:1fr 1fr;column-gap:16px}
  .col__head{grid-column:1/3;grid-row:auto;padding:12px 0 24px}
  .col .pic,.col__quote{grid-column:auto;grid-row:auto;margin:16px 0 0 !important}
  .col__p1,.col__p3,.col__p6,.col__p8{grid-column:1/3}
  .col__quote{grid-column:1/3;margin-top:32px !important}
  .fp__closer--stagger > :nth-child(2),.fp__closer--stagger > :nth-child(3){margin-top:20px}
}

/* creative layering: the why-card overlaps the photograph; the photograph drifts slowly behind it */
.fp__over--layer{position:relative}
.fp__over--layer .pic--a .pic{overflow:hidden}
.fp__why--card{background:var(--ground);padding:40px 44px;margin:56px 0 0 auto;max-width:620px;position:relative;z-index:2;display:block;box-shadow:0 30px 60px -40px rgba(43,33,28,.35)}
.fp__why--card h3{font-size:26px;line-height:1.2;margin:0 0 14px}
@media (prefers-reduced-motion: no-preference){
  .drift .pic img{animation:v10-drift 36s ease-in-out infinite alternate;transform-origin:50% 60%}
  @keyframes v10-drift{from{transform:scale(1)}to{transform:scale(1.07)}}
}
@media (max-width:900px){.fp__why--card{margin:24px 0 0;padding:28px 24px}}

/* in motion: a photograph drifting behind, two device frames with the real sites scrolling inside */
.mo{position:relative;padding:112px 0;overflow:hidden;color:var(--ink)}
.mo__bg{position:absolute;inset:0;z-index:0}
.mo__bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.42}
.mo__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,247,242,.96) 0%,rgba(250,247,242,.75) 45%,rgba(250,247,242,.35) 100%)}
@media (prefers-reduced-motion: no-preference){.mo__bg img{animation:v10-drift 48s ease-in-out infinite alternate;transform-origin:40% 50%}}
.mo__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:56px;align-items:center}
.mo__text h2{font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;margin:0 0 14px;max-width:14ch}
.mo__text p{font-size:17px;line-height:1.55;color:var(--body);max-width:38ch;margin:0}
.mo__devices{position:relative;display:grid;grid-template-columns:7fr 4fr;column-gap:0;align-items:end}
.dev{position:relative}
.dev--laptop{grid-column:1/2;z-index:1}
.dev--tablet{grid-column:2/3;margin-left:-56px;margin-bottom:-8px;z-index:2}
.dev__screen{background:#1F1B18;border-radius:14px;padding:12px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 40px 80px -40px rgba(43,33,28,.5)}
.dev--tablet .dev__screen{aspect-ratio:3/4;padding:10px;border-radius:18px}
.dev__screen img{display:block;width:100%;height:auto;border-radius:4px;will-change:transform}
@media (prefers-reduced-motion: no-preference){
  .dev__screen img.is-scrolling{animation:v10-scroll 70s linear infinite alternate}
  .dev--tablet .dev__screen img.is-scrolling{animation-duration:80s;animation-delay:4s}
  @keyframes v10-scroll{from{transform:translateY(0)}to{transform:translateY(var(--dy,0px))}}
}
.dev .cap{margin-top:14px}
@media (max-width:900px){
  .mo{padding:56px 0}
  .mo__grid{display:block}
  .mo__devices{grid-template-columns:1fr;margin-top:28px}
  .dev--tablet{grid-column:auto;margin:24px 0 0;max-width:60%}
}

/* the words stay put while the pictures scroll past (after With Grace and Gold's design library) */
.st{padding:96px 0}
.st__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:96px;align-items:start}
.st__text{position:sticky;top:120px;align-self:start}
.st__inner h2{font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;margin:0 0 14px;max-width:14ch}
.st__inner p{font-size:17px;line-height:1.55;color:var(--body);max-width:40ch;margin:0 0 24px}
.st__col{display:grid;row-gap:72px}
.st__col .pic{max-width:520px}
.st__col .pic:nth-child(even){margin-left:auto;max-width:440px}
@media (max-width:900px){.st{padding:56px 0}.st__grid{display:block}.st__text{position:static;margin-bottom:28px}.st__col{row-gap:36px}.st__col .pic,.st__col .pic:nth-child(even){max-width:none;margin:0}}

/* the slow slide (after Foil & Ink) */
.sl{padding:40px 0 96px;overflow:hidden}
.sl__head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:36px}
.sl__head h2{font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;margin:0}
.sl__nav button{all:unset;cursor:pointer;font-family:var(--serif);font-size:26px;color:var(--ink);border:1px solid var(--line);padding:6px 18px;margin-left:8px}
.sl__nav button:hover,.sl__nav button:focus-visible{border-color:var(--ink)}
.sl__track{overflow:hidden;padding-left:calc(max((100vw - 1320px)/2,0px) + var(--gut))}
.sl__row{display:flex;gap:40px;will-change:transform;width:max-content}
.sl__row .pic{flex:0 0 auto;width:420px}
.sl__row .pic:last-child{width:560px}
.sl__row .pic img{display:block;width:100%;height:auto}
@media (max-width:900px){.sl{padding:24px 0 56px}.sl__head{display:block}.sl__nav{margin-top:12px}.sl__row{gap:16px}.sl__row .pic,.sl__row .pic:last-child{width:260px}}

/* 18 Oct, Carrie: "too small of images - not dramatic or bleeding off page - no impact". The opening: one picture at full
   drama, the newsletter, running off the right edge and up to the top; the headline beside it; the collage follows. */
.col{padding:0 0 64px}
.col__head{grid-column:1/6;grid-row:1;padding:120px 0 48px;align-self:center}
.col__p1{grid-column:6/13;grid-row:1;margin:0;margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.col__p1 img{max-height:88vh;width:100%;height:auto;object-fit:cover;object-position:50% 40%}
.col__p1 .cap{display:none}
.col__p2{grid-column:8/13;grid-row:2;margin-top:72px;margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut)))}
.col__p3{grid-column:1/5;grid-row:2;margin-top:96px}
.col__p4{grid-column:5/8;grid-row:2;margin-top:200px}
.col__p5{grid-column:1/4;grid-row:3;margin-top:64px}
.col__p6{grid-column:4/8;grid-row:3;margin-top:-40px}
.col__p7{grid-column:8/11;grid-row:3;margin-top:96px}
.col__p8{grid-column:2/6;grid-row:4;margin-top:48px}
.col__p9{grid-column:7/11;grid-row:4;margin-top:-24px}
.col__quote{grid-column:1/6;grid-row:5;margin-top:72px}
@media (max-width:900px){
  .col__head{padding:24px 0 16px}
  .col__p1{margin:0 calc(-1 * var(--gut)) !important}
  .col__p1 img{max-height:70vh}
}

/* the websites slot in the collage bled off the right edge and took its caption with it; it stays inside the column */
.col__p2{margin-right:0}
.col__p2 .cap,.col .pic .cap{padding-right:var(--gut)}

/* the opening picture is the studio's own: the table by the window, approved. It sets the mood; the work follows. */
.col__p1 img{max-height:none;object-fit:cover;object-position:60% 50%;height:clamp(420px,62vh,720px)}
.col__head{padding:96px 0 48px}

/* the studio picture bleeds off the top and the right: full height of the first screen, flush with the masthead */
.col{padding-top:0}
.col__p1{margin:0 calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut))) 0 0 !important;align-self:stretch}
.col__p1 img{height:calc(100vh - 84px);max-height:860px;min-height:520px}
.col__head{padding:0 0 48px;align-self:center}
@media (max-width:900px){.col__p1 img{height:60vh;min-height:360px}.col__head{padding:24px 0 16px}}

/* Carrie: "more space - crowded". Wider gutters, fewer pieces across, more air between the rows. */
.col__grid{column-gap:48px}
.col__p3{grid-column:1/6;grid-row:2;margin-top:120px}
.col__p4{grid-column:7/9;grid-row:2;margin-top:260px}
.col__p2{grid-column:9/13;grid-row:2;margin-top:120px}
.col__p5{grid-column:1/4;grid-row:3;margin-top:140px}
.col__p6{grid-column:5/9;grid-row:3;margin-top:60px}
.col__p7{grid-column:10/13;grid-row:3;margin-top:180px}
.col__p8{grid-column:2/6;grid-row:4;margin-top:140px}
.col__p9{grid-column:8/12;grid-row:4;margin-top:60px}
.col__quote{grid-column:1/6;grid-row:5;margin-top:140px}
.col{padding-bottom:120px}

/* "too crowded": never more than two pieces across; one of each pair large, the other small; a screen of air between rows */
.col__grid{column-gap:64px}
.col__p3{grid-column:1/7;grid-row:2;margin-top:140px}
.col__p4{grid-column:9/12;grid-row:2;margin-top:320px}
.col__p2{grid-column:6/13;grid-row:3;margin-top:200px}
.col__p5{grid-column:1/4;grid-row:3;margin-top:380px}
.col__p6{grid-column:1/8;grid-row:4;margin-top:200px}
.col__p7{grid-column:10/13;grid-row:4;margin-top:420px}
.col__p8{grid-column:8/13;grid-row:5;margin-top:200px}
.col__p9{grid-column:1/6;grid-row:5;margin-top:360px}
.col__quote{grid-column:1/6;grid-row:6;margin-top:200px}

/* the page turn: an open book, left and right pages; a leaf hinged on the spine rotates from right to left */
.flip .book{position:relative;display:grid;grid-template-columns:1fr 1fr;perspective:2200px;filter:drop-shadow(0 30px 40px rgba(43,33,28,.22))}
.flip .book img{display:block;width:100%;height:auto}
.flip .book__left,.flip .book__right{position:relative;background:#fff}
.flip .book__left{border-right:1px solid rgba(43,33,28,.08)}
.flip .book__leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(0deg);pointer-events:none;visibility:hidden}
.flip .book__leaf.is-turning{visibility:visible;transition:transform 1.4s cubic-bezier(.45,.05,.2,1);transform:rotateY(-180deg)}
.flip .leaf__front,.flip .leaf__back{position:absolute;inset:0;backface-visibility:hidden;background:#fff;overflow:hidden}
.flip .leaf__back{transform:rotateY(180deg)}
.flip .leaf__front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%)}
.flip .leaf__back::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%)}
.flip .book__leaf img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion: reduce){.flip .book__leaf{display:none}}

/* the collage as two flowing columns: nothing can sit on anything else; the right column starts lower so the rows stagger */
.col__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:64px}
.col__head{grid-column:1/6;grid-row:1}
.col__p1{grid-column:6/13;grid-row:1}
.col__flow{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:1fr 1fr;column-gap:96px;margin-top:140px;align-items:start}
.col__a,.col__b{display:grid;row-gap:160px}
.col__b{margin-top:220px}
.col__a .pic,.col__b .pic{grid-column:auto !important;grid-row:auto !important;margin:0 !important;max-width:none}
.col__a .pic:nth-child(even){max-width:62%;margin-left:auto !important}
.col__b .pic:nth-child(odd){max-width:68%}
.col__flow .col__quote{grid-column:auto;grid-row:auto;margin:0 !important}
@media (max-width:900px){.col__flow{display:block;margin-top:40px}.col__a,.col__b{row-gap:40px;margin:0}.col__a .pic,.col__b .pic{max-width:none !important;margin:24px 0 0 !important}}

/* THE OPENING, rebuilt clean: headline beside the studio picture; then the pieces one per row, alternating sides, lots of air */
.col__grid{display:grid;grid-template-columns:5fr 7fr;column-gap:64px;align-items:center}
.col__head{grid-column:1;grid-row:1;padding:0 0 48px}
.col__p1{grid-column:2;grid-row:1}
.col__pieces{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;row-gap:160px;margin-top:160px;align-items:start}
.pz{grid-column:1;max-width:560px;margin:0 !important}
.pz--r{grid-column:2;margin-top:160px !important;justify-self:end}
.pz--sm{max-width:360px}
.col__pieces .col__quote{grid-column:1/3;margin:0 !important;max-width:620px}
.col__pieces .pic img{display:block;width:100%;height:auto}
@media (max-width:900px){.col__grid{display:block}.col__pieces{display:block;margin-top:40px}.pz,.pz--r{max-width:none;margin:32px 0 0 !important}.pz--sm{max-width:70%}}

/* the book looks like a book: on a wooden table, thick, a spine shadow, pages with edges */
.flip{max-width:640px}
.flip .book{position:relative;padding:36px;background:url('../img/photo-postcard-winter-table.jpg') center/cover;filter:none;border-radius:2px;overflow:hidden}
.flip .book::before{content:"";position:absolute;inset:0;background:rgba(250,247,242,.18)}
.flip .book__left,.flip .book__right{position:relative;background:#fff;box-shadow:0 18px 30px -14px rgba(43,33,28,.45)}
.flip .book__left{border-radius:3px 0 0 3px;box-shadow:inset -14px 0 18px -14px rgba(43,33,28,.35),0 18px 30px -14px rgba(43,33,28,.45)}
.flip .book__right{border-radius:0 3px 3px 0;box-shadow:inset 14px 0 18px -14px rgba(43,33,28,.35),0 18px 30px -14px rgba(43,33,28,.45)}
.flip .book__left::after,.flip .book__right::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:repeating-linear-gradient(90deg,#f3eee6 0 2px,#d9d2c6 2px 3px);opacity:.9}
.flip .book__leaf{left:calc(50%);width:calc(50% - 36px)}
.flip .book{display:grid;grid-template-columns:1fr 1fr;perspective:2200px}
.flip .book__leaf{left:50%}

/* "looks like a step with a random box below": the row of three sits level; the why-text is plain words, no card */
.fp__closer--stagger > :nth-child(2),.fp__closer--stagger > :nth-child(3){margin-top:0}
.fp__closer{align-items:end}
.fp__why--card{background:transparent;padding:0;margin:96px 0 0;max-width:none;box-shadow:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start}
.fp__why--card h3{grid-column:1;font-size:clamp(2rem,1.3rem + 2vw,3rem);line-height:1.08;max-width:14ch}
.fp__why--card dl{grid-column:2}
@media (max-width:900px){.fp__why--card{display:block;margin-top:48px}}

/* the site scroll inside the frames, slower still: about three minutes top to bottom */
.dev__screen img.is-scrolling{animation-duration:180s !important;animation-timing-function:linear}
.dev--tablet .dev__screen img.is-scrolling{animation-duration:200s !important}

/* "now too much space": a comfortable rhythm, and every piece carries its reason under the label */
.col__pieces{row-gap:88px;margin-top:96px}
.pz--r{margin-top:72px !important}
.col__pieces .cap{margin-top:12px;max-width:40ch}
.col__pieces .cap b{margin-bottom:6px}
.col__pieces .cap{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.col__pieces .cap b{font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;color:#8a8077}

/* "all on stupid wood": the book sits on the page ground, not a wooden table */
.flip .book{background:var(--paper);padding:28px}
.flip .book::before{display:none}

/* "this is weird": one piece per row, full width of the column, its words beside it; sides alternate */
.col__pieces{display:block;margin-top:96px}
.col__pieces .pz{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:center;max-width:none !important;margin:0 0 112px !important;justify-self:auto}
.col__pieces .pz--r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.col__pieces .pz--r > :first-child,.col__pieces .pz--r > .book{order:2}
.col__pieces .pz--r .cap{order:1}
.col__pieces .pz--sm{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.col__pieces .pz > picture,.col__pieces .pz > img,.col__pieces .pz > a{display:block;width:100%}
.col__pieces .swap{display:grid}
.col__pieces .swap img{grid-area:1/1}
.col__pieces .swap .cap{grid-area:auto;grid-column:2;grid-row:1}
.col__pieces .pz--r.swap img{grid-column:2;grid-row:1}
.col__pieces .pz--r.swap .cap{grid-column:1;grid-row:1}
.col__pieces .cap{margin:0;max-width:30ch;font-size:28px;line-height:1.2}
.col__pieces .cap b{margin-bottom:12px}
.col__pieces .flip .book{max-width:none}
@media (max-width:900px){.col__pieces .pz,.col__pieces .pz--r{display:block;margin:0 0 48px !important}.col__pieces .pz--r > :first-child{order:0}.col__pieces .cap{margin-top:14px;font-size:22px}}

/* THE PIECES, composed: two stacks of different widths, the right one starting lower, pieces at different sizes.
   Nothing can overlap because each stack flows. Every piece carries its reason. (After Rose & Co., without the clutter.) */
.cg{display:grid;grid-template-columns:7fr 5fr;column-gap:80px;margin-top:120px;align-items:start}
.cg__a,.cg__b{display:flex;flex-direction:column;gap:96px}
.cg__b{margin-top:200px}
.cp{margin:0 !important;max-width:none}
.cp--70{width:70%}
.cp--80{width:82%}
.cp--end{align-self:flex-end}
.cp img,.cp picture{display:block;width:100%;height:auto}
.cp .cap{margin-top:12px;max-width:34ch;font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.cp .cap b{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a8077;margin:0 0 6px}
.cg .swap{display:grid}
.cg .swap img{grid-area:1/1}
.cg .swap .cap{grid-area:2/1}
.cg .flip .book{max-width:none}
.cg .col__quote{max-width:34ch;margin-top:24px !important}
@media (max-width:900px){.cg{display:block;margin-top:48px}.cg__a,.cg__b{gap:40px}.cg__b{margin-top:40px}.cp--70,.cp--80{width:100%}}

/* "some of these need to bleed off page for depth": three pieces run past the column to the page edge, the rest stay in */
.v10 main{overflow-x:clip}
.cp--bleed-l{margin-left:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut))) !important;width:calc(100% + max((100vw - 1320px)/2,0px) + var(--gut))}
.cp--bleed-r{margin-right:calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut))) !important;width:calc(100% + max((100vw - 1320px)/2,0px) + var(--gut))}
.cp--bleed-l .cap{padding-left:calc(max((100vw - 1320px)/2,0px) + var(--gut))}
.cp--bleed-r .cap{padding-right:calc(max((100vw - 1320px)/2,0px) + var(--gut))}
@media (max-width:900px){.cp--bleed-l,.cp--bleed-r{margin:0 calc(-1 * var(--gut)) !important;width:auto}.cp--bleed-l .cap,.cp--bleed-r .cap{padding:0 var(--gut)}}

/* the site scroll, visibly alive: a pass in ninety seconds */
.dev__screen img.is-scrolling{animation-duration:90s !important}
.dev--tablet .dev__screen img.is-scrolling{animation-duration:100s !important}

/* "lots of weird space": the stacks hold four each, the right one starts a little lower, the gaps are even */
.cg__a,.cg__b{gap:72px}
.cg__b{margin-top:120px}
.cg .col__quote{margin-top:0 !important}

/* "same here" at the featured project: the email sits level with the foot of the newsletter; the row of three follows closely */
.fp__over{align-items:end}
.fp__over .pic--b{margin-top:0}
.fp__closer{margin-top:56px}

/* with three pieces in the right stack, it starts a little lower so the stacks end together */
.cg__b{margin-top:200px}

/* movement through the page: two slots change picture, the studio picture drifts, the stacks stagger */
.cg .swap img{aspect-ratio:3/2;object-fit:cover}
.cg .swap img{transition:opacity 1.6s ease}
@media (prefers-reduced-motion: no-preference){
  .col__p1 img{animation:v10-drift 40s ease-in-out infinite alternate;transform-origin:60% 50%}
}
.cg__b{margin-top:240px}

/* the group pages use Home's composition: the pieces in two staggered stacks, each with label, reason and two lines */
.gp-pieces{padding:24px 0 48px}
.gp-pieces .cg{margin-top:40px}
.cp .cap .cap__body{display:block;font-family:var(--book);font-size:16px;line-height:1.55;color:var(--body);margin-top:10px;max-width:46ch}

/* the dark close on every v10 page: cream heading, soft body (the v10 heading rule had turned it ink) */
.v10 .dark h2{color:#EDE6DA}
.v10 .dark p{color:#CFC6B8}
/* the "where we are going" note on About reads as body text, not a giant quote */
.ab7-story .col__quote .cap{font-family:var(--book) !important;font-size:16px !important;line-height:1.55 !important}

/* "big gap": the right stack starts a little below the left, not a screen below */
.cg__b{margin-top:96px}
.cg__a,.cg__b{gap:88px}

/* "what about text going over image": the studio picture runs the full width behind the words; the headline sits on the
   plaster wall at the left, with a soft cream wash under the text so it reads */
.col__grid{position:relative;display:block;min-height:clamp(560px,82vh,860px)}
.col__p1{position:absolute;inset:0;margin:0 calc(-1 * (max((100vw - 1320px)/2,0px) + var(--gut))) !important;z-index:0}
.col__p1 img{width:100%;height:100%;max-height:none;min-height:0;object-fit:cover;object-position:62% 50%}
.col__p1::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,247,242,.92) 0%,rgba(250,247,242,.78) 34%,rgba(250,247,242,.18) 58%,rgba(250,247,242,0) 75%)}
.col__head{position:relative;z-index:1;max-width:560px;padding:0;display:flex;flex-direction:column;justify-content:center;min-height:clamp(560px,82vh,860px)}
@media (max-width:900px){
  .col__grid{min-height:0}
  .col__p1{position:relative;inset:auto;margin:0 calc(-1 * var(--gut)) !important;height:52vh}
  .col__p1::after{background:linear-gradient(180deg,rgba(250,247,242,0) 50%,rgba(250,247,242,.9) 100%)}
  .col__head{min-height:0;padding:24px 0 8px;margin-top:-120px}
}

/* fix: the figure keeps its picture (the earlier figure rules set display:grid on figures); the button keeps its size */
.col__p1{display:block;overflow:hidden}
.col__p1 picture{display:block;position:absolute;inset:0}
.col__p1 img{position:absolute;inset:0;animation:none}
.col__head .btn{align-self:flex-start}
@media (prefers-reduced-motion: no-preference){.col__p1 img{animation:v10-drift 40s ease-in-out infinite alternate;transform-origin:62% 50%}}

/* a strip of four small pieces with titles, sliding slowly; a band of its own after the pieces (Carrie, 18 Oct) */
.strip{padding:40px 0 96px;overflow:hidden}
.strip__head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.strip__head h2{font-size:28px !important;margin:0}
.strip__track{overflow:hidden;padding-left:calc(max((100vw - 1320px)/2,0px) + var(--gut))}
.strip__row{display:flex;gap:32px;width:max-content;will-change:transform}
.strip__row .pic{flex:0 0 auto;width:300px;margin:0}
.strip__row .pic img{display:block;width:100%;height:220px;object-fit:cover}
.strip__row .cap{margin-top:10px;font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink);max-width:none}
.strip__row .cap b{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a8077;margin:0 0 4px}
@media (max-width:900px){.strip{padding:24px 0 56px}.strip__row .pic{width:220px}.strip__row .pic img{height:160px}}

/* the figure was kept in flow by an earlier ".col .pic{position:relative}" rule and never revealed; it is the backdrop */
.col .pic.col__p1{position:absolute;inset:0;height:auto;opacity:1 !important;transform:none !important;transition:none}
.col .pic.col__p1 img{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:900px){.col .pic.col__p1{position:relative;inset:auto;height:52vh}}


/* ============================================================
   WORDPRESS-ONLY: the Journal, the document prose, the admin bar
   ============================================================ */
.prose{font-size:17.5px;line-height:1.65;color:var(--body)}
.prose p,.prose ul,.prose ol{margin:0 0 1em}
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:2em 0 .5em}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:1.6em 0 .4em}
.prose a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.prose a:hover{border-bottom-color:var(--ink)}
.prose img{height:auto;max-width:100%}
.prose figure{margin:1.6em 0}
.prose figcaption{font-family:var(--ui);font-size:13px;color:var(--label);margin-top:8px}
.prose blockquote{margin:1.6em 0;padding-left:20px;border-left:1px solid var(--ink);font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink)}
.prose strong,.prose b{font-weight:400;color:var(--ink)}
.jn-post__photo{margin:0 0 32px}
.jn-post__photo img{display:block;width:100%;height:auto}
.jn-grid{grid-template-columns:repeat(3,1fr)}
.jn-grid .card .img{aspect-ratio:4/3}
.jn-nav{font-family:var(--ui);font-size:14px;margin-top:24px}
.jn-nav .nav-links{display:flex;gap:24px}
.jn-nav a{border-bottom:1px solid var(--line);padding-bottom:2px}
.jn-nav .current{color:var(--label)}
@media (max-width:1100px){.jn-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.jn-grid{grid-template-columns:1fr}}
.admin-bar .skip:focus{top:40px}

/* Gravity Forms, styled like the preview form */
.ct__form--gf{display:block;padding-top:12px}
.ct__form--gf .gform_fields{display:flex;flex-direction:column;gap:26px;list-style:none;margin:0;padding:0}
.ct__form--gf .gfield_label,.ct__form--gf legend.gfield_label{font-family:var(--serif);font-size:1.25rem;color:var(--ink);font-weight:400;margin:0 0 8px;padding:0}
.ct__form--gf .gfield_description{font-family:var(--ui);font-size:13.5px;color:var(--label);line-height:1.5;margin:0 0 8px;padding:0}
.ct__form--gf .gfield_required{color:var(--label);font-family:var(--ui);font-size:12px;margin-left:6px}
.ct__form--gf input[type=text],.ct__form--gf input[type=email],.ct__form--gf input[type=url],.ct__form--gf textarea{font-family:var(--book);font-size:17px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:2px}
.ct__form--gf input:focus,.ct__form--gf textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.ct__form--gf .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct__form--gf .ginput_complex label{font-family:var(--ui);font-size:12.5px;color:var(--label);display:block;margin-top:6px}
.ct__form--gf .gfield_checkbox,.ct__form--gf .gfield_radio{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.ct__form--gf .gchoice{display:flex;align-items:flex-start;gap:10px;font-family:var(--book);font-size:16.5px;color:var(--body);font-weight:300}
.ct__form--gf .gchoice input{margin-top:5px;accent-color:var(--accent);width:16px;height:16px;flex:0 0 16px}
.ct__form--gf .gform_button{display:inline-block;background:var(--accent);color:var(--ground);font-family:var(--book);font-size:15px;padding:13px 24px;border-radius:2px;border:1px solid var(--accent);cursor:pointer;margin-top:8px}
.ct__form--gf .gform_validation_errors,.ct__form--gf .validation_message{font-family:var(--ui);font-size:13.5px;color:#8A3B2E;margin-top:6px}
.ct__form--gf .gform_confirmation_message{font-size:17px;color:var(--body)}
@media (max-width:980px){.ct__form--gf .ginput_complex,.ct__form--gf .gfield_checkbox,.ct__form--gf .gfield_radio{grid-template-columns:1fr}}

/* On the checkout the page slid sideways once a card number was typed (found 21 Oct 2026). The cause: the Stripe
   plugin's invisible style-copying input took the theme's input width (1,009px). Only that element is constrained, so
   nothing else about scrolling changes. */
#wc-stripe-hidden-style-input{width:1px!important;max-width:1px!important;left:0!important}

/* ============================================================
   THE SHOP: WooCommerce's classic templates, in the site's clothes
   15 October 2026. Appended to the theme's style.css by theme-build.py.
   ============================================================ */
.shop{padding:48px 0 96px}
.shop__in{max-width:1100px;margin-inline:auto}
.shop h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.1;letter-spacing:0;color:var(--ink);margin:0 0 36px}
.shop .kick{margin:0 0 14px}
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 28px;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--cream2);font-size:16px;color:var(--ink)}
.woocommerce-error{border-left-color:#8A3B2E}
.woocommerce-message .button,.woocommerce-info .button{float:right;font-family:var(--ui);font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);margin-left:12px}
.woocommerce-error li,.woocommerce-message li{margin:0}
.screen-reader-text{position:absolute;left:-9999px}

/* buttons, one grammar */
.shop .button,.shop button.button,.shop #place_order,.shop .single_add_to_cart_button{display:inline-block;background:var(--accent);color:var(--ground);font-family:var(--book);font-size:15px;padding:13px 24px;border-radius:2px;border:1px solid var(--accent);cursor:pointer;line-height:1.3;text-decoration:none}
.shop .button:hover,.shop #place_order:hover{background:#3a4031}
.shop .button:disabled,.shop .button[disabled]{opacity:.5;cursor:default}

/* fields, same as the intake form */
.shop .form-row{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;padding:0}
.shop .form-row label{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
.shop .form-row label .required{color:var(--label);text-decoration:none;font-family:var(--ui);font-size:12px;margin-left:4px}
.shop .form-row label .optional{color:var(--label);font-family:var(--ui);font-size:12px;margin-left:6px}
.shop .input-text,.shop textarea,.shop select,.shop .select2-container .select2-selection--single{font-family:var(--book);font-size:17px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:2px;box-sizing:border-box;height:auto}
.shop .select2-container .select2-selection--single{height:48px;display:flex;align-items:center}
.shop .select2-container .select2-selection__arrow{top:12px}
.shop .input-text:focus,.shop textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.shop textarea{min-height:110px;resize:vertical}
.shop .form-row-first,.shop .form-row-last{width:calc(50% - 9px);display:inline-flex}
.shop .form-row-first{margin-right:18px}
.shop .woocommerce-input-wrapper{display:block}
.shop .woocommerce-invalid .input-text{border-color:#8A3B2E}
.shop .woocommerce-form__label-for-checkbox{font-family:var(--book);font-size:16px}

/* the checkout: your details left, the order right */
.shop form.checkout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;gap:0 clamp(32px,6vw,80px);align-items:start}
.shop form.checkout .woocommerce-NoticeGroup{grid-column:1 / -1;grid-row:1}
.shop .checkout-inline-error-message{font-family:var(--ui);font-size:13px;color:#8A3B2E;margin:0}
.shop form.checkout .col2-set{display:block}
.shop form.checkout .col2-set .col-1,.shop form.checkout .col2-set .col-2{width:100%;float:none}
.shop form.checkout h3,.shop #order_review_heading{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 18px}
.shop .woocommerce-additional-fields{margin-top:28px}
.shop #order_review_heading{grid-column:2;grid-row:2;margin-top:0}
.shop #order_review{grid-column:2;grid-row:3;background:var(--cream2);padding:28px 28px 24px;border:1px solid var(--line)}
.shop #customer_details{grid-column:1;grid-row:2 / span 2}
.shop table.shop_table{width:100%;border-collapse:collapse;font-size:16px;color:var(--ink);margin:0 0 20px}
.shop table.shop_table th,.shop table.shop_table td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.shop table.shop_table thead th{font-family:var(--ui);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--label);font-weight:500}
.shop table.shop_table tfoot th{font-family:var(--book);font-weight:400}
.shop table.shop_table tfoot .order-total{font-size:19px}
.shop table.shop_table td:last-child,.shop table.shop_table th:last-child{text-align:right}
.shop table.shop_table .product-quantity{font-family:var(--ui);font-size:13px;color:var(--label)}
.shop #payment{background:transparent}
.shop #payment ul.wc_payment_methods{list-style:none;margin:0 0 18px;padding:0}
.shop #payment li.wc_payment_method{padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.shop #payment li.wc_payment_method label{font-family:var(--book);margin-left:6px}
.shop #payment .payment_box{font-size:14.5px;color:var(--body);padding:10px 0 4px;background:transparent}
.shop #payment .payment_box p{margin:0}
.shop .woocommerce-terms-and-conditions-wrapper,.shop .woocommerce-privacy-policy-text{font-family:var(--ui);font-size:13px;color:var(--label);margin:0 0 16px}
.shop .place-order{margin:0}
.shop #place_order{width:100%}
.shop .wc_payment_method input[type=radio]{accent-color:var(--accent)}

/* the cart */
.shop .woocommerce-cart-form table.shop_table img{width:64px;height:auto}
.shop .woocommerce-cart-form .product-remove a{font-family:var(--ui);color:var(--label);text-decoration:none;font-size:18px}
.shop .woocommerce-cart-form .product-name a{color:var(--ink);text-decoration:none}
.shop .woocommerce-cart-form .coupon{display:none}
.shop .woocommerce-cart-form button[name=update_cart]{display:none}
.shop .cart-collaterals{max-width:460px;margin-left:auto;margin-top:28px}
.shop .cart_totals h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:0;text-transform:none;margin:0 0 14px}
.shop .wc-proceed-to-checkout .button{width:100%;text-align:center;box-sizing:border-box}
.shop .cart-empty{font-size:18px;color:var(--body)}
.shop .return-to-shop .button{margin-top:8px}
.shop .quantity .qty{width:64px;padding:8px;border:1px solid var(--line);font-family:var(--book);font-size:16px}

/* one product */
.shop div.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.shop div.product .woocommerce-product-gallery{grid-column:1}
.shop div.product .woocommerce-product-gallery img{width:100%;height:auto;display:block}
.shop div.product .summary{grid-column:2}
.shop div.product .product_title{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,1.1rem + 2vw,2.8rem);line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
.shop div.product p.price{font-family:var(--ui);font-size:15px;letter-spacing:.06em;color:var(--body);margin:0 0 20px}
.shop div.product .woocommerce-product-details__short-description{font-size:17.5px;line-height:1.6;color:var(--body);max-width:52ch;margin:0 0 24px}
.shop div.product form.cart{margin:0 0 28px}
.shop div.product form.cart .quantity{display:none}
.shop div.product .woocommerce-tabs{grid-column:1 / -1;max-width:68ch}
.shop div.product .woocommerce-tabs ul.tabs{display:none}
.shop div.product .woocommerce-tabs .panel p{font-size:17px;line-height:1.65;color:var(--body);margin:0 0 1em}
.shop div.product .woocommerce-tabs h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:0;text-transform:none;margin:0 0 .6em}

/* the shop list */
.shop ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.shop ul.products li.product{margin:0}
.shop ul.products li.product a img{width:100%;height:auto;display:block;background:var(--cream2);aspect-ratio:4/3;object-fit:cover}
.shop ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:16px 0 6px}
.shop ul.products li.product .price{font-family:var(--ui);font-size:14px;letter-spacing:.06em;color:var(--body);display:block;margin:0 0 12px}
.shop ul.products li.product .button{font-size:14px;padding:11px 20px}
.shop .woocommerce-pagination{margin-top:36px;font-family:var(--ui)}

/* the thank-you page and the account */
.shop .woocommerce-order p.woocommerce-notice{font-size:19px;color:var(--ink);max-width:60ch}
.shop ul.order_details{list-style:none;margin:28px 0;padding:0;display:flex;flex-wrap:wrap;gap:24px 40px;font-family:var(--ui);font-size:13px;color:var(--label);text-transform:uppercase;letter-spacing:.08em}
.shop ul.order_details li strong{display:block;font-family:var(--book);font-size:17px;color:var(--ink);text-transform:none;letter-spacing:0;margin-top:4px}
.shop .woocommerce-order h2,.shop .woocommerce-MyAccount-content h2,.shop .woocommerce-column__title{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:0;text-transform:none;margin:28px 0 14px}
.shop .woocommerce-customer-details address{font-style:normal;font-size:16px;color:var(--body);line-height:1.6}
.shop .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--ui);font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.shop .woocommerce-MyAccount-navigation a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px}
.shop .woocommerce-MyAccount-navigation .is-active a{border-bottom-color:var(--ink)}
.shop .woocommerce-MyAccount-content{font-size:17px;color:var(--body)}
.shop .woocommerce-MyAccount-content a{color:var(--ink)}
.shop form.login,.shop form.register{max-width:460px;margin:0}
.shop .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px)}
.shop .woocommerce-form-login__rememberme{margin:0 0 18px;display:block}

@media (max-width:900px){
  .shop form.checkout,.shop div.product,.shop .u-columns{grid-template-columns:1fr}
  .shop #order_review_heading,.shop #order_review,.shop #customer_details,.shop div.product .summary,.shop div.product .woocommerce-product-gallery{grid-column:1;grid-row:auto}
  .shop .form-row-first,.shop .form-row-last{width:100%;display:flex;margin-right:0}
  .shop ul.products{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:600px){.shop ul.products{grid-template-columns:1fr}}