/* Fonts are served from this site, not from Google.
   The privacy notice promises no third parties, and a Google Fonts
   stylesheet sends every visitor's IP address to Google in the US on
   every page load, which would have made that promise untrue. Self-hosting
   keeps it true and removes two render-blocking requests to another origin.
   One variable file per family covers 400-600; Google was serving the same
   bytes three times over, plus an optical-size axis nothing here uses. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter.woff2') format('woff2-variations');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/newsreader.woff2') format('woff2-variations');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Barraclough Carpentry — shared styles.
   Palette: warm paper, near-black ink, one timber accent. Photography does the
   selling, so the furniture of the page stays quiet. */
:root{
  /* Palette taken from Max's own logo: #0653DF royal blue with a #129AE8
     secondary. The base was warm cream before the logo arrived; the blue
     fought it, so the neutrals are now cool. Photographs also sit better on a
     neutral ground than a warm one. Every pair below is contrast-checked. */
  /* The four background tiers were all within a couple of points of each other
     (#F7F8FA / #EDF0F4 / #FCFDFE / #fff), so a white card on the page barely
     read as a card at all: 1.14:1 between a card and the darkest section. The
     steps are wider now and the tint is bluer rather than greyer, which reads
     as cleaner while still letting white boxes sit clearly on top of it. */
  --paper:#F6F9FD; --paper-2:#CEDDF2; --paper-3:#FFFFFF; --white:#ffffff;
  --ink:#111A2B; --ink-2:#28313F; --ink-soft:#535E6D;
  /* Background of the trust bar, the CTA bands and the footer. Was --ink, which
     is near-black and sat on the page like a hole. This is a proper navy, a
     clear step lighter (11.8:1 against white where --ink was 17.4:1), and it
     relates to the brand blue instead of fighting it. Text on it still clears
     WCAG with room: the tightest is the footer grey at 6.3:1. */
  --panel:#315086;
  --brand:#0653DF; --brand-dark:#0442B4; --brand-light:#129AE8;
  --brand-pale:#E8EFFD;
  /* Kept as aliases so the rest of the sheet did not need rewriting. */
  --walnut:#0653DF; --walnut-dark:#0442B4;
  --oak:#0653DF; --oak-text:#0442B4; --oak-light:#B0D2FF;
  --line:#C3D2E8; --line-2:#7C8796;
  --shadow:0 10px 30px rgba(17,26,43,.10);
  --shadow-lift:0 18px 44px rgba(17,26,43,.16);
  --radius:4px;
  --radius-lg:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink-2);background:var(--paper);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Newsreader',Georgia,serif;color:var(--ink);font-weight:500;line-height:1.14;letter-spacing:-.012em}
h1{font-size:2.85rem}
h2{font-size:2.1rem;margin-bottom:.55rem}
h3{font-size:1.3rem}
h4{font-size:1.05rem;font-family:'Inter',sans-serif;font-weight:600}
p{margin-bottom:1rem}
a{color:var(--walnut);text-decoration:none}
a:hover{text-decoration:underline}
/* A link in running text was distinguished from the text around it by colour
   alone, at 1.3:1 — invisible to most people, and a WCAG 1.4.1 failure. Links
   inside prose are underlined; navigation, buttons and cards are not, because
   there position and styling already identify them. */
p a,.faq-body a,li a,figcaption a,.cap a,.small a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
p a:hover,.faq-body a:hover,li a:hover{text-decoration-thickness:2px}
.foot-links a,.nav-links a,.btn,.card a,.area-pill a{text-decoration:none}
img{max-width:100%;display:block}
strong{font-weight:600;color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:200}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--oak);outline-offset:2px}
/* --oak is 2.74:1 against the dark ink sections (the CTA band and the
   footer sit on every page), which fails WCAG 1.4.11's 3:1 for a focus
   indicator. On those backgrounds the ring goes white, which is 15:1.
   Keyboard users get a ring they can actually see everywhere. */
.cta-band :focus-visible,
footer :focus-visible,
.section-ink :focus-visible,
.trust :focus-visible{outline-color:#ffffff}

/* Buttons — every one changes on hover so you can tell you're over it. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-family:'Inter',sans-serif;border-radius:var(--radius);padding:14px 26px;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;font-size:1rem;transition:transform .12s ease,background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:var(--paper-3)}
.btn-ink:hover{background:var(--walnut-dark)}
.btn-oak{background:var(--walnut);color:#fdf7ee}
.btn-oak:hover{background:var(--walnut-dark)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{background:var(--ink);color:var(--paper-3);border-color:var(--ink)}
.btn-line-light{background:transparent;color:var(--paper-3);border-color:rgba(248,245,240,.45)}
.btn-line-light:hover{background:var(--paper-3);color:var(--ink);border-color:var(--paper-3)}
.btn-wa{background:#25D366;color:#08331b}
.btn-wa:hover{background:#1EBE5B}
.btn-sm{padding:10px 18px;font-size:.92rem}
.btn-lg{padding:16px 32px;font-size:1.05rem}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* Type helpers */
.eyebrow{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--oak-text);margin-bottom:.6rem}
.lead{font-size:1.16rem;color:var(--ink-soft);max-width:660px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.small{font-size:.9rem;color:var(--ink-soft)}
.mt{margin-top:26px}
.mt-sm{margin-top:14px}

/* Sections */
.section{padding:78px 0}
.section-tight{padding:56px 0}
.section-paper2{background:var(--paper-2)}
.section-white{background:var(--white)}
.section-ink{background:var(--panel);color:var(--paper-2)}
.section-ink h2,.section-ink h3{color:var(--paper-3)}
.section-ink .lead,.section-ink p{color:#D2DAE6}
.section-ink .eyebrow{color:var(--oak-light)}
.section-ink a{color:var(--oak-light)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Header + nav */
header{position:sticky;top:0;z-index:60;background:rgba(247,248,250,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* width:auto alone is not enough inside a flex row: the item shrinks and
   squashes the logo to a smudge. It must refuse to shrink. */
.brand img{height:44px;width:auto;max-width:none;flex:0 0 auto;display:block}
@media(max-width:760px){.brand img{height:36px}}
@media(max-width:430px){.brand img{height:30px}}
@media(max-width:380px){.brand img{height:26px}}
.brand:hover{text-decoration:none}
.brand-mark{flex:0 0 auto;width:30px;height:30px;color:var(--walnut)}
.brand small{display:block;font-family:'Inter',sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oak-text);margin-top:3px}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--ink-2);font-weight:500;font-size:.94rem;text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a:hover{color:var(--walnut);text-decoration:none}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--oak)}
.nav-cta{display:flex;gap:10px;align-items:center}
/* The number lives in the sticky header so it is never more than a tap away.
   On the gallery it was previously 12 screens down on a phone. */
.nav-tel{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;color:var(--ink);text-decoration:none;padding:8px 12px;border:1.5px solid var(--line-2);border-radius:var(--radius);white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.nav-tel:hover{background:var(--ink);color:var(--paper-3);border-color:var(--ink);text-decoration:none}
.nav-tel svg{flex:0 0 auto}
@media(max-width:560px){
  .nav-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Icon-only, so it still has to reach the 44px minimum tap target. */
  .nav-tel{padding:0;min-width:44px;min-height:44px;justify-content:center}
}
.hamburger{display:none;background:none;border:none;font-size:1.55rem;color:var(--ink);cursor:pointer;line-height:1;width:44px;min-width:44px;height:44px;padding:0;align-items:center;justify-content:center;margin-right:-10px}
@media(max-width:1200px){
  .nav-links{position:absolute;top:72px;left:0;right:0;background:var(--paper-3);flex-direction:column;gap:0;padding:6px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:15px 22px;border-bottom:none;white-space:normal}
  /* In the dropdown the underline is gone, so colour was the only signal
     that you are on this page. WCAG 1.4.1 says colour cannot be the only
     one, so the current item also gets a bar down its left edge. */
  .nav-links a.active{border-bottom:none;color:var(--walnut);box-shadow:inset 3px 0 0 var(--oak);background:var(--brand-pale)}
  .hamburger{display:flex}
}

/* Narrow phones: the brand name plus its strapline plus a full-size CTA pushed
   the 72px header to nearly three lines. Shrink all three rather than wrap. */
@media(max-width:560px){
  .nav{height:64px;gap:8px}
  .nav-cta .btn{font-size:.8rem;padding:9px 11px}
  .brand{font-size:.98rem;gap:8px}
  .brand-mark{width:24px;height:24px}
  .brand small{font-size:.56rem;letter-spacing:.12em;margin-top:2px}
  .nav-cta .btn{padding:9px 13px;font-size:.85rem}
  .hamburger{width:44px;min-width:44px;height:44px;font-size:1.4rem}
  .nav-links{top:64px;max-height:calc(100dvh - 64px)}
  .hero h1{font-size:2.05rem}
  .section{padding:48px 0}
  .pagehero{padding:44px 0 40px}
  .form-card{padding:22px 18px}
}

/* Home hero */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;padding:70px 0 74px}
.hero h1{font-size:3.2rem;margin-bottom:1.1rem}
.hero .lead{margin-bottom:1.7rem}
.hero-note{margin-top:18px;font-size:.92rem;color:var(--ink-soft)}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:34px;padding:44px 0 50px}.hero h1{font-size:2.35rem}h1{font-size:2.2rem}h2{font-size:1.75rem}.section{padding:56px 0}}

/* Interior page hero */
.pagehero{background:var(--paper-2);padding:60px 0 54px;text-align:center;border-bottom:1px solid var(--line)}
.pagehero .lead{margin:10px auto 0}
.crumbs{font-size:.84rem;color:var(--ink-soft);margin-bottom:12px}
.crumbs a{color:var(--ink-soft)}

/* Photo frames. Until Max's photos land these show a labelled placeholder, so a
   missing picture is obvious on the page rather than an invisible gap. */
.frame{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame-tall{aspect-ratio:4/5}
.frame-wide{aspect-ratio:16/10}
.frame-square{aspect-ratio:1/1}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:240px;height:100%;padding:26px;background:repeating-linear-gradient(112deg,#E6EBF1 0 26px,#DDE4EC 26px 52px);color:var(--ink-soft)}
.ph .ph-ic{font-size:2rem;opacity:.75}
.ph .ph-label{font-weight:600;color:var(--walnut);font-size:.95rem}
.ph .ph-note{font-size:.82rem;line-height:1.45;max-width:260px}
.frame-tall .ph,.frame-wide .ph,.frame-square .ph{min-height:0;position:absolute;inset:0}
.cap{font-size:.86rem;color:var(--ink-soft);margin-top:9px}

/* Trust strip */
.trust{background:var(--panel);color:var(--paper-2)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 38px;justify-content:center;padding:20px}
.trust-item{display:flex;align-items:center;gap:9px;font-weight:500;font-size:.97rem;color:var(--paper-2)}
.trust-item .ic{color:var(--oak-light);flex:0 0 auto}
.trust-item strong{color:var(--white)}

/* Grids + cards */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
@media(max-width:600px){.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin-bottom:8px}
.card p{font-size:.98rem;color:var(--ink-soft);margin-bottom:14px}
.card p:last-child{margin-bottom:0}
.card .card-more{margin-top:auto;font-weight:600;font-size:.94rem;color:var(--walnut)}
.card-ic{width:46px;height:46px;border-radius:var(--radius);background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--walnut);margin-bottom:16px;flex:0 0 auto}
.card-photo{padding:0;overflow:hidden}
.card-photo .card-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}

/* Numbered steps */
.step{display:flex;gap:16px;align-items:flex-start}
.step .num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--oak);color:var(--oak-text);font-family:'Newsreader',serif;font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.step h3{font-size:1.08rem;margin-bottom:4px}
.step p{font-size:.96rem;color:var(--ink-soft);margin:0}
.section-ink .step .num{border-color:var(--oak-light);color:var(--oak-light)}

/* Split layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split-wide-text{grid-template-columns:1.15fr .85fr}
@media(max-width:980px){.split,.split-wide-text{grid-template-columns:1fr;gap:34px}.split .frame{order:-1}}

/* Feature list with ticks */
.ticks{list-style:none;display:grid;gap:11px;margin:18px 0}
/* Absolutely-positioned tick, not a flex child: as flex items the <strong>
   lead-in and the sentence after it became two separate columns. */
.ticks li{position:relative;padding-left:30px;font-size:1rem}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:var(--brand-pale);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230653DF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-size:13px;background-position:center;background-repeat:no-repeat}
.ticks-2{grid-template-columns:1fr 1fr;gap:11px 26px}
@media(max-width:700px){.ticks-2{grid-template-columns:1fr}}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:.87rem;padding:7px 14px;border-radius:999px}
.section-ink .chip{background:rgba(248,245,240,.09);border-color:rgba(248,245,240,.2);color:var(--paper-2)}

/* Reviews */
.review{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.review .stars{color:#8C6608;letter-spacing:3px;font-size:.95rem;margin-bottom:10px}
.review blockquote{font-size:1rem;color:var(--ink-2);line-height:1.66}
.review blockquote p{margin-bottom:.75rem}
.review blockquote p:last-child{margin-bottom:0}
.review .who{margin-top:auto;padding-top:16px;font-size:.9rem;color:var(--ink-soft)}
.review .who b{color:var(--ink);font-weight:600;display:block}
.review-lead blockquote{font-family:'Newsreader',serif;font-size:1.3rem;line-height:1.45;color:var(--ink)}
.rating-badge{display:inline-flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:11px 22px;box-shadow:var(--shadow)}
.rating-badge .score{font-family:'Newsreader',serif;font-size:1.65rem;color:var(--ink);line-height:1}
.rating-badge .stars{color:#8C6608;letter-spacing:2px}
.rating-badge .meta{font-size:.88rem;color:var(--ink-soft);line-height:1.3}

/* Gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gal{grid-template-columns:1fr}}
.gal .frame{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(18,16,14,.93);display:none;align-items:center;justify-content:center;z-index:300;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:90vh;width:auto;object-fit:contain;border-radius:var(--radius)}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--paper);font-size:2.4rem;line-height:1;cursor:pointer;width:48px;height:48px}

/* Areas */
.area-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.area-pill{background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:500;padding:10px 20px;border-radius:999px;box-shadow:var(--shadow)}
.area-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;font-size:.97rem}
.area-table th,.area-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.area-table th{background:var(--paper-2);font-weight:600;color:var(--ink);font-size:.9rem}
.area-table tr:last-child td{border-bottom:none}
.area-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* FAQ */
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{padding:19px 24px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Newsreader',serif;font-size:1.5rem;color:var(--oak-text);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{background:var(--paper-3)}
.faq .faq-body{padding:0 24px 22px;color:var(--ink-soft);font-size:.98rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.93rem;color:var(--ink);margin-bottom:6px}
.field .hint{font-weight:400;color:var(--ink-soft);font-size:.86rem}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B3402A;box-shadow:0 0 0 3px rgba(179,64,42,.14)}
.field input,.field textarea,.field select{width:100%;font-family:'Inter',sans-serif;font-size:1rem;color:var(--ink-2);background:var(--paper-3);border:1.5px solid var(--line-2);border-radius:var(--radius);padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--oak);box-shadow:0 0 0 3px rgba(6,83,223,.18)}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.field-row{grid-template-columns:1fr}}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Stay-open tick list — never a dropdown that shuts on every pick. */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:700px){.picker{grid-template-columns:1fr}}
.picker label{display:flex;align-items:flex-start;gap:10px;background:var(--paper-3);border:1.5px solid var(--line-2);border-radius:var(--radius);padding:12px 14px;cursor:pointer;font-weight:500;font-size:.96rem;color:var(--ink-2);margin:0;transition:border-color .14s ease,background-color .14s ease}
.picker label:hover{border-color:var(--oak-light)}
.picker input{width:auto;margin:3px 0 0;accent-color:var(--walnut);flex:0 0 auto}
.picker label:has(input:checked){border-color:var(--brand);background:var(--brand-pale)}
.form-note{font-size:.88rem;color:var(--ink-soft);margin-top:4px}
/* A live region that is display:none when the page loads is not always
   registered, so messages can go unannounced. It stays in the tree and is
   collapsed instead. */
.form-status{margin-top:16px;border-radius:var(--radius);font-size:.95rem;padding:0 16px;max-height:0;overflow:hidden;opacity:0;transition:max-height .18s ease,opacity .18s ease,padding .18s ease}
.form-status.show{padding:14px 16px;max-height:24em;opacity:1}
.form-status.ok{background:#EAF3EA;border:1px solid #BFD9BF;color:#22492A}
.form-status.bad{background:#FBECE8;border:1px solid #EBC4B8;color:#7A2E1B}

/* Contact rail */
.contact-rail{display:grid;gap:14px}
.contact-row{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px}
.contact-row .ic{flex:0 0 auto;width:42px;height:42px;border-radius:var(--radius);background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--walnut)}
.contact-row h4{margin-bottom:2px}
/* A flex child will not shrink below its min-content width, and
   "info@barracloughcarpentry.co.uk" is 31 unbreakable characters. Without these
   two the email set the width of the whole rail, and every row in it overflowed
   the screen on a phone, not just the one with the address in it. */
.contact-row > div{min-width:0}
.contact-row p{margin:0;font-size:.95rem;color:var(--ink-soft);overflow-wrap:anywhere}
.contact-row a{font-weight:600;overflow-wrap:anywhere}

/* CTA band */
.cta-band{background:var(--panel);color:var(--paper-2);padding:66px 0;text-align:center}
.cta-band h2{color:var(--paper-3);margin-bottom:.6rem}
.cta-band p{color:#D2DAE6;max-width:620px;margin:0 auto 26px}

/* Footer */
footer{background:var(--panel);color:#CBD3DE;padding:58px 0 30px;font-size:.94rem;border-top:4px solid var(--brand)}
footer h2{color:var(--paper-3);font-family:'Inter',sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
footer a{color:#C7CEDA;text-decoration:none}
footer a:hover{color:var(--oak-light);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}
.foot-links{list-style:none;display:grid;gap:9px}
.foot-brand{margin-bottom:14px}
.foot-brand img{height:52px;width:auto;display:block}
.foot-bottom{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;color:#98A2AF}

/* Print: nobody prints this, but a quote printout shouldn't be a mess. */
@media print{header,footer,.cta-band,.hamburger{display:none}body{background:#fff}}

/* The header carries a 5:1 logo, a call button, a quote button and the menu.
   Below 430px they do not all fit, so the quote button drops its verb. */
@media(max-width:430px){
  .nav-quote-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .nav-quote{text-transform:capitalize}
}

/* iPhone SE and similar 320px screens: 9px too wide with the logo at 26px. */
@media(max-width:340px){
  .brand img{height:22px}
  .nav{gap:6px}
  .nav-cta .btn{padding:8px 9px;font-size:.76rem}
}

/* A grid item will not shrink below its content by default, so the postcode
   table pushed the whole page wide on a small phone instead of scrolling
   inside its own wrapper. */
.split > *,.grid > *{min-width:0}
.table-scroll{max-width:100%}

/* The areas tables carry long town lists. At phone width the first column
   was breaking place names in half, so it wraps on whole words and the
   whole table steps down a size rather than being scrolled sideways. */
@media(max-width:600px){
  .area-table{font-size:.88rem}
  .area-table th,.area-table td{padding:10px 12px}
  .area-table td:first-child{white-space:normal;overflow-wrap:anywhere}
}

/* Multi-column link lists: the areas index and the "Nearby" block on each town
   page. Column count steps down rather than letting the columns get too narrow
   to read a town name in one line. */
.foot-links.cols-2,.foot-links.cols-3{column-gap:28px}
.foot-links.cols-3{columns:3}
.foot-links.cols-2{columns:2}
.foot-links.cols-2 li,.foot-links.cols-3 li{break-inside:avoid;margin-bottom:8px}
@media(max-width:800px){.foot-links.cols-3{columns:2}}
@media(max-width:520px){.foot-links.cols-3,.foot-links.cols-2{columns:1}}


/* ---------------------------------------------------------------------------
   HORIZONTAL SCROLL
   The header was the widest thing on the site and set the floor for how narrow
   a window could get: the logo alone rendered 148px, the phone and Quote
   buttons another 167px, and with the gaps and the 20px gutters either side it
   needed about 371px. A 360px Android and a 375px iPhone SE are both under
   that, so the whole page could be dragged sideways.

   Fixed at the cause - the logo steps down on small screens, which is where
   most of the width was - with overflow-x:clip on the root as a backstop so a
   single wide element added later cannot drag the whole page sideways again.
   clip rather than hidden: hidden on <body> creates a scroll container and
   breaks position:sticky, clip does not.
   --------------------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

@media(max-width:620px){
  .brand img{height:34px}
  .nav-cta{gap:7px}
}
@media(max-width:400px){
  .brand img{height:26px}
  .nav-cta{gap:5px}
  .wrap,.wrap-narrow{padding-left:14px;padding-right:14px}
  .nav-cta .btn{padding:8px 10px;font-size:.74rem}
}
/* Narrower than any phone, but a site preview pane or a split browser window
   can be this size, and the page should not be draggable sideways there either.
   The Quote button keeps its label because it is the thing being pressed. */
@media(max-width:330px){
  .brand img{height:22px}
  .wrap,.wrap-narrow{padding-left:10px;padding-right:10px}
  .nav-cta .btn{padding:7px 8px;font-size:.7rem}
  .nav-tel{min-width:38px;min-height:38px}
  .hamburger{width:38px;min-width:38px;height:38px;margin-right:-6px}
}

/* Area pills: the town list as tappable pills rather than a long column of
   links. Same shape as the pills already used on the home page, but these are
   links, so they need a hover and focus state of their own. */
.area-pills a.area-pill,.area-pill-link{
  display:inline-block;background:var(--white);border:1px solid var(--line);
  color:var(--ink);font-weight:500;padding:10px 18px;border-radius:999px;
  box-shadow:var(--shadow);text-decoration:none;font-size:.95rem;
  transition:border-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease}
.area-pills a.area-pill:hover,.area-pill-link:hover{
  border-color:var(--oak);color:var(--oak-text);transform:translateY(-1px);
  box-shadow:var(--shadow-lift);text-decoration:none}
.area-pill-link .pc{color:var(--ink-soft);font-size:.85em;margin-left:5px}
@media(max-width:560px){
  .area-pill-link{padding:9px 14px;font-size:.9rem}
}