/* K. McCrone Joinery: the shared stylesheet for every page but the 404 (which carries its own).

   The cream and navy rhythm and the timber gold, Fraunces display with italic accents, the
   marquee, the stats band, the process timeline, the full-bleed hero with the chalk lines, the
   scroll reveals, copy over photos and the van wordmark's weight.

   The design language: no mono, no gold chips, no numbered everything. Labels speak in the van's lettering (Saira, expanded); notes are written
   in pencil (Architects Daughter); and ONE system marks out the interior, the joiner's
   SETTING-OUT MARKS: the steel rule (ticks every 8, 40 and 80px), the pencil note, the
   cabinetmaker's triangle and the cut list. The chalk lines stay the hero's alone. */
/* fonts: start. Generated by tools/fonts.py from tools/fonts.json; do not edit. */
@font-face{font-family:'Architects Daughter';font-style:normal;font-weight:400;font-display:swap;src:url(images/fonts/architectsdaughter-v20-latin-normal-6f925fb5ef.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url(images/fonts/fraunces-v38-latin-italic-4af9c759c8.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(images/fonts/fraunces-v38-latin-normal-48282a415e.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(images/fonts/inter-v20-latin-normal-c940764593.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;src:url(images/fonts/marckscript-v22-latin-normal-d71f9b389d.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:500 700;font-stretch:125%;font-display:swap;src:url(images/fonts/saira-v23-latin-normal-85125a7d5b.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* fonts: end */
:root{
  --plaster:#f1ebe1; --plaster-2:#e6ddcf;
  --navy:#151a2e; --navy-2:#1f2640; --navy-deep:#0f1322;
  --timber:#c4a070;        /* fresh-sawn: accents on navy and photo (7.06:1 on navy) */
  --timber-mid:#947a59;    /* display sizes on cream only (3.41:1) */
  --timber-dark:#6c533a;   /* small timber text and links on cream (6.03:1) */
  --ink:#151a2e; --ink-2:#52545c; --graphite:#45474f;
  --cream:#f4efe6; --cream-2:#d9d3c8; --muted:#aab0bd; --muted-2:#8f95a3; --rule:#d6ccbd; --rule-d:#2b3350;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --label:'Saira','Inter',system-ui,sans-serif;                 /* the van's lettering: set with font-stretch:125% */
  --pencil:'Architects Daughter','Bradley Hand','Segoe Print',cursive;
  --script:'Marck Script',cursive;
  --gutter:clamp(20px,4vw,72px); --ease:cubic-bezier(.2,.8,.2,1);
  /* the steel rule: a hairline with ticks hanging off it, every 8, 40 and 80px, in currentColor */
  --ticks:linear-gradient(currentColor,currentColor) 0 0/100% 1px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 80px) 0 0/100% 13px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px) 0 0/100% 8px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) 0 0/100% 4px no-repeat;
  --ticks-v:linear-gradient(currentColor,currentColor) 0 0/1px 100% no-repeat,repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 80px) 0 0/13px 100% no-repeat,repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 40px) 0 0/8px 100% no-repeat,repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 8px) 0 0/4px 100% no-repeat;
  --tri:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'><path d='M2 52.5 L60 52.5 M5.5 54.5 L33.5 3 M28.5 3.5 L57.5 54' fill='none' stroke='%23c4a070' stroke-width='5' stroke-linecap='round'/></svg>");
  --tri-mid:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'><path d='M2 52.5 L60 52.5 M5.5 54.5 L33.5 3 M28.5 3.5 L57.5 54' fill='none' stroke='%23947a59' stroke-width='5' stroke-linecap='round'/></svg>");
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--plaster);scroll-padding-top:84px}
/* smooth in-page scrolling, switched on after load: a smooth jump to another page's #section is
   aimed before the fonts settle and overshoots */
html.smooth{scroll-behavior:smooth}
body{background:var(--plaster);color:var(--ink);font-family:var(--sans);overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.nowrap{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.lbl{font-family:var(--label);font-stretch:125%}
.pencil{font-family:var(--pencil);font-weight:400;letter-spacing:.01em}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:var(--cream);font-family:var(--label);font-stretch:125%;font-weight:600;font-size:14px;padding:12px 16px;transition:top .2s}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--timber-dark);outline-offset:3px}

/* The setting-out marks. .rule is the steel rule: section dividers and edge details. */
.rule{display:block;height:13px;color:rgba(21,26,46,.34);background:var(--ticks);pointer-events:none}
.rule.t{color:rgba(196,160,112,.6)}

/* Top bar. A zero-height sticky rail carries it, so it floats over the hero
   like a fixed bar but sits UNDER anything placed above it in the
   flow (the preview strip) and only pins once that has scrolled away. */
.top-rail{position:sticky;top:0;height:0;z-index:20}
body.menu-open .top-rail{z-index:60}
.top{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px var(--gutter);color:var(--cream);transition:background .35s var(--ease),color .35s var(--ease),padding .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid transparent}
.top::before{content:'';position:absolute;inset:0 0 -40px 0;background:linear-gradient(180deg,rgba(15,19,34,.62) 0%,rgba(15,19,34,.22) 60%,transparent 100%);pointer-events:none;z-index:-1;transition:opacity .35s var(--ease)}
.top.scrolled{background:rgba(241,235,225,.92);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);color:var(--ink);border-bottom-color:rgba(21,26,46,.1);padding:12px var(--gutter)}
.top.scrolled::before{opacity:0}
.top .brand{display:flex;align-items:center;color:inherit;flex:0 1 auto;min-width:0}
.top .brand svg{display:block;height:clamp(30px,2.3vw,40px);width:auto;max-width:100%;fill:currentColor;transition:height .35s var(--ease)}
.top.scrolled .brand svg{height:clamp(26px,1.9vw,32px)}
.top nav{display:flex;align-items:center;gap:30px;font-family:var(--label);font-stretch:125%;font-weight:600;font-size:14px;letter-spacing:.01em}
.top nav a{position:relative;padding:4px 0}
.top nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.top nav a:hover::after,.top nav a:focus-visible::after,.top nav a[aria-current="page"]::after{transform:scaleX(1)}
.top .call{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-weight:700;font-feature-settings:'tnum'}
.top .call::before,.top .call-m::before{content:'';width:8px;height:8px;background:var(--timber);border-radius:50%;animation:p 2.4s infinite;flex:0 0 auto}
.top.scrolled .call::before,.top.scrolled .call-m::before{background:var(--timber-dark)}
@keyframes p{0%,100%{box-shadow:0 0 0 0 rgba(196,160,112,.65)}50%{box-shadow:0 0 0 12px rgba(196,160,112,0)}}
.top-r{display:none;align-items:center;gap:4px;position:relative;z-index:60;flex:0 0 auto}
.call-m{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-stretch:125%;font-weight:700;font-size:14px;padding:14px 8px;white-space:nowrap}

/* Hamburger button - mobile/tablet only */
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:inherit;padding:8px;position:relative;z-index:60;width:44px;height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.menu-btn span{display:block;width:24px;height:1.5px;background:currentColor;margin:5px auto;transition:transform .3s var(--ease),opacity .3s var(--ease);pointer-events:none}
.top.is-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.top.is-open .menu-btn span:nth-child(2){opacity:0}
.top.is-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .top{padding:16px var(--gutter);gap:12px}
  .top.scrolled{padding:10px var(--gutter)}
  .top .brand svg{height:26px}
  .top.scrolled .brand svg{height:23px}
  .top-r{display:flex}
  /* Without JavaScript the menu is a plain row of links under the logo. */
  html:not(.js) .top{flex-wrap:wrap;row-gap:10px}
  html:not(.js) .top-r{display:none}
  html:not(.js) .top nav{flex:1 1 100%;flex-wrap:wrap;gap:10px 22px}
  html.js .menu-btn{display:block}
  html.js .top nav{
    position:fixed;inset:0;
    background:var(--plaster);
    flex-direction:column;justify-content:center;align-items:center;gap:30px;
    font-family:var(--serif);font-stretch:normal;font-weight:400;font-style:italic;
    font-size:clamp(34px,10vw,64px);letter-spacing:-.025em;
    color:var(--ink);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);
    transition:opacity .35s var(--ease),transform .4s var(--ease),visibility .35s;
    z-index:55;padding:0 var(--gutter);
  }
  html.js .top nav a{padding:6px 0}
  html.js .top nav a::after{height:2px;background:var(--timber-mid)}
  html.js .top nav .call{font-family:var(--label);font-stretch:125%;font-style:normal;font-weight:700;font-size:.42em;letter-spacing:.01em;color:var(--timber-dark);margin-top:10px}
  .top.is-open{color:var(--ink);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
  .top.is-open::before{opacity:0}
  .top.is-open .call-m{visibility:hidden}
  html.js .top.is-open nav{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  body.menu-open{overflow:hidden}
}
@media (max-width:360px){ .top .brand svg{height:21px} .top.scrolled .brand svg{height:19px} .call-m{padding:14px 4px} }

/* HERO - full-bleed photo (our new hand cut roof, 2 Oct 2026) + layered type.
   The photo and the chalk lines share one box and one zoom, so the lines stay on the timbers. */
.hero{position:relative;height:auto;min-height:max(600px, min(80svh, 860px));overflow:hidden;background:var(--navy);display:flex;flex-direction:column}
.hero-media{position:absolute;inset:0;transform:scale(1.06);animation:slow-zoom 18s ease-out infinite alternate}
@keyframes slow-zoom{to{transform:scale(1.14)}}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;filter:contrast(1.05) saturate(1.04)}
/* A navy wash: deep behind the type on the left and along the foot, clear over the roof. */
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 72% at 0% 92%,rgba(15,19,34,.5) 0%,rgba(15,19,34,0) 76%),linear-gradient(180deg,rgba(15,19,34,.46) 0%,rgba(15,19,34,.06) 22%,rgba(15,19,34,0) 40%,rgba(15,19,34,.3) 64%,rgba(15,19,34,.88) 100%);z-index:1}
.hero::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");mix-blend-mode:overlay;z-index:2;pointer-events:none}

/* Setting-out: three chalk lines snap along the roof's own timbers, one after another, in the
   photo's coordinates (viewBox = the 2048x1536 frame, sliced like the photo's cover crop). */
.chalk{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.chalk path{fill:none;stroke-linecap:round}
.chalk .halo{stroke:#0f1322;stroke-width:11;opacity:0;animation:halo 6.4s ease-out infinite}
.chalk .glow{stroke:#fbf6ea;stroke-width:24;opacity:0;animation:glow 6.4s ease-out infinite}
.chalk .mk{stroke:#f6efe0;stroke-width:4.2;stroke-linecap:butt;stroke-dasharray:38 1.6 11 1.2 24 2.4 6 1 17 1.4 29 2 9 1.1;opacity:0;animation:mark 6.4s ease-out infinite}
.chalk .mk2{stroke-width:2.2;stroke-dasharray:.9 8 1.3 12 .7 6 1.6 15;transform:translateY(3.2px);stroke-opacity:.55}
.chalk .str{stroke:#fffaf0;stroke-width:3.6;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:snap 6.4s var(--ease) infinite}
.chalk .tw{animation:twang 6.4s linear infinite}
.chalk .cl2 *{animation-delay:.9s}
.chalk .cl3 *{animation-delay:1.8s}
@keyframes snap{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}5.5%{stroke-dashoffset:0;opacity:1}13%{opacity:.9}22%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes twang{0%,5.5%{transform:translateY(0)}7%{transform:translateY(-11px)}8.5%{transform:translateY(7px)}10%{transform:translateY(-4px)}11.5%{transform:translateY(2px)}13%,100%{transform:translateY(0)}}
@keyframes glow{0%,5%{opacity:0}7%{opacity:.3}20%{opacity:.08}30%,100%{opacity:0}}
@keyframes mark{0%,6%{opacity:0}9%{opacity:.95}40%{opacity:.78}72%{opacity:.55}88%,100%{opacity:0}}
@keyframes halo{0%,6%{opacity:0}9%{opacity:.22}72%{opacity:.12}88%,100%{opacity:0}}
.chalk .pt{display:none}
@media (max-aspect-ratio:3/4){
  .chalk .ls{display:none} .chalk .pt{display:inline}
  .chalk .str{stroke-width:5} .chalk .mk{stroke-width:5.8} .chalk .mk2{stroke-width:3;transform:translateY(4.5px)} .chalk .halo{stroke-width:14} .chalk .glow{stroke-width:30}
}

.hero-content{position:relative;z-index:4;flex:1 1 auto;padding:clamp(128px,15vh,168px) var(--gutter) clamp(28px,4vh,52px);display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream)}
/* Behind the type only: a navy wash from the left, fading in just above the eyebrow, so the words
   always sit on navy and the sky and roof above them stay clear. */
.hero-type{position:relative}
@media(min-width:721px){.hero-type::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:-110px;bottom:calc(clamp(28px,4vh,52px) * -1);background:linear-gradient(90deg,rgba(15,19,34,.86) 0%,rgba(15,19,34,.78) max(34%,470px),rgba(15,19,34,.42) max(52%,610px),rgba(15,19,34,0) max(70%,760px));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100px);mask-image:linear-gradient(180deg,transparent 0,#000 100px)}}
.hero-eyebrow{font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--cream);margin-bottom:20px;display:flex;gap:20px;align-items:center;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 16px rgba(15,19,34,.9),0 0 4px rgba(15,19,34,.9)}
.hero-eyebrow .l{flex:0 0 60px;height:1px;background:var(--timber)}
.hero-h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7.4vw,120px);line-height:.92;letter-spacing:-.04em;max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.3);font-variation-settings:'opsz' 144}
.hero-h1 .it{font-style:italic;font-weight:500;color:var(--timber)}
.hero-h1 .line,.ph-h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero-h1 .line span,.ph-h1 .line > span{display:inline-block;transform:translateY(105%);animation:rise 1.2s var(--ease) forwards}
.hero-h1 .line:nth-child(1) span,.ph-h1 .line:nth-child(1) > span{animation-delay:.3s}
.hero-h1 .line:nth-child(2) span,.ph-h1 .line:nth-child(2) > span{animation-delay:.55s}
.hero-h1 .line:nth-child(3) span,.ph-h1 .line:nth-child(3) > span{animation-delay:.8s}
.hero-h1 .line:nth-child(4) span{animation-delay:1.05s}
@keyframes rise{to{transform:translateY(0)}}
.hero-foot{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:24px;align-items:end;margin-top:38px;padding-top:22px;border-top:1px solid rgba(244,239,230,.3)}
.hero-foot .col{display:flex;flex-direction:column;gap:6px}
.hero-foot .k{font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:600;letter-spacing:.02em;color:#d8d3ca}
.hero-foot .v{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3}
.hero-foot .v.big{font-size:30px;font-weight:400}
.hero-foot .v .it{font-style:italic;color:var(--timber)}
.btn{display:inline-flex;align-items:center;gap:14px;padding:17px 26px;background:var(--timber);color:var(--navy);font-family:var(--label);font-stretch:125%;font-size:15px;font-weight:700;letter-spacing:.01em;transition:transform .3s,background .3s,color .3s;white-space:nowrap;font-feature-settings:'tnum'}
.btn:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.btn:active{background:var(--timber-dark);color:var(--cream)}
.btn .a{transition:transform .3s var(--ease)}
.btn:hover .a{transform:translateX(6px)}
.hero-foot .btn{justify-self:end}
@media(max-width:720px){
  .hero{height:auto;min-height:max(560px, calc(100svh - var(--above,0px)));max-height:none}
  .hero-content{padding-top:clamp(104px,14vh,132px)}
  .hero .bg{object-position:50% 0%}
  .hero::before{background:linear-gradient(180deg,rgba(15,19,34,.5) 0%,rgba(15,19,34,.1) 13%,rgba(15,19,34,.06) 26%,rgba(15,19,34,.46) 40%,rgba(15,19,34,.76) 52%,rgba(15,19,34,.88) 66%,rgba(15,19,34,.94) 100%)}
  .hero-h1{font-size:clamp(40px,11.4vw,76px);letter-spacing:-.035em;text-shadow:0 2px 3px rgba(0,0,0,.5),0 2px 22px rgba(0,0,0,.55)}
  .hero-eyebrow{gap:12px;font-size:13px;margin-bottom:16px;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}
  .hero-eyebrow .l{flex-basis:28px}
  .hero-eyebrow .x{display:none}
  .hero-foot{grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:24px;padding-top:18px}
  .hero-foot .v.big{font-size:22px}
  .hero-foot .btn{grid-column:1 / -1;justify-self:stretch;justify-content:space-between;padding:17px 20px}
}

/* Pull marquee - our list, with the cabinetmaker's triangle between */
.strip{background:var(--navy);color:var(--plaster);padding:22px 0;overflow:hidden;border-top:1px solid var(--navy-2);border-bottom:1px solid var(--navy-2)}
.strip-track{display:flex;gap:46px;width:max-content;animation:scrl 52s linear infinite;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,3vw,38px);white-space:nowrap}
.strip-track span{display:inline-flex;align-items:center;gap:46px}
.strip-track span::after{content:'';flex:0 0 auto;width:.62em;height:.56em;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 56'><path d='M2 52.5 L60 52.5 M5.5 54.5 L33.5 3 M28.5 3.5 L57.5 54' fill='none' stroke='%23c4a070' stroke-width='3.4' stroke-linecap='round'/></svg>") center/contain no-repeat}
@keyframes scrl{to{transform:translateX(-50%)}}

/* INTRO - his bio beside the list of what we do */
.intro{padding:clamp(80px,12vh,180px) var(--gutter) clamp(64px,9vh,128px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,8vw,120px);align-items:start}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:36px;padding:72px var(--gutter) 56px}}
.intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.035em}
.intro h2 .it{font-style:italic;font-weight:500;color:var(--timber-mid)}
.intro-side{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:44ch;padding-top:.6em}
.intro-side p+p{margin-top:18px}
.intro-side .lede{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.4;color:var(--ink);font-style:italic;margin-bottom:24px}
.intro-side a{color:var(--ink);border-bottom:1px solid var(--timber-mid);white-space:nowrap}
.intro-side .note{font-family:var(--pencil);font-size:19px;line-height:1.4;color:var(--graphite);margin-top:22px;display:flex;gap:12px;align-items:baseline}
.intro-side .note::before{content:'';flex:0 0 auto;width:14px;height:13px;background:var(--tri-mid) center/contain no-repeat}

/* SERVICES - four groups as photo cards, copy over the photo. The photo shows through and behind
   the words. No plate and no long scrim on any photo. The words
   stay at the foot of each card (the top of every card is the photo alone), on the quietest part
   of its photo, carried by
     - a wash behind the words only: a patch of .26 to .42 (by photo), blurred to nothing at its
       edges, so no boundary shows anywhere, and
     - a halo on the letters themselves: a thin ring hard against the strokes, then a soft glow,
   with heavier type. The two bright photos (the doors, the kitchen) take the ink reversed: navy
   words, a cream halo and a cream wash, so nothing on them is darkened. Contrast measured per line
   over the rendered photos. The setting-out language stays: the steel rule, the pencil
   label, the cut list. On phones the two wide photos are shown whole, with their words on the
   round-2 plate under them, so nothing is laid over those photos. Each card links to its section
   on the services page. */
.services{padding:0 var(--gutter) clamp(80px,12vh,160px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px) clamp(16px,2vw,28px);grid-auto-rows:auto}
.svc{position:relative;overflow:hidden;background:var(--navy-2);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:30px;min-height:480px;transition:transform .6s var(--ease);
  /* the wash colour and strength, and the halos, in the card's ink */
  --wc:15 19 34;--wa:.42;
  --halo:0 0 1px rgb(15 19 34 / .95),0 0 2px rgb(15 19 34 / .95),0 0 3px rgb(15 19 34 / .85),0 0 6px rgb(15 19 34 / .65),0 0 12px rgb(15 19 34 / .4);
  --halo-pen:0 0 1px rgb(15 19 34 / 1),0 0 1px rgb(15 19 34 / 1),0 0 2px rgb(15 19 34 / .95),0 0 4px rgb(15 19 34 / .8),0 0 8px rgb(15 19 34 / .55),0 0 16px rgb(15 19 34 / .35);
  --halo-big:0 0 1px rgb(15 19 34 / .9),0 0 2px rgb(15 19 34 / .85),0 0 4px rgb(15 19 34 / .7),0 0 10px rgb(15 19 34 / .5),0 0 22px rgb(15 19 34 / .35)}
.svc:hover{transform:translateY(-6px)}
.svc:focus-within{outline:2px solid var(--timber);outline-offset:4px}
.svc .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.svc:hover .img{transform:scale(1.12)}
.svc-content{position:relative;z-index:1;width:100%;max-width:470px}
/* the wash: a patch behind the words only, blurred to nothing (no edge anywhere) */
.svc-content::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-30px -46px -22px -46px;background:rgb(var(--wc) / var(--wa));filter:blur(24px)}
.svc .rule-s{display:block;width:min(100%,300px);height:13px;margin-bottom:10px;color:rgba(244,239,230,.82);background:var(--ticks);filter:drop-shadow(0 0 1px rgba(15,19,34,.9)) drop-shadow(0 0 3px rgba(15,19,34,.6))}
.svc .mark{display:block;font-family:var(--pencil);font-size:19px;line-height:1.3;color:inherit;margin-bottom:6px;text-shadow:var(--halo-pen)}
.svc h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,50px);line-height:.98;letter-spacing:-.025em;margin-bottom:12px;text-shadow:var(--halo-big)}
.svc h3 .it{font-style:italic;color:inherit}
/* the whole card is the heading's link (its box stretched over the card, clipped by it) */
.svc-link::after{content:'';position:absolute;z-index:3;inset:-2400px}
.svc-link:focus-visible{outline:none}
.svc p{font-size:15px;font-weight:500;line-height:1.5;color:inherit;max-width:40ch;margin-bottom:14px;text-shadow:var(--halo)}
.svc .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:700;color:inherit;white-space:nowrap;margin-top:2px;text-shadow:var(--halo)}
.svc .go::after{content:'\2192';display:inline-block;transition:transform .4s var(--ease)}
.svc:hover .go::after{transform:translateX(5px)}
.svc .go.pen{font-family:var(--pencil);font-stretch:normal;font-weight:400;font-size:20px;letter-spacing:.01em;text-shadow:var(--halo-pen)}
/* the cut list on a photo: the ruled two-column list, its rows tight and only as long as the words */
.svc .cut{grid-template-columns:max-content max-content;column-gap:18px;margin:4px 0 14px}
.svc .cut dt,.svc .cut dd,.svc .cut > div:last-child dt,.svc .cut > div:last-child dd{padding:5px 0 4px;border-color:color-mix(in srgb,currentColor 45%,transparent);color:inherit;text-shadow:var(--halo)}
.svc .cut dt,.svc .cut > div:last-child dt{padding-top:8px}
.svc .cut dd{font-size:18px;font-weight:500;line-height:1.25}
/* the reversed ink, for the two bright photos: navy words, a cream halo and a cream wash */
.svc.ink{color:var(--ink);background:var(--plaster-2);--wc:244 239 230;--wa:.32;
  --halo:0 0 1px rgb(244 239 230 / .95),0 0 2px rgb(244 239 230 / .95),0 0 3px rgb(244 239 230 / .85),0 0 6px rgb(244 239 230 / .65),0 0 12px rgb(244 239 230 / .4);
  --halo-pen:0 0 1px rgb(244 239 230 / 1),0 0 1px rgb(244 239 230 / 1),0 0 2px rgb(244 239 230 / .95),0 0 4px rgb(244 239 230 / .8),0 0 8px rgb(244 239 230 / .55),0 0 16px rgb(244 239 230 / .35);
  --halo-big:0 0 1px rgb(244 239 230 / .9),0 0 2px rgb(244 239 230 / .85),0 0 4px rgb(244 239 230 / .65),0 0 9px rgb(244 239 230 / .4),0 0 18px rgb(244 239 230 / .22)}
.svc.ink .rule-s{color:rgba(21,26,46,.7);filter:drop-shadow(0 0 1px rgba(244,239,230,.9)) drop-shadow(0 0 3px rgba(244,239,230,.6))}
.svc.s1{grid-column:span 7;min-height:580px;--wa:.45}
.svc.s2{grid-column:span 5;min-height:580px}
/* the doors: where the card is narrow enough to show the whole photo, its herringbone floor and the
   skirtings fill the foot of the card; the words stand above them (the floor's height on screen,
   about 90px at 1024 wide, nothing from 1366) */
.svc.s2{padding-bottom:clamp(30px,calc(270px - 17.5vw),90px)}
.svc.s3{grid-column:span 4;min-height:540px}
.svc.s4{grid-column:span 8;min-height:540px;--wa:.26}
/* the two wide cards: the words smaller, in the bottom-left corner; the roof's narrower still, over
   the scaffold and the slates, clear of the new sarking */
.svc.s1 .svc-content{max-width:300px}
.svc.s4 .svc-content{max-width:430px}
.svc.s1 h3{font-size:clamp(26px,2.3vw,34px)}
.svc.s4 h3{font-size:clamp(28px,2.7vw,40px)}
/* portrait photos in the narrow cards, landscape in the wide ones (no upscaling); each placed so its
   subject stays clear of the words */
.s1 .img{object-position:0% 30%}
.s2 .img{object-position:50% 0%}
.s3 .img{object-position:50% 100%}
.s4 .img{object-position:0% 50%}
@media(max-width:900px){.svc.s1,.svc.s2,.svc.s3,.svc.s4{grid-column:span 12;min-height:520px}.svc{padding:26px 22px}
  /* the doors' floor again: about 75px at the foot of a phone's card, none from about 500 wide */
  .svc.s2{padding-bottom:clamp(26px,calc(363px - 67.4vw),86px)}
  /* phones: the two wide photos are shown whole (their own shape, no zoom), and their words follow on
     the round-2 plate under the photo, its rule along the photo's bottom edge: nothing is laid over
     the photo */
  .svc.plate-sm{display:block;min-height:0;padding:0;background:var(--navy);color:var(--cream);--halo:none;--halo-pen:none;--halo-big:none}
  .svc.plate-sm .img,.svc.plate-sm:hover .img{position:relative;inset:auto;height:auto;aspect-ratio:auto;transform:none}
  .svc.plate-sm .svc-content{max-width:none;padding:32px 22px 22px;margin-top:-13px}
  .svc.plate-sm .svc-content::before{inset:0 0 auto 0;height:13px;z-index:0;filter:none;color:rgba(196,160,112,.62);background:var(--ticks)}
  .svc.plate-sm .rule-s{display:none}
  .svc.plate-sm .mark{font-size:18px;color:var(--timber);margin-bottom:8px}
  .svc.plate-sm h3{font-weight:400;font-size:28px;margin-bottom:12px}
  .svc.plate-sm h3 .it,.svc.plate-sm .go{color:var(--timber)}
  .svc.plate-sm .go{font-weight:600;margin-top:4px}
  .svc.plate-sm .cut{grid-template-columns:max-content 1fr;column-gap:22px;margin:4px 0 16px}
  .svc.plate-sm .cut dt,.svc.plate-sm .cut dd,.svc.plate-sm .cut > div:last-child dt,.svc.plate-sm .cut > div:last-child dd{padding:7px 0 6px;border-color:rgba(244,239,230,.16)}
  .svc.plate-sm .cut dt,.svc.plate-sm .cut > div:last-child dt{padding-top:10px;color:var(--muted)}
  .svc.plate-sm .cut dd{font-size:17px;font-weight:400;line-height:1.3}}
/* the rest of our list: no photos of these here, so no picture, never a borrowed one */
.svc-more{grid-column:span 12;display:grid;grid-template-columns:1fr 3fr;gap:24px 40px;padding-top:34px;position:relative;align-items:start}
.svc-more::before{content:'';position:absolute;left:0;right:0;top:0;height:13px;color:rgba(21,26,46,.34);background:var(--ticks)}
.svc-more .note{grid-column:1;grid-row:1;font-family:var(--pencil);font-size:20px;line-height:1.35;color:var(--graphite);padding-top:.35em}
.svc-more ul{grid-column:2;grid-row:1}
.svc-more ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,2.8vw,42px);letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.svc-more li{display:inline-flex;align-items:center;gap:26px}
.svc-more li::after{content:'';width:.5em;height:.45em;background:var(--tri-mid) center/contain no-repeat}
.svc-more li:last-child::after{content:none}
.svc-more p:not(.note){grid-column:2;font-size:16px;line-height:1.6;color:var(--ink-2)}
.svc-more p a{color:var(--ink);border-bottom:1px solid var(--timber-mid);white-space:nowrap}
@media(max-width:900px){.svc-more{grid-template-columns:1fr;grid-auto-rows:auto}.svc-more .note,.svc-more ul,.svc-more p:not(.note){grid-column:1;grid-row:auto}.svc-more ul{gap:4px 18px}.svc-more li{gap:18px}}

/* Big quote - magazine pull, our one Facebook recommendation, verbatim */
.quote{padding:clamp(100px,15vh,200px) var(--gutter);background:var(--plaster-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center;position:relative;overflow:hidden}
.quote::before{content:'\201C';font-family:var(--serif);font-weight:300;font-size:clamp(180px,28vw,400px);color:var(--timber-mid);opacity:.22;position:absolute;top:-20px;left:50%;transform:translateX(-50%);line-height:1;pointer-events:none}
.quote-inner{position:relative;max-width:1100px;margin:0 auto}
.quote q{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,4vw,58px);line-height:1.18;letter-spacing:-.018em;color:var(--ink);quotes:none}
.quote q .em{color:var(--timber-dark);font-weight:400}
.quote .cite{margin-top:44px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.quote .cite .name{font-family:var(--serif);font-stretch:normal;font-style:italic;font-weight:400;font-size:22px;letter-spacing:-.01em;color:var(--ink)}

/* The cut list: what was done, set out as a joiner's list, not a spec line */
.cut{display:grid;grid-template-columns:max-content 1fr;column-gap:22px;margin:0}
.cut > div{display:contents}
.cut dt,.cut dd{padding:9px 0 8px;border-top:1px solid var(--rule-d)}
.cut dt{font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted-2);padding-top:12px}
.cut dd{font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--cream)}
.cut > div:last-child dt,.cut > div:last-child dd{border-bottom:1px solid var(--rule-d)}
.cut.on-cream dt,.cut.on-cream dd,.cut.on-cream > div:last-child dt,.cut.on-cream > div:last-child dd{border-color:var(--rule)}
.cut.on-cream dt{color:var(--ink-2)}
.cut.on-cream dd{color:var(--ink)}

/* Selected work - three of our jobs, each set out differently: the photo big and the words beside
   it, then the other way round, then the job's list as a schedule */
.projects{padding:clamp(80px,12vh,160px) 0 clamp(64px,9vh,120px);background:var(--navy);color:var(--cream)}
.projects-head{padding:0 var(--gutter);display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end;margin-bottom:56px}
@media(max-width:720px){.projects-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}}
.projects-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7vw,112px);line-height:.92;letter-spacing:-.035em}
.projects-head h2 .it{font-style:italic;color:var(--timber)}
.projects-head p{font-size:16px;line-height:1.6;color:var(--muted);max-width:44ch}
.projects-head .note{font-family:var(--pencil);font-size:18px;color:var(--timber);margin-top:10px}
.proj-list{display:flex;flex-direction:column}
.proj{position:relative;display:grid;grid-template-columns:7fr 5fr;border-top:1px solid var(--rule-d);padding:40px var(--gutter);transition:background .4s var(--ease);align-items:center;gap:clamp(32px,4vw,64px)}
.proj.flip{grid-template-columns:5fr 7fr}
.proj.flip > .img-wrap{order:2}
.proj:last-child{border-bottom:1px solid var(--rule-d)}
.proj:hover{background:rgba(196,160,112,.05)}
.proj .img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-2)}
.proj .img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.proj:hover .img-wrap img{transform:scale(1.06)}
/* photo labels: written in pencil on a scrap of navy, never a gold chip */
.proj .tag,.job .tag,.wipe .tag{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--pencil);font-size:15px;line-height:1.3;letter-spacing:.01em;background:rgba(15,19,34,.86);color:var(--cream);padding:5px 10px 6px;pointer-events:none}
.proj-meta{display:flex;flex-direction:column;gap:14px}
.proj-date,.job-date{font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--timber)}
.proj h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,46px);line-height:1.02;letter-spacing:-.025em}
.proj h3 .it{font-style:italic;color:var(--timber)}
.proj .desc{font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch}
.proj .steps,.job .steps{list-style:none;display:flex;flex-direction:column;font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--cream)}
.proj .steps li,.job .steps li{display:flex;gap:14px;align-items:baseline;padding:9px 0 8px;border-top:1px solid var(--rule-d)}
.proj .steps li:last-child,.job .steps li:last-child{border-bottom:1px solid var(--rule-d)}
.proj .steps li::before,.job .steps li::before{content:'';flex:0 0 auto;width:13px;height:12px;background:var(--tri) center/contain no-repeat}
.proj .cut,.job .cut{margin-top:6px}
@media(max-width:720px){
  .proj,.proj.flip{grid-template-columns:1fr;gap:24px;padding:32px var(--gutter)}
  .proj.flip > .img-wrap{order:0}
}
/* the way on to every job, closing the band under the last row */
.projects-foot{padding:44px var(--gutter) 0}
.more-link{display:inline-flex;align-items:baseline;gap:14px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;color:var(--cream);border-bottom:1px solid var(--timber);padding-bottom:6px;transition:color .3s}
.more-link .a{color:var(--timber);transition:transform .4s var(--ease)}
.more-link:hover{color:var(--timber)}
.more-link:hover .a{transform:translateX(6px)}

/* Photos that open in the viewer. Without JavaScript each is a plain link to the photo itself.
   The corner mark says "this opens". */
.phl{position:relative;display:block;overflow:hidden;background:var(--navy-2);cursor:zoom-in}
.phl img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.phl:hover img{transform:scale(1.04)}
.phl::after{content:'';position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(15,19,34,.62) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7' fill='none' stroke='%23f4efe6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/16px no-repeat;opacity:0;transform:scale(.85);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.phl:hover::after,.phl:focus-visible::after,.phl.lead::after{opacity:1;transform:none}
.phl:focus-visible{outline:2px solid var(--timber);outline-offset:3px}

/* Before/after. The After wipes across the Before about 1.5s after the row comes in;
   the toggle (or a tap on the photo) wipes it back and forth. Every rule that hides the After
   hangs off .ba-ready, which the wipe script sets: with no JavaScript (or a failed script)
   the After is simply shown, with its label, and a link to the Before photo. */
.wipe{position:relative;overflow:hidden;background:var(--navy-2)}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wipe .b-link{position:absolute;inset:0;display:block}
.wipe .tag.ta{opacity:0}
.wipe .tag.tb{background:var(--cream);color:var(--navy)}
.ba-ready{cursor:pointer}
.ba-ready img.b{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.ba-ready.show-after img.b{clip-path:inset(0 0 0 0)}
.ba-ready .tag{transition:opacity .45s var(--ease)}
.ba-ready .tag.ta{opacity:1}
.ba-ready .tag.tb{opacity:0}
.ba-ready.show-after .tag.ta{opacity:0}
.ba-ready.show-after .tag.tb{opacity:1}
/* the wipe's leading edge: a marking-knife line drawn across with it, seen only while it moves */
.ba-edge{display:none}
.ba-ready .ba-edge{display:block;position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;z-index:2;background:#f6efe0;box-shadow:0 0 0 1px rgba(15,19,34,.18),0 0 14px rgba(15,19,34,.5);opacity:0;pointer-events:none;transition:left 1.1s var(--ease),opacity .3s var(--ease)}
.ba-ready.show-after .ba-edge{left:100%}
.ba-ready.wiping .ba-edge{opacity:.95}
.ba-toggle,.ba-view{display:none}
.ba-ready .ba-toggle{display:inline-flex;align-items:center;gap:10px;position:absolute;right:12px;bottom:12px;z-index:3;min-height:44px;padding:0 16px;border:0;background:var(--cream);color:var(--navy);font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:background .3s}
.ba-ready .ba-toggle:hover{background:#fff}
.ba-ready .ba-view{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:10px;right:10px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(15,19,34,.62) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7' fill='none' stroke='%23f4efe6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;cursor:zoom-in;transition:background-color .3s}
.ba-ready .ba-view:hover{background-color:rgba(15,19,34,.85)}
.ba-ready .ba-toggle:focus-visible,.ba-ready .ba-view:focus-visible{outline:2px solid var(--timber);outline-offset:3px}
.ba-nojs{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:700;background:var(--cream);color:var(--navy);padding:9px 12px}
.ba-ready .ba-nojs{display:none}
@media(max-width:420px){.ba-ready .ba-toggle{padding:0 12px;font-size:13px}.wipe .tag{max-width:54%;font-size:14px;padding:4px 8px 5px}}

/* Process - set out on a rod: the joiner's board with the positions marked in pencil. The rod is
   the steel rule stood on end; each step is a pencil number and the triangle at its mark. */
.proc{padding:clamp(80px,12vh,160px) var(--gutter);position:relative;overflow:hidden}
.proc-head{display:grid;grid-template-columns:7fr 5fr;gap:60px;align-items:end;margin-bottom:70px}
@media(max-width:720px){.proc-head{grid-template-columns:1fr;gap:20px;margin-bottom:44px}}
.proc-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.5vw,100px);line-height:.94;letter-spacing:-.035em}
.proc-head h2 .it{font-style:italic;color:var(--timber-mid)}
.proc-head p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:46ch}
.proc-list{position:relative;display:flex;flex-direction:column;list-style:none}
.proc-list::before{content:'';position:absolute;left:92px;top:0;bottom:0;width:14px;color:rgba(148,122,89,.8);background:var(--ticks-v);transform-origin:50% 0}
@media(max-width:720px){.proc-list::before{left:60px}}
.proc-step{display:grid;grid-template-columns:120px 1fr 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--rule);align-items:start;position:relative}
.proc-step:last-child{border-bottom:none}
/* each step is marked on the rod like a set-out point: the cabinetmaker's triangle, in timber */
.proc-step::after{content:'';position:absolute;left:84px;top:50px;width:18px;height:16px;background:var(--plaster) var(--tri-mid) center/15px 13px no-repeat;box-shadow:0 0 0 4px var(--plaster);z-index:1}
@media(max-width:720px){.proc-step{grid-template-columns:44px 1fr;gap:34px}.proc-step::after{left:52px;top:44px}.proc-step .px{grid-column:2}.proc-num{font-size:42px;padding-right:2px}}
.proc-num{font-family:var(--pencil);font-weight:400;font-size:54px;color:var(--timber-mid);line-height:.9;text-align:right;padding-right:46px;margin-top:-4px}
.proc-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.4vw,34px);line-height:1.1;margin-bottom:6px;letter-spacing:-.02em}
.proc-body .lab{font-family:var(--pencil);font-size:17px;line-height:1.3;color:var(--graphite)}
.proc-step .px{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:40ch}
.proc-step .px a{color:var(--ink);border-bottom:1px solid var(--timber-mid);overflow-wrap:anywhere}

/* Stats - true, and nothing that goes stale. The steel rule runs across the top of the band and
   each figure stands at a mark on it. */
.stats{position:relative;padding:clamp(60px,8vh,120px) var(--gutter);background:var(--navy);color:var(--cream);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,60px);border-top:1px solid var(--navy-2);border-bottom:1px solid var(--navy-2)}
.stats::before{content:'';position:absolute;left:var(--gutter);right:var(--gutter);top:clamp(32px,4.4vh,64px);height:13px;color:rgba(196,160,112,.55);background:var(--ticks)}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}
.stat-i{position:relative;padding-top:30px}
.stat-i::before{content:'';position:absolute;left:0;top:-4px;width:1px;height:26px;background:var(--timber)}
@media(max-width:900px){.stat-i::before{display:none}.stat-i{padding-top:22px;border-top:1px solid var(--rule-d)}.stat-i:nth-child(-n+2){border-top:0}}
@media(max-width:520px){.stat-i:nth-child(2){border-top:1px solid var(--rule-d)}}
.stat-i .n{font-family:var(--serif);font-weight:400;font-size:clamp(64px,8vw,124px);color:var(--timber);line-height:.88;margin-bottom:10px;font-feature-settings:'tnum';letter-spacing:-.04em;white-space:nowrap}
.stat-i .n .it{font-style:italic;font-size:.4em;vertical-align:.9em;letter-spacing:-.01em;margin-right:.18em}
.stat-i .n.word{font-size:clamp(44px,4.4vw,74px);font-style:italic;line-height:.92;white-space:normal;padding-bottom:.08em}
.stat-i h4{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.015em;margin-bottom:4px}
.stat-i p{line-height:1.45;color:var(--muted);font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:500;letter-spacing:.01em}

/* Contact: the big heading on the left, the number and the schedule on the right */
.cta{padding:clamp(96px,14vh,190px) var(--gutter);background:var(--plaster);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:auto -10% -50% -10%;height:80%;background:radial-gradient(ellipse at center,rgba(196,160,112,.2) 0%,transparent 60%);pointer-events:none}
.cta-grid{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:44px clamp(40px,6vw,96px);align-items:end}
.cta-note{font-family:var(--pencil);font-size:20px;color:var(--graphite);margin-bottom:14px}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(56px,8.6vw,150px);line-height:.9;letter-spacing:-.04em}
.cta h2 .it{font-style:italic;color:var(--timber-mid)}
.cta-r{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:.6em}
.cta a.big{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,4.2vw,64px);color:var(--timber-dark);border-bottom:2px solid var(--timber-mid);padding-bottom:6px;letter-spacing:-.02em;transition:letter-spacing .4s var(--ease),color .3s;white-space:nowrap;font-feature-settings:'tnum'}
.cta a.big:hover{letter-spacing:0;color:var(--ink)}
.cta a.mail{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,2vw,26px);letter-spacing:-.015em;color:var(--ink);border-bottom:1px solid rgba(21,26,46,.3);padding-bottom:4px;overflow-wrap:anywhere}
.cta a.mail:hover{border-bottom-color:var(--timber-mid)}
.cta .cut{width:100%;margin-top:14px}
.cta-links{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:10px;font-family:var(--label);font-stretch:125%;font-size:15px;font-weight:600;letter-spacing:.01em}
.cta-links a{color:var(--ink);border-bottom:1px solid var(--timber-mid);padding-bottom:3px}
.cta-links a:hover{color:var(--timber-dark)}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr;gap:30px}.cta-r{padding-bottom:0}}
/* the same band closing the inner pages, and the contact page's own body */
.cta.cta-sm{padding-top:clamp(80px,11vh,150px);padding-bottom:clamp(80px,11vh,150px)}
.cta.cta-sm::after{content:'';position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:13px;color:rgba(21,26,46,.34);background:var(--ticks)}
.cta.cta-page{padding-top:clamp(56px,8vh,96px)}
.cta-page .cta-grid{align-items:start}

/* Enquiry form: the second route, under the number (name, phone, where, what) */
.enq{position:relative;max-width:780px;text-align:left}
.enq-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 28px;margin-bottom:30px}
.enq-head h2,.enq-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.025em}
.enq-head h2 .it,.enq-head h3 .it{font-style:italic;color:var(--timber-mid)}
.enq-head p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:36ch}
.enq-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.enq-form .f{display:flex;flex-direction:column;gap:8px;min-width:0}
.enq-form .f.w{grid-column:1 / -1}
.enq-form .f > span{font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.enq-form input,.enq-form textarea{width:100%;font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.4;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(21,26,46,.45);border-radius:0;padding:8px 0 10px;transition:border-color .3s}
.enq-form textarea{resize:vertical;min-height:124px}
.enq-form input:focus,.enq-form textarea:focus{border-bottom-color:var(--timber-dark)}
.enq-form .btn{grid-column:1 / -1;justify-self:start;border:0;cursor:pointer;background:var(--navy);color:var(--cream)}
.enq-form .btn:hover{background:var(--timber);color:var(--navy)}
.enq-form .btn:disabled{opacity:.6;cursor:progress;transform:none}
.enq-form .enq-privacy{grid-column:1 / -1;margin-top:-8px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.enq-note{margin-top:24px;padding:14px 18px;background:var(--plaster-2);border-left:2px solid var(--timber-mid);font-size:16px;line-height:1.55;color:var(--ink)}
.enq-note a,.enq-noscript a{color:var(--ink);border-bottom:1px solid var(--timber-mid);white-space:nowrap}
.enq-noscript{font-size:16px;line-height:1.6;color:var(--ink-2)}
/* Without JavaScript the form cannot send: it is not shown, and the <noscript> line says call. */
html:not(.js) .enq-form{display:none}
@media(max-width:720px){.enq-form{grid-template-columns:1fr;gap:22px}.enq-form .btn{justify-self:stretch;justify-content:center}}

/* Footer: the van's own lettering as the sign-off, then the small print */
.foot{padding:56px var(--gutter) 30px;background:var(--navy-deep);color:var(--muted-2);font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:500;letter-spacing:.01em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 14px}
.foot a{color:var(--timber)}
.foot .sign{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:40px;margin-bottom:12px;border-bottom:1px solid var(--rule-d)}
.foot .sign img{width:min(760px,100%);height:auto}
.foot .sign .strap{font-family:var(--script);font-stretch:normal;font-weight:400;font-size:clamp(24px,3.1vw,44px);line-height:1.1;color:var(--muted);padding-left:.4em}
.foot-nav{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:12px 30px;padding-bottom:22px;margin-bottom:8px;border-bottom:1px solid var(--rule-d);font-size:15px;font-weight:600}
.foot-nav a{color:var(--cream);padding:6px 0}
.foot-nav a:hover{color:var(--timber)}
.foot .co{flex:1 1 100%;color:var(--muted-2)}
.foot .disclaimer{flex:1 1 100%;color:#9aa0ad;font-family:var(--sans);font-stretch:normal;font-size:12px;font-weight:400;letter-spacing:.02em;margin-top:4px;line-height:1.5}

/* ------------------------------------------------------------------ the inner pages */

/* Page head: Home's opening on navy, without a photo. The header floats over it as it floats
   over the hero; the steel rule is drawn out under the heading. */
.ph{position:relative;background:var(--navy);color:var(--cream);padding:clamp(132px,18vh,196px) var(--gutter) clamp(48px,7vh,92px);overflow:hidden}
.ph-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.2fr 1fr;gap:28px clamp(40px,6vw,104px);align-items:end}
.ph-h1{font-family:var(--serif);font-weight:400;font-size:clamp(54px,8.6vw,140px);line-height:.92;letter-spacing:-.04em;font-variation-settings:'opsz' 144}
.ph-h1 .it{font-style:italic;font-weight:500;color:var(--timber)}
.ph-side{display:flex;flex-direction:column;gap:22px;padding-bottom:.4em}
.ph-lede{font-size:17px;line-height:1.65;color:var(--muted);max-width:46ch}
.ph-lede a{color:var(--cream);border-bottom:1px solid var(--timber)}
.ph-note{font-family:var(--pencil);font-size:20px;line-height:1.35;color:var(--timber)}
.ph-index{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.015em;line-height:1.25}
.ph-index li{display:inline-flex;align-items:center;gap:22px}
.ph-index li::after{content:'';width:.5em;height:.45em;background:var(--tri) center/contain no-repeat}
.ph-index li:last-child::after{content:none}
.ph-index a{color:var(--cream);border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.ph-index a:hover{color:var(--timber);border-bottom-color:var(--timber)}
.ph-call{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,4.4vw,64px);letter-spacing:-.02em;color:var(--timber);border-bottom:2px solid var(--timber);padding-bottom:6px;white-space:nowrap;font-feature-settings:'tnum';transition:color .3s,letter-spacing .4s var(--ease)}
.ph-call:hover{color:var(--cream);letter-spacing:0}
.ph-mail{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,26px);color:var(--cream);border-bottom:1px solid rgba(244,239,230,.35);padding-bottom:4px;align-self:flex-start;overflow-wrap:anywhere}
.ph-mail:hover{border-bottom-color:var(--timber)}
/* the rule, drawn out once (CSS only: it plays without JavaScript, and ends drawn) */
.ph-rule{position:relative;z-index:3;margin-top:clamp(34px,5vh,56px);transform-origin:0 0;animation:draw-out 1.3s var(--ease) .45s both}
@keyframes draw-out{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr;align-items:start}.ph-side{padding-bottom:0}}
@media(max-width:720px){.ph{padding-top:clamp(108px,14vh,150px)}.ph-rule{margin-top:30px}}

/* Services page: one section per group, the steel rule between them. The words and the photos
   change sides from one section to the next. */
.sv{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:40px;padding:clamp(72px,10vh,128px) var(--gutter);align-items:start}
.sv-list > .sv + .sv::before{content:'';position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:13px;color:rgba(21,26,46,.34);background:var(--ticks)}
.sv-head{grid-column:1 / span 5;grid-row:1}
.sv-body{grid-column:1 / span 5;grid-row:2}
.sv-media{grid-column:6 / span 7;grid-row:1 / span 2}
.sv.flip .sv-head,.sv.flip .sv-body{grid-column:8 / span 5}
.sv.flip .sv-media{grid-column:1 / span 7}
.sv-mark{display:block;font-family:var(--pencil);font-size:19px;color:var(--graphite);margin-bottom:6px}
.sv h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.4vw,70px);line-height:.98;letter-spacing:-.03em;margin:0 0 22px}
.sv h2 .it{font-style:italic;font-weight:500;color:var(--timber-mid)}
.sv-lede{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.7vw,25px);line-height:1.4;color:var(--ink);max-width:34ch;margin-bottom:24px}
.sv-body p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:44ch}
.sv-body p+p{margin-top:14px}
.sv-body > p:first-child{margin-top:0}
.ticks{list-style:none;display:flex;flex-direction:column;margin:22px 0 0;font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);max-width:30em}
.ticks li{display:flex;gap:14px;align-items:baseline;padding:8px 0 7px;border-top:1px solid var(--rule)}
.ticks li:last-child{border-bottom:1px solid var(--rule)}
.ticks li::before{content:'';flex:0 0 auto;width:13px;height:12px;background:var(--tri-mid) center/contain no-repeat}
.sv-jobs{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.sv-jobs .k{font-family:var(--pencil);font-size:18px;color:var(--graphite)}
.sv-jobs a{align-self:flex-start;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink);border-bottom:1px solid var(--timber-mid);padding-bottom:2px;transition:color .3s}
.sv-jobs a:hover{color:var(--timber-dark)}
.sv-media .phl.lead{aspect-ratio:4/3}
.sv-media .phl.lead img{position:absolute;inset:0}
.sv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.sv-grid .phl{aspect-ratio:1/1}
.sv-grid .phl img{position:absolute;inset:0}
.sv-media .phl.solo{max-width:min(100%,480px);aspect-ratio:997/663}
.sv-media .phl.solo img{position:absolute;inset:0}
.sv-note{margin-top:12px;font-family:var(--pencil);font-size:18px;line-height:1.4;color:var(--graphite);max-width:40ch}
@media(max-width:1000px){.sv,.sv.flip{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:28px}.sv-head,.sv-body,.sv-media,.sv.flip .sv-head,.sv.flip .sv-body,.sv.flip .sv-media{grid-column:1;grid-row:auto}.sv-head{order:1}.sv-media{order:2}.sv-body{order:3}.sv-head .sv-lede{margin-bottom:0}}
@media(max-width:520px){.sv-grid{gap:8px;margin-top:8px}}

/* Our work page: every job, newest first, the steel rule between them. The job's lead photo (or
   its before and after) on the left, staying in view while the rest of the job scrolls past;
   the date, title and his caption on the right, with the job's other photos under them. On
   phones: the words, the lead, the rest. */
.work{background:var(--navy);color:var(--cream)}
.job{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"lead meta" "lead grid";column-gap:clamp(32px,4vw,64px);row-gap:26px;padding:clamp(48px,7vh,72px) var(--gutter) clamp(40px,6vh,64px);align-items:start}
.job + .job::before{content:'';position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:13px;color:rgba(196,160,112,.5);background:var(--ticks)}
.work > .job:first-child{padding-top:clamp(40px,6vh,64px)}
.job-lead{grid-area:lead;position:sticky;top:104px}
.job-meta{grid-area:meta;display:flex;flex-direction:column;gap:14px}
.job > .job-grid{grid-area:grid}
.job h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.4vw,52px);line-height:1.02;letter-spacing:-.025em}
.job h2 .it{font-style:italic;color:var(--timber)}
.job .desc{font-size:17px;line-height:1.6;color:var(--muted);max-width:46ch}
.job-lead .lead{position:relative;aspect-ratio:4/3}
.job-lead .lead img{position:absolute;inset:0}
.job-lead .lead.r18{aspect-ratio:2048/1140}
.job-lead .lead.r910{aspect-ratio:910/1296;width:min(100%,440px)}
.job-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.job-grid .phl{aspect-ratio:1/1}
.job-grid.land .phl{aspect-ratio:4/3}
.job-grid.wide .phl{aspect-ratio:3/2}
.job-grid.port .phl{aspect-ratio:3/4}
.job-grid .phl img{position:absolute;inset:0}
.job-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.job-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.job-grid .phl .tag{left:8px;bottom:8px;padding:3px 8px 4px;font-size:14px}
@media(max-width:900px){.job{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"meta" "lead" "grid"}.job-lead{position:static}}
@media(max-width:520px){.job-grid,.job-grid.g4{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.job-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The photo viewer (built by the page script on the first open; hidden when closed) */
.lb{position:fixed;inset:0;z-index:300;background:#0b0e19;color:var(--cream);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb[hidden]{display:none}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,3vw,32px)}
.lb-count{font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted);font-feature-settings:'tnum'}
.lb-close{width:48px;height:48px;border:1px solid rgba(244,239,230,.25);border-radius:50%;background:transparent;color:var(--cream);font-size:26px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.lb-close:hover{background:rgba(244,239,230,.1);border-color:var(--cream)}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(8px,6vw,96px);touch-action:pan-y pinch-zoom}
.lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 24px 80px -24px rgba(0,0,0,.6);transition:opacity .25s var(--ease)}
.lb-img.ld{opacity:0}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(244,239,230,.25);border-radius:50%;background:rgba(15,19,34,.6);color:var(--cream);font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.lb-nav:hover{background:rgba(196,160,112,.25);border-color:var(--timber)}
.lb-prev{left:clamp(8px,2vw,24px)}
.lb-next{right:clamp(8px,2vw,24px)}
.lb-nav[hidden]{display:none}
.lb-bar{padding:14px clamp(16px,4vw,48px) max(18px,env(safe-area-inset-bottom));text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.lb-cap{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,21px);line-height:1.35;color:var(--cream);max-width:62ch}
.lb-group{font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--muted-2)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--timber);outline-offset:3px}
html.lb-lock,html.lb-lock body{overflow:hidden}
@media(max-width:640px){
  .lb-stage{padding:0}
  .lb-nav{top:auto;bottom:-62px;transform:none;width:48px;height:48px}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-bar{padding-left:76px;padding-right:76px;min-height:76px;justify-content:center}
}

/* ------------------------------------------------------------------ the two lanes
   Homeowners (extensions and renovations) and large estates
   (estate and commercial work, working through their properties). Same setting-out system: the
   steel rule, the pencil, the triangle, the cut list. One new member of it, the SCHEDULE OF WORKS:
   a cut list turned sideways into a joiner's schedule (job, where, done), each finished job ticked
   off in pencil. It belongs to the estates lane: working through an estate's properties is working
   down a schedule. */

/* the hero's two lanes, where "based in" and "established" stood (both are still in the eyebrow) */
.hero-foot a.col .v{border-bottom:1px solid transparent;padding-bottom:2px;align-self:flex-start;transition:border-color .3s}
.hero-foot a.col .a{color:var(--timber);display:inline-block;transition:transform .4s var(--ease)}
.hero-foot a.col:hover .v,.hero-foot a.col:focus-visible .v{border-bottom-color:var(--timber)}
.hero-foot a.col:hover .a{transform:translateX(5px)}

/* Home: the band that splits the two lanes, on navy between the intro and the cards. The steel rule
   stood on end between them (the process rod's rule), set out from the triangle at its head. */
.lanes{position:relative;background:var(--navy);color:var(--cream);padding:clamp(80px,12vh,150px) var(--gutter) clamp(80px,11vh,140px);border-top:1px solid var(--navy-2);border-bottom:1px solid var(--navy-2)}
.lanes-k{font-family:var(--pencil);font-weight:400;font-size:20px;line-height:1.35;color:var(--timber);margin-bottom:clamp(36px,5vh,56px);display:flex;gap:12px;align-items:baseline}
.lanes-k::before{content:'';flex:0 0 auto;width:14px;height:13px;background:var(--tri) center/contain no-repeat}
.lanes-grid{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);column-gap:clamp(40px,5.5vw,96px);align-items:stretch}
.lanes-rod{position:relative;width:14px;color:rgba(196,160,112,.55);background:var(--ticks-v);transform-origin:50% 0}
.lane{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lane-k{font-family:var(--pencil);font-size:20px;line-height:1.3;color:var(--timber);margin-bottom:12px}
.lane h3{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.4vw,86px);line-height:.94;letter-spacing:-.035em;margin-bottom:26px}
.lane h3 .it{font-style:italic;font-weight:500;color:var(--timber)}
.lane-p{font-size:17px;line-height:1.65;color:var(--muted);max-width:44ch;margin-bottom:30px}
.lane .cut,.lane .sched{width:100%;max-width:600px}
.lane-foot{margin-top:auto;padding-top:40px}
.lane-foot .more-link{font-size:clamp(24px,2.2vw,32px)}
@media(max-width:900px){
  .lanes-grid{grid-template-columns:minmax(0,1fr)}
  .lanes-rod{width:auto;height:13px;margin:52px 0 48px;background:var(--ticks);transform-origin:0 50%}
  .lane-foot{padding-top:32px}
}

/* The schedule of works: the cut list's rules and lettering, set out in columns (job, where, done),
   each job ticked off in pencil when it is done. */
.sched-t{font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--timber);margin-bottom:10px}
.sched-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,auto) auto;column-gap:20px;align-items:baseline;padding:10px 0 9px;border-top:1px solid var(--rule-d)}
.sched-hd{font-family:var(--label);font-stretch:125%;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted-2);padding:10px 0 7px}
.sched-list{list-style:none}
.sched-list li:last-child{border-bottom:1px solid var(--rule-d)}
.sched .j{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(196,160,112,.55);justify-self:start;transition:color .3s,text-decoration-color .3s}
.sched .j:hover{color:var(--timber);text-decoration-color:var(--timber)}
.sched .w{font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--muted)}
.sched .dn{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--label);font-stretch:125%;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--cream);white-space:nowrap}
/* the pencil tick: the job is done */
.sched .dn::after{content:'';flex:0 0 auto;width:18px;height:15px;align-self:center;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 30'><path d='M3 17.5 C6.5 19.5 9.5 23 12 27.5 C17 16.5 24 8 33.5 2.5' fill='none' stroke='%23c4a070' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.sched-note{font-family:var(--pencil);font-size:18px;line-height:1.35;color:var(--timber);margin-top:12px}
@media(max-width:520px){
  .sched-hd{display:none}
  .sched-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"j j" "w dn";row-gap:6px;padding:12px 0 11px}
  .sched .j{grid-area:j}.sched .w{grid-area:w}.sched .dn{grid-area:dn}
}

/* the cards follow the band now, not the intro */
.lanes + .services{padding-top:clamp(80px,12vh,160px)}

/* Services: the page head's index, set out by lane like a cut list (the lane in pencil, its
   sections in the italic list) */
.ph-lanes{display:flex;flex-direction:column;max-width:600px}
.ph-lane{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:20px;align-items:baseline;padding:10px 0 9px;border-top:1px solid var(--rule-d)}
.ph-lane:last-child{border-bottom:1px solid var(--rule-d)}
.ph-lane .pk{font-family:var(--pencil);font-size:18px;line-height:1.3;color:var(--timber)}
@media(max-width:520px){.ph-lane{grid-template-columns:minmax(0,1fr);row-gap:2px}}

/* Services: the estates lane on navy, the one navy section in the list (so the lane reads as its
   own), the photos still opening in the viewer */
.sv.navy{background:var(--navy);color:var(--cream)}
.sv-list > .sv.navy::before,.sv-list > .sv.navy + .sv::before{display:none}
.sv.navy h2{color:var(--cream)}
.sv.navy h2 .it{color:var(--timber)}
.sv.navy .sv-mark{color:var(--timber)}
.sv.navy .sv-lede{color:var(--cream)}
.sv.navy .sv-body p{color:var(--muted)}
.sv.navy .sv-jobs .k{color:var(--timber)}
.sv.navy .sv-jobs a{color:var(--cream);border-bottom-color:var(--timber)}
.sv.navy .sv-jobs a:hover{color:var(--timber)}
.sv .sched{margin-top:24px;max-width:34em}
/* the schedule's heading is a label, not body copy (the section's paragraph rule would take it) */
.sv .sv-body p.sched-t,.sv.navy .sv-body p.sched-t{font-size:13px;line-height:1.3;color:var(--timber);max-width:none;margin-top:0}
.sv-body p a{color:var(--ink);border-bottom:1px solid var(--timber-mid)}
.sv.navy .sv-body p a{color:var(--cream);border-bottom-color:var(--timber)}

/* Services, Extensions: one photo of the extension, held at its own size (never upscaled), with
   the job set out beside it as a cut list from his caption, so the column is not left empty */
.sv-solo{display:grid;grid-template-columns:minmax(0,480px) minmax(170px,240px);column-gap:clamp(20px,2.4vw,36px);align-items:start}
.sv-solo .phl.solo{max-width:none;width:100%}
@media(max-width:640px){.sv-solo{grid-template-columns:minmax(0,1fr);row-gap:22px}.sv-solo .phl.solo{max-width:480px}}

/* the hero lanes on phones: both lanes start level */
@media(max-width:720px){.hero-foot a.col{align-self:start}}

/* the footer names the two lanes */
.foot-lanes{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 26px;font-size:14px;font-weight:600}
.foot-lanes .pk{font-family:var(--pencil);font-stretch:normal;font-weight:400;font-size:17px;color:var(--muted)}

/* Wide screens: the furniture already spans the window; the reading text steps up a size so the
   job rows and columns do not read as empty bands at 1600px and over. */
@media(min-width:1600px){
  .intro-side{font-size:19px}.intro-side .lede{font-size:28px}
  .projects-head p,.proc-head p{font-size:18px}
  .proj h3{font-size:58px}.proj .desc{font-size:18px;max-width:48ch}.proj .steps{font-size:21px}.cut dd{font-size:20px}
  .proc-step .px{font-size:18px}.svc p{font-size:16px}
  .ph-lede,.sv-body p,.job .desc{font-size:19px}.sv-lede{font-size:27px}.ticks,.job .steps{font-size:21px}
  .lane-p{font-size:19px}.sched .j{font-size:21px}.sched .w,.sched .dn{font-size:15px}
}

/* Reveal-on-scroll: the hidden start state exists ONLY once the page script
   has run and added html.rv, so with JavaScript off everything is visible. */
.rv .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv .reveal.in{opacity:1;transform:translateY(0)}
.rv .reveal.d1{transition-delay:.12s}.rv .reveal.d2{transition-delay:.24s}.rv .reveal.d3{transition-delay:.36s}
/* Clip reveals: each service photo wipes up into its card; each job photo wipes in from the
   left (then, on a before/after, the After wipes across it). The process rod is drawn down. */
.rv .svc.reveal .img{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease) .15s,transform 1.4s var(--ease)}
.rv .svc.reveal.in .img{clip-path:inset(0 0 0 0)}
.rv .proj.reveal .img-wrap{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease) .1s}
.rv .proj.reveal.in .img-wrap{clip-path:inset(0 0 0 0)}
.rv .proc-list.reveal{opacity:1;transform:none}
.rv .proc-list.reveal::before{transform:scaleY(0);transition:transform 1.6s var(--ease) .1s}
.rv .proc-list.reveal.in::before{transform:scaleY(1)}
/* the rule between the lanes is drawn down (across, on phones) as the band comes in */
.rv .lanes-rod.reveal{opacity:1;transform:scaleY(0);transition:transform 1.6s var(--ease) .15s}
.rv .lanes-rod.reveal.in{transform:none}
@media(max-width:900px){.rv .lanes-rod.reveal{transform:scaleX(0)}.rv .lanes-rod.reveal.in{transform:none}}
/* once a clip has run, drop it: a finished reveal carries no clip at all */
.rv .svc.reveal.done .img,.rv .proj.reveal.done .img-wrap{clip-path:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .hero-media{transform:none}
  .hero-h1 .line span,.ph-h1 .line > span{transform:none}
  /* the set-out lines stay, drawn and still */
  .chalk .cl .mk{opacity:.6}
  .chalk .cl .str,.chalk .cl .glow{opacity:0}
  .rv .reveal{opacity:1;transform:none}
  .rv .proj.reveal .img-wrap,.rv .svc.reveal .img{clip-path:none}
  .rv .proc-list.reveal::before{transform:none}
  .rv .lanes-rod.reveal{transform:none}
  .strip-track{flex-wrap:wrap;width:auto;justify-content:center;row-gap:10px;padding:0 var(--gutter);white-space:normal}
  .strip-track span.dup{display:none}
}