/* Cormorant Garamond and Inter, the latin subsets of the Google Fonts variable files, served from here so the pages do not wait on two more hosts */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 400;font-display:swap;src:url(/assets/fonts/cormorant-italic.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:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant.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:400 700;font-display:swap;src:url(/assets/fonts/inter.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}

/* Crockett & Crockett Paving — shared tokens + primitives.
   Loaded by all three demos. Layout lives in demo1/2/3.css. */

:root{
  --ink:#0A2144;
  --navy:#154788;
  --navy-2:#2B5672;
  --peri:#7988B6;
  --sky:#9DB0DE;
  --sky-2:#CBD7EE;
  --wash:#EEF3FA; --peri-text:#5A6B94;
  --paper:#FFFFFF;
  --line:#DCE4F0;
  --body:#455168;

  --shadow:0 30px 70px -30px rgba(10,33,68,.35);
  --shadow-sm:0 14px 34px -18px rgba(10,33,68,.30);
  --r:14px;
  --r-sm:4px;

  --sec:clamp(88px, 9vw, 148px);
  --gut:clamp(20px, 4vw, 56px);
  --max:1280px;
  --hdr:78px;

  --ease:cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Without scroll-padding an in-page jump puts the target's top edge at the very top of the
   viewport, which is behind the fixed header: the heading you clicked to reach is the one
   part of the section you cannot see. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 14px)}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{
  margin:0; color:var(--ink); font-weight:400; line-height:1.06; letter-spacing:-.015em;
  text-wrap:balance;
}
.lead,.d1-facts,.d2-panel p,.d4-hero-lead{text-wrap:pretty}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.wrap-wide{max-width:1560px; margin:0 auto; padding:0 var(--gut)}
.sec{padding:var(--sec) 0}
.sec-sm{padding:calc(var(--sec) * .62) 0}

/* ---------- micro type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy); margin:0 0 22px;
}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; opacity:.55; flex:none}
.eyebrow.center::before{display:none}
.on-dark .eyebrow, .eyebrow.light{color:var(--sky)}
.lead{font-size:clamp(17px,1.28vw,19.5px); line-height:1.66; color:var(--body)}
.on-dark, .on-dark p{color:rgba(255,255,255,.80)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 30px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:13px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease),
    border-color .3s var(--ease), transform .3s var(--ease);
}
.btn svg{flex:none; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.42); color:#fff}
.btn-ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-outline{border-color:var(--line); color:var(--ink); background:#fff}
.btn-outline:hover{border-color:var(--navy); color:var(--navy)}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:var(--sky-2)}
.btn-sm{min-height:46px; padding:0 22px; font-size:12px}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--hdr);
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.hdr .wrap-wide{display:flex; align-items:center; gap:clamp(16px,3vw,46px); width:100%}
.hdr.solid{background:rgba(255,255,255,.96); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); height:68px}

.lockup{display:flex; align-items:center; gap:12px; flex:none}
.lockup img{width:auto; height:46px; transition:height .4s var(--ease)}
.hdr.solid .lockup img{height:40px}
.lockup .wm{display:flex; flex-direction:column; line-height:1}
.lockup .wm b{
  font-size:13.5px; font-weight:700; letter-spacing:.055em; color:#fff; white-space:nowrap;
  text-shadow:0 1px 12px rgba(10,33,68,.55);
}
.lockup .wm span{
  font-size:9.5px; font-weight:600; letter-spacing:.30em; color:#fff; opacity:.82; margin-top:5px;
  text-shadow:0 1px 12px rgba(10,33,68,.55);
}
.hdr.solid .lockup .wm b,.hdr.solid .lockup .wm span,
.hdr-light .lockup .wm b,.hdr-light .lockup .wm span{text-shadow:none; opacity:1}
.hdr.solid .lockup .wm span,.hdr-light .lockup .wm span{color:var(--navy)}
.hdr.solid .lockup .wm b{color:var(--ink)}
.hdr.solid .lockup .wm span{color:var(--navy)}
.hdr-light .lockup .wm b{color:var(--ink)}
.hdr-light .lockup .wm span{color:var(--navy)}

.nav{display:flex; align-items:center; gap:clamp(12px,1.7vw,28px); margin-left:auto}
.nav a{
  font-size:12.5px; font-weight:500; letter-spacing:.085em; text-transform:uppercase;
  color:rgba(255,255,255,.86); position:relative; padding:8px 0; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hdr.solid .nav a,.hdr-light .nav a{color:var(--ink)}
.hdr-cta{margin-left:clamp(10px,1.6vw,22px); flex:none}
.hdr .btn-hdr{
  min-height:44px; padding:0 20px; border-radius:var(--r-sm); font-size:11.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:var(--navy); color:#fff; display:inline-flex; align-items:center; gap:8px;
  transition:background .3s var(--ease);
}
.hdr .btn-hdr:hover{background:var(--ink)}

.burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(255,255,255,.35); border-radius:var(--r-sm);
  cursor:pointer; margin-left:auto; flex:none; color:#fff;
}
.hdr.solid .burger,.hdr-light .burger{border-color:var(--line); color:var(--ink)}
.burger span{display:block; width:19px; height:1.5px; background:currentColor; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.5px; background:currentColor}
.burger span::before{top:-6px} .burger span::after{top:6px}

.drawer{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:#fff;
  transform:translateY(-100%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; padding:26px var(--gut) 40px; overflow-y:auto;
}
.drawer.open{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:38px}
.drawer-close{width:46px; height:46px; border:1px solid rgba(255,255,255,.3); background:none;
  border-radius:var(--r-sm); cursor:pointer; color:#fff; font-size:22px; line-height:1}
.drawer nav{display:flex; flex-direction:column; gap:2px}
.drawer nav a{
  font-size:clamp(24px,6.4vw,34px); padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff; letter-spacing:-.01em;
}
.drawer-foot{margin-top:34px; display:flex; flex-direction:column; gap:12px}
.drawer-foot a{font-size:15px; color:var(--sky-2); display:flex; align-items:center; gap:10px}

/* ---------- hero shared ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)} to{transform:scale(1.075)}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
.scroll-cue{
  display:inline-flex; align-items:center; gap:11px;
  font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.scroll-cue i{display:block; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.66),transparent); animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25; transform:scaleY(.55); transform-origin:top} 50%{opacity:1; transform:scaleY(1)}}

.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:100px; border:1px solid rgba(255,255,255,.28);
  font-size:11.5px; font-weight:500; letter-spacing:.055em; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.07); backdrop-filter:blur(5px);
}
.chip svg{color:var(--sky); flex:none}
.chip.dark{border-color:var(--line); color:var(--navy-2); background:#fff}
.chip.dark svg{color:var(--navy)}

/* ---------- trust ticker ---------- */
.ticker{background:var(--ink); color:#fff; overflow:hidden; border-top:1px solid rgba(255,255,255,.09)}
.ticker-track{display:flex; width:max-content; animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:none} to{transform:translateX(-50%)}}
.ticker-set{display:flex; flex:none}
.ticker-set span{
  display:inline-flex; align-items:center; gap:11px; padding:15px 0; margin-right:52px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.82); white-space:nowrap;
}
.ticker-set span svg{color:var(--sky); flex:none}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- stats ---------- */
.stat b{
  display:block; font-size:clamp(38px,4.1vw,58px); line-height:1; color:var(--navy);
  letter-spacing:-.03em; font-variant-numeric:lining-nums;
}
.stat span{
  display:block; margin-top:11px; font-size:11px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--peri);
}
.on-dark .stat b{color:var(--sky)}
.on-dark .stat span{color:rgba(255,255,255,.55)}

/* ---------- rating ---------- */
.rating{display:inline-flex; align-items:center; gap:11px}
.marks{display:inline-flex; gap:3px; position:relative}
.marks svg{width:15px; height:15px; color:var(--line)}
.marks .fill{position:absolute; inset:0; display:inline-flex; gap:3px; overflow:hidden; white-space:nowrap}
.marks .fill svg{color:#E5B53A}
.rating b{font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:lining-nums}
.rating span{font-size:12.5px; color:var(--peri)}
.on-dark .rating b{color:#fff} .on-dark .rating span{color:rgba(255,255,255,.6)}
.on-dark .marks svg{color:rgba(255,255,255,.22)}
.on-dark .marks .fill svg{color:#E5B53A}

/* ---------- testimonial carousel (one at a time) ---------- */
.quote-solo{max-width:900px}
.quote-mark{font-size:74px; line-height:.5; color:var(--peri); opacity:.4; display:block; margin-bottom:26px}
.quote-body{font-size:clamp(21px,2.4vw,32px); line-height:1.42; letter-spacing:-.015em; color:var(--ink)}
.on-dark .quote-body{color:#fff}
.quote-meta{margin-top:26px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--peri)}
.quote-meta i{font-style:normal; color:var(--navy)}
.on-dark .quote-meta i{color:var(--sky)}
.quote-ctrl{display:flex; align-items:center; gap:18px; margin-top:38px}
.dots{display:flex; gap:7px}
.dots button{
  width:26px; height:44px; background:none; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center;
}
.dots button i{display:block; width:100%; height:2px; background:var(--line); transition:background .3s var(--ease)}
.dots button[aria-current="true"] i{background:var(--navy)}
.on-dark .dots button i{background:rgba(255,255,255,.24)}
.on-dark .dots button[aria-current="true"] i{background:var(--sky)}
.count{font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--peri); font-variant-numeric:lining-nums}
.q-fade{animation:qf .55s var(--ease)}
@keyframes qf{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

/* ---------- forms ---------- */
.field{display:block; margin-bottom:16px}
.field span{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  margin-bottom:8px; color:#5A6B94;   /* periwinkle darkened: the --peri tint is 3.49:1 on white */
}
.field input,.field textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:15.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{min-height:112px; resize:vertical}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(21,71,136,.12);
}
.on-dark .field span{color:var(--sky)}
.on-dark .field input,.on-dark .field textarea{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff;
}
.on-dark .field input:focus,.on-dark .field textarea:focus{
  border-color:var(--sky); box-shadow:0 0 0 3px rgba(157,176,222,.18);
}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.hp input{color:var(--ink); border:0; background:none}
.form-note{font-size:12.5px; line-height:1.6; margin-top:14px; color:var(--peri-text)}
.form-ok{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(21,71,136,.07); border:1px solid rgba(21,71,136,.2);
  font-size:14.5px; color:var(--navy); display:none;
}
.form-ok.show{display:block}
.on-dark .form-ok{background:rgba(157,176,222,.14); border-color:rgba(157,176,222,.35); color:#fff}
.form-err{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(176,52,52,.07); border:1px solid rgba(176,52,52,.3);
  font-size:14.5px; color:#8A2A2A; display:none;
}
.form-err a{color:inherit; text-decoration:underline}
.form-err.show{display:block}
.on-dark .form-err{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff}
form.enq.busy button[type="submit"]{opacity:.6; pointer-events:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:rgba(255,255,255,.62); padding:clamp(58px,6vw,86px) 0 0}
.ftr-grid{
  display:grid; gap:clamp(26px,3.4vw,52px);
  grid-template-columns:1.55fr 1fr 1fr 1.2fr;
  padding-bottom:clamp(34px,4vw,52px); border-bottom:1px solid rgba(255,255,255,.11);
}
.ftr h4{
  font-family:Inter,sans-serif; font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sky); margin:0 0 16px; line-height:1;
}
.ftr ul{display:flex; flex-direction:column; gap:9px}
.ftr li{margin:0; font-size:13.5px; line-height:1.45}
.ftr a{transition:color .25s var(--ease)}
.ftr a:hover{color:#fff}
.ftr-about .lockup img{height:44px}
.ftr-about .lockup .wm b{font-size:12.5px}
.ftr-about .lockup .wm span{font-size:8.5px; color:var(--sky); opacity:1}
.ftr-about p{font-size:13.5px; line-height:1.62; margin:18px 0 0; max-width:34ch}
.ftr-badges{
  margin:18px 0 0; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.12);
}
.ftr-badges li{
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12);
  font-size:11px; font-weight:500; letter-spacing:.06em; line-height:1.4;
  color:rgba(255,255,255,.66); text-transform:none;
}
.ftr-social{display:flex; gap:12px; margin-top:20px}
.ftr-social a{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.78);
  transition:color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.ftr-social a:hover{border-color:#fff}
.ftr-social a:hover{color:#fff; transform:translateY(-2px)}
.ftr-bot{
  padding:20px 0 26px; display:flex; flex-wrap:wrap; gap:8px 26px;
  justify-content:space-between; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.62);
}
.ftr-bot p{margin:0}
/* the column titles: a real heading in the serif, white, so they read as headings and not as
   one more link in the list (Amy, Sept 2026) */
.ftr-h{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:21px; line-height:1.15;
  color:var(--ink); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.ftr .ftr-h{color:#fff; border-bottom-color:rgba(255,255,255,.16)}   /* the contact page reuses it on white */
.ftr-legal{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:8px 0 22px; border-top:1px solid rgba(255,255,255,.11); font-size:12.5px;
}
.ftr-legal a{color:rgba(255,255,255,.78); min-height:36px; display:inline-flex; align-items:center}
.ftr-legal a:hover{color:#fff}

/* ---------- floating action rail ---------- */
.rail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:8px;
  padding:9px; border-radius:100px;
  background:rgba(10,33,68,.80); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-sm);
}
.rail a,.rail button{
  width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.rail a:hover,.rail button:hover{background:var(--navy); transform:scale(1.07)}
.rail .wa:hover{background:#25D366; color:#0A2144}
.rail #toTop{opacity:0; pointer-events:none; transition:opacity .35s var(--ease), background .3s var(--ease)}
.rail #toTop.on{opacity:1; pointer-events:auto}

/* Individual bubbles in the client's blues. Icons only: the label is a tooltip that opens to
   the LEFT, because the rail is pinned to the right edge of the screen and a label sliding
   rightwards runs straight off it.

   The rail floats over whatever section happens to be behind it, so its colours cannot be
   fixed. site.js reads the ground under the rail as you scroll and adds .on-dark, and the
   bubbles invert: navy on a white section, white on the dark bands and the photographs. */
.rail-bubbles{
  background:none; border:0; box-shadow:none; padding:0; gap:12px; right:22px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.rail-bubbles .rail-b{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; padding:0; border:0; background:none; cursor:pointer;
  border-radius:50%; overflow:visible;
}
.rail-bubbles .rail-i{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:#fff; color:var(--navy);
  border:1px solid rgba(21,71,136,.22); box-shadow:0 10px 24px -12px rgba(10,33,68,.55);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.rail-bubbles .rail-b:hover .rail-i,.rail-bubbles .rail-b:focus-visible .rail-i{
  background:var(--navy); color:#fff; border-color:var(--navy); transform:scale(1.07);
}
.rail-bubbles.on-dark .rail-i{
  background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5);
}
.rail-bubbles.on-dark .rail-b:hover .rail-i,.rail-bubbles.on-dark .rail-b:focus-visible .rail-i{
  background:#fff; color:var(--navy); border-color:#fff;
}
.rail-bubbles .rail-l{
  position:absolute; right:calc(100% + 13px); top:50%;
  transform:translateY(-50%) translateX(8px);
  padding:8px 14px; border-radius:8px; white-space:nowrap; pointer-events:none;
  background:var(--ink); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .26s var(--ease), transform .3s var(--ease);
  box-shadow:0 12px 26px -12px rgba(10,33,68,.6);
}
.rail-bubbles .rail-l::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:var(--ink);
}
.rail-bubbles .rail-b:hover .rail-l,.rail-bubbles .rail-b:focus-visible .rail-l{
  opacity:1; transform:translateY(-50%);
}
@media (hover:none),(max-width:760px){
  .rail-bubbles .rail-l{display:none}
  .rail-bubbles .rail-b{width:48px; height:48px}
  .rail-bubbles .rail-i{width:48px; height:48px}
}
.rail-bubbles .rail-top{display:none}
.rail-bubbles .rail-top.on{display:flex; animation:bubbleIn .4s var(--ease) both}
@keyframes bubbleIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.rail-bubbles .rail-top.on{opacity:1; pointer-events:auto}

/* ---------- demo switcher ---------- */
.switcher{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:4px; padding:6px 8px; border-radius:100px;
  background:rgba(10,33,68,.86); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.switcher a{
  display:inline-flex; align-items:center; min-height:40px;
  padding:0 15px; border-radius:100px; font-size:11.5px; font-weight:600;
  letter-spacing:.07em; color:rgba(255,255,255,.68); transition:color .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.switcher a:hover{color:#fff}
.switcher a.cur{background:#fff; color:var(--ink)}
.switcher i{width:1px; height:16px; background:rgba(255,255,255,.2)}

/* ---------- reveal (visible by default; JS opts in) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(14px)}
.js [data-reveal].in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js.no-reveal [data-reveal]{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important; transform:none !important}
}

/* ---------- responsive ---------- */
/* Header fit.
   NOTE the specificity: `.hdr .btn-hdr` (0,2,0) sets display:inline-flex, and a media query
   adds none of its own, so `.hdr-cta{display:none}` (0,1,0) silently loses and the quote
   button shoves the burger off the screen. Match on both classes inside .hdr. */
/* The site nav carries nine items next to a 330px lockup, so it needs to start giving ground
   earlier than the demos did: at 1600 the quote button was being pushed past the edge of the
   page and clipped. */
@media (max-width:1740px){
  .nav{gap:clamp(11px,1.2vw,20px)}
}
@media (max-width:1560px){
  .nav{gap:14px}
  .nav a{font-size:11.5px; letter-spacing:.05em}
  .hdr .btn-hdr{padding:0 15px; font-size:11px}
}
@media (max-width:1400px){
  .nav{gap:11px}
  .nav a{font-size:11px; letter-spacing:.04em}
}
@media (max-width:1340px){
  .hdr .btn-hdr.hdr-cta{display:none}
}
@media (max-width:1080px){
  .hdr .nav{display:none}
  .burger{display:flex}
  .ftr .ftr-grid,.ftr-compact .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){
  .lockup img{height:40px}
  .lockup .wm b{font-size:12px}
  .lockup .wm span{font-size:8.5px; letter-spacing:.26em}
}
@media (max-width:760px){
  body{font-size:16.5px}
  :root{--hdr:68px}
  .ftr .ftr-grid,.ftr-compact .ftr-grid{grid-template-columns:1fr}
  .switcher{gap:2px; padding:5px 6px}
  .switcher a{padding:0 9px; font-size:10.5px; min-height:36px}
  .switcher i{display:none}
  .btn{width:100%; max-width:340px}
  .btn.auto{width:auto}
}

/* ---------- logo swap: white mark on dark grounds, navy on light ---------- */
.lockup .mark-on-light{display:none}
.hdr.solid .lockup .mark-on-dark,
.hdr-light .lockup .mark-on-dark{display:none}
.hdr.solid .lockup .mark-on-light,
.hdr-light .lockup .mark-on-light{display:block}

/* ---------- shared bits used by the demo bodies ---------- */
.kicker{
  font-size:11.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; margin:0 0 26px; text-shadow:0 1px 14px rgba(10,33,68,.6);
}
.center{text-align:center}
p.lead.center{margin-left:auto; margin-right:auto; max-width:62ch}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px);
}
.stats .stat{padding-left:22px; border-left:1px solid var(--line)}

.enq-row{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.enq .btn{margin-top:6px}

.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 26px}

/* accreditation lists */
.d1-accred,.d2-accred,.d3-accred{margin-top:34px; display:grid; gap:1px; background:var(--line)}
.d1-accred li,.d2-accred li,.d3-accred li{
  background:#fff; padding:16px 18px; display:flex; flex-direction:column; gap:3px;
}
.d1-accred li b,.d2-accred li b,.d3-accred li b{
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--navy);
}
.d1-accred li span,.d2-accred li span,.d3-accred li span{font-size:13.5px; color:var(--body)}
.on-dark .d1-accred{background:transparent; gap:0}
.on-dark .d1-accred li{
  background:transparent; padding:15px 0; border-top:1px solid rgba(255,255,255,.15);
}
.on-dark .d1-accred li b{color:var(--sky)}
.on-dark .d1-accred li span{color:rgba(255,255,255,.66)}

/* footer detail lists */
.ftr-contact li{line-height:1.5}
.ftr-hours li{display:flex; justify-content:space-between; gap:14px; line-height:1.5}
/* Scoped to the dark grounds it was written for. Unscoped it painted white on white when the
   contact page reused the same list on a light section. */
.ftr-hours li b{font-weight:500; color:var(--ink); font-variant-numeric:lining-nums}
.ftr .ftr-hours li b,.on-dark .ftr-hours li b{color:rgba(255,255,255,.90)}
.ftr-hours li span{color:inherit}
.ftr .ftr-hours li span{color:rgba(255,255,255,.66)}
.ftr h4.ftr-h4-2{margin-top:26px}
.ftr-areas{display:grid !important; grid-template-columns:1fr 1fr; gap:9px 14px}

/* ---------- seamless marquees ----------
   Trailing margin on each item, never flex gap: with gap the loop jumps by one gap width.
   Two identical sets and a -50% translate is what makes the seam invisible. */
.also-rail,.area-rail{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.also-track,.area-track{display:flex; width:max-content; animation:slide 52s linear infinite}
.area-track{animation-duration:64s}
.also-rail:hover .also-track,.area-rail:hover .area-track{animation-play-state:paused}
.also-set,.area-set{display:flex; flex:none}
@keyframes slide{from{transform:none} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.also-track,.area-track{animation:none}}

@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr; gap:26px 18px}
  .enq-row{grid-template-columns:1fr}
}

/* ---------- cursors ----------
   Native CSS cursor images: painted by the compositor, so they physically cannot
   freeze the way a JS follower can. Gated to real pointers; off for touch,
   reduced motion and forced colours. Scoped per demo so the showcase keeps its own. */
@media (hover:hover) and (pointer:fine){
  .cur-d1{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23154788%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, default}
  .cur-d1 a,.cur-d1 button,.cur-d1 [role="button"],.cur-d1 label,.cur-d1 summary{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23154788%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, pointer}
  .cur-d1 input,.cur-d1 textarea{cursor:text}
  .cur-d2{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%2213%22%20fill%3D%22%239DB0DE%22%20opacity%3D%22.16%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%229%22%20fill%3D%22%239DB0DE%22%20opacity%3D%22.22%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%225.5%22%20fill%3D%22%23CBD7EE%22%20opacity%3D%22.30%22%2F%3E%3Cg%20transform%3D%22translate%284%2C4%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23154788%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 8 6, default}
  .cur-d2 a,.cur-d2 button,.cur-d2 [role="button"],.cur-d2 label,.cur-d2 summary{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%2213%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.22%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%229%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.30%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%225.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.42%22%2F%3E%3Cg%20transform%3D%22translate%284%2C4%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23154788%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 8 6, pointer}
  .cur-d2 input,.cur-d2 textarea{cursor:text}
  .cur-d3{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23154788%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225.5%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23154788%22%20stroke-width%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225.5%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%220.7%22%2F%3E%3C%2Fsvg%3E") 6 4, default}
  .cur-d3 a,.cur-d3 button,.cur-d3 [role="button"],.cur-d3 label,.cur-d3 summary{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23154788%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225.5%22%20r%3D%225%22%20fill%3D%22%23154788%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E") 6 4, pointer}
  .cur-d3 input,.cur-d3 textarea{cursor:text}
}
@media (prefers-reduced-motion:reduce),(forced-colors:active){
  .cur-d1,.cur-d2,.cur-d3,.cur-d1 a,.cur-d2 a,.cur-d3 a,.cur-d1 button,.cur-d2 button,.cur-d3 button{cursor:auto}
}


/* ---------- motion kit ----------
   Reusable, opt-in, and all of it geometry driven so nothing can be left stranded.
   Directions on [data-reveal], a word-by-word headline reveal, parallax and a
   scroll progress bar. Everything is visible by default until .js is set. */
.js [data-reveal="left"]{opacity:0; transform:translateX(-26px)}
.js [data-reveal="right"]{opacity:0; transform:translateX(26px)}
.js [data-reveal="scale"]{opacity:0; transform:scale(.955)}
.js [data-reveal="mask"]{clip-path:inset(0 0 100% 0); opacity:1; transform:none}
.js [data-reveal="split"]{opacity:1; transform:none}
.js [data-reveal="mask"].in{clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--ease)}
.js [data-reveal="left"].in,.js [data-reveal="right"].in,.js [data-reveal="scale"].in{
  opacity:1; transform:none; transition:opacity .8s var(--ease), transform .9s var(--ease);
}
.js.no-reveal [data-reveal]{clip-path:none !important}

/* headline words rising in one after another */
.js .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.08em .04em .20em; margin:-.08em -.04em -.20em;
}
.js .w > i{
  display:inline-block; font-style:inherit; transform:translateY(105%);
  transition:transform .95s var(--ease);
}
.js [data-split].in .w > i{transform:none}
.js.no-reveal .w > i{transform:none !important}

/* a slow drift on big photographs */
.js [data-parallax]{will-change:transform}

/* Thin progress bar across the top of the page. Scaled, not resized: the width is set on
   every animation frame, and a width transition means the bar is permanently chasing the
   scroll a tenth of a second behind while relaying out on each frame. A transform is exact
   and stays on the compositor. */
.prog{
  position:fixed; inset:0 auto auto 0; height:2px; width:100%; z-index:90;
  background:linear-gradient(90deg, var(--navy), var(--peri));
  transform:scaleX(0); transform-origin:0 50%; will-change:transform; pointer-events:none;
}

/* hover lift, used on cards and tiles */
.lift{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.lift:hover{transform:translateY(-6px)}

/* a rule that draws itself in */
.js .draw{transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease)}
.js .draw.in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{clip-path:none !important}
  .js .w > i{transform:none !important}
  .prog{display:none}
}

/* ---------- compact footer (demos 2, 3 and 4) ---------- */
.ftr-compact{padding:clamp(46px,4.6vw,68px) 0 0; font-size:13px}
.ftr-compact .ftr-grid{
  grid-template-columns:1.4fr .85fr .85fr 1.1fr;
  gap:clamp(22px,2.8vw,44px); padding-bottom:clamp(28px,3.2vw,42px);
}
.ftr-compact h4{font-size:9.5px; margin-bottom:13px}
.ftr-compact ul{gap:7px}
.ftr-compact li{font-size:12.5px}
.ftr-compact .ftr-about p{font-size:12.5px; line-height:1.58; margin-top:14px; max-width:32ch}
.ftr-compact .ftr-about .lockup img{height:50px}
.ftr-compact .ftr-about .lockup{gap:12px}
.ftr-compact .ftr-about .lockup .wm b{font-size:14px}
.ftr-compact .ftr-about .lockup .wm span{font-size:9.5px}
.ftr-compact .ftr-badges{margin-top:14px; gap:5px}
.ftr-compact .ftr-badges span{font-size:9px; padding:5px 9px}
.ftr-compact .ftr-social{margin-top:16px}
.ftr-compact .ftr-social a{width:42px; height:42px}
.ftr-compact .ftr-bot{padding:16px 0 6px; font-size:11px; border-bottom:0}
.ftr-compact .ftr-hours li{font-size:12.5px}

/* Source order matters as much as specificity: the compact footer block above ties with
   the responsive rules earlier in this file (both 0,2,0) and, being later, was winning at
   every width. These have to come last. */
@media (max-width:1080px){
  .ftr .ftr-grid,.ftr-compact .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .ftr .ftr-grid,.ftr-compact .ftr-grid{grid-template-columns:1fr}
  .ftr-areas{grid-template-columns:1fr 1fr}
}
@media (hover:hover) and (pointer:fine){
  .cur-d4{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23154788%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, default}
  .cur-d4 a,.cur-d4 button,.cur-d4 [role="button"],.cur-d4 label,.cur-d4 summary{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%3E%3Cg%20transform%3D%22translate%282%2C2%29%22%3E%3Cpath%20d%3D%22M4%201.8%20L4%2018.9%20L8.3%2014.8%20L11.1%2020.9%20L14.1%2019.5%20L11.3%2013.5%20L17.8%2013.1%20Z%22%20fill%3D%22%23154788%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, pointer}
  .cur-d4 input,.cur-d4 textarea{cursor:text}
}
@media (prefers-reduced-motion:reduce),(forced-colors:active){
  .cur-d4,.cur-d4 a,.cur-d4 button{cursor:auto}
}

/* ---------- extra motion ---------- */
.js [data-reveal="up"]{opacity:0; transform:translateY(20px)}
.js [data-reveal="up"].in{opacity:1; transform:none; transition:opacity .75s var(--ease), transform .85s var(--ease)}
/* a photograph that drifts a little slower than the page it sits in */
img.px{will-change:transform}
/* section eyebrows draw their rule in rather than appearing with it */
.js .eyebrow::before,.js .sc-eyebrow::before{transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .1s}
.js [data-reveal].in .eyebrow::before,.js .eyebrow.in::before,
.js [data-reveal].in.eyebrow::before,.js .in .eyebrow::before{transform:scaleX(1)}
.js.no-reveal .eyebrow::before{transform:scaleX(1) !important}
/* cards lift a touch under the pointer */
.svc,.tile,.d3-back,.d4-tile,.d1-gal figure,.d2-gal figure,.area-c,.also-c{
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease);
}
.d3-back:hover,.d1-gal figure:hover,.d2-gal figure:hover{transform:translateY(-4px)}

/* ---------- rail: a different treatment on each demo ----------
   d1 bubbles that open a label · d2 solid circles that stay put ·
   d3 the same idea, smaller · d4 the four grouped into one panel. */

/* demo 2 — individual circles, no expansion */
.rail-solid{
  background:none; border:0; box-shadow:none; padding:0; gap:14px; right:22px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.rail-solid .rail-b{
  position:relative; width:54px; height:54px; padding:0; cursor:pointer;
  border-radius:50%; background:#fff; color:var(--navy);
  border:1.5px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 28px -14px rgba(10,33,68,.45);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.rail-solid .rail-i{display:flex; align-items:center; justify-content:center}
.rail-solid .rail-l{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.rail-solid .rail-b:hover{background:var(--navy); color:#fff; transform:scale(1.08)}
.rail-solid .wa:hover{background:var(--peri); color:#fff; border-color:var(--peri)}
.rail-solid .rail-top{display:none; background:var(--navy); color:#fff}
.rail-solid .rail-top.on{display:flex; animation:bubbleIn .4s var(--ease) both}
.rail-solid .rail-top:hover{background:var(--ink); color:#fff}

/* demo 3 — the same, smaller and quieter */
.rail-small{
  background:none; border:0; box-shadow:none; padding:0; gap:10px; right:18px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.rail-small .rail-b{
  position:relative; width:40px; height:40px; padding:0; cursor:pointer;
  border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -14px rgba(10,33,68,.55);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.rail-small .rail-i{display:flex; align-items:center; justify-content:center}
.rail-small .rail-i svg{width:15px; height:15px}
.rail-small .rail-l{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.rail-small .rail-b:hover{background:var(--navy); color:#fff; border-color:var(--navy); transform:scale(1.1)}
.rail-small .rail-top{display:none}
.rail-small .rail-top.on{display:flex; animation:bubbleIn .4s var(--ease) both}

/* demo 4 — grouped into a single panel */
.rail-group{
  right:20px; gap:0; padding:6px; border-radius:100px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.rail-group .rail-b{
  position:relative; width:46px; height:46px; padding:0; border:0; cursor:pointer;
  border-radius:0; background:none; color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.rail-group .rail-b:first-child{border-radius:100px 100px 0 0}
.rail-group .rail-b:last-child{border-radius:0 0 100px 100px}
.rail-group .rail-i{display:flex; align-items:center; justify-content:center}
.rail-group .rail-l{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.rail-group .rail-b + .rail-b{border-top:1px solid var(--line)}
.rail-group .rail-b:hover{background:var(--navy); color:#fff}
.rail-group .rail-top{display:none}
.rail-group .rail-top.on{display:flex; animation:bubbleIn .4s var(--ease) both}

@media (max-width:760px){
  .rail-solid,.rail-small,.rail-group{
    right:auto; left:50%; top:auto; bottom:74px; transform:translateX(-50%); flex-direction:row;
  }
  .rail-group{padding:5px}
  .rail-small .rail-b{width:46px; height:46px}
  .rail-small .rail-i svg{width:17px; height:17px}
  .rail-group .rail-b + .rail-b{border-top:0; border-left:1px solid var(--line)}
  .rail-group .rail-b:first-child{border-radius:100px 0 0 100px}
  .rail-group .rail-b:last-child{border-radius:0 100px 100px 0}
  .rail-solid .rail-b{width:48px; height:48px}
}

/* ---------- quirkier motion ---------- */
/* a soft light that follows the pointer across the banner */
[data-spotlight]{--sx:50%; --sy:50%}
[data-spotlight]::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(38% 46% at var(--sx) var(--sy),
              rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 45%, transparent 72%);
}
[data-spotlight].lit::after{opacity:1}

/* marquees lean very slightly with the scroll */
.d3-mq-track,.also-track,.area-track,.ticker-track{
  transform-origin:center; will-change:transform;
}
.d3-mq-set,.also-set,.area-set,.ticker-set{transform:var(--lean, none); transition:transform .12s linear}

/* headings settle their letter spacing as they arrive */
.js [data-split] .w > i{letter-spacing:.04em; transition:transform .95s var(--ease), letter-spacing 1.1s var(--ease)}
.js [data-split].in .w > i{letter-spacing:inherit}

/* a hairline that sweeps across a section as it enters */
.js .sweep{position:relative; overflow:hidden}
.js .sweep::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--peri), transparent);
  transform:translateX(-100%); opacity:.7;
}
.js .sweep.in::after{animation:sweepAcross 1.6s var(--ease) .2s both}
@keyframes sweepAcross{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  [data-spotlight]::after{display:none}
  .d3-mq-set,.also-set,.area-set,.ticker-set{transform:none !important}
  .js [data-split] .w > i{letter-spacing:inherit; transition:none}
  .js .sweep.in::after{animation:none}
}

/* A horizontal reveal offset on an element that already fills the width pushes its right
   edge past the viewport and widens the document. On desktop the containers are narrower
   than the screen so it never shows; on a single column phone layout it does. Move those
   reveals vertically instead. */
@media (max-width:980px){
  .js [data-reveal="left"],.js [data-reveal="right"]{transform:translateY(20px)}
  .js [data-reveal="left"].in,.js [data-reveal="right"].in{transform:none}
}

/* preview furniture and hero controls need a real finger target */
.switcher a{min-height:44px}
.d3-hero-dots button{width:44px; height:44px}
@media (max-width:760px){
  .switcher a{min-height:42px; padding:0 10px}
}

/* ---------- reviews, rolling ----------
   Two identical sets and a -50% translate is what makes the seam invisible; the gap
   between cards is a trailing margin, never flex gap, or the loop jumps by one gap. */
.rev-wrap{display:grid; gap:clamp(12px,1.3vw,20px)}
.rev-rail{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rev-track{display:flex; width:max-content; animation:revRoll 90s linear infinite}
.rev-rail-rev .rev-track{animation-direction:reverse; animation-duration:104s}
.rev-rail:hover .rev-track{animation-play-state:paused}
.rev-set{display:flex; flex:none}
@keyframes revRoll{from{transform:none} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rev-track{animation:none}}

.rev-c{
  margin:0 clamp(12px,1.3vw,20px) 0 0; flex:none;
  width:clamp(280px,26vw,380px); padding:clamp(22px,2vw,30px);
  border-radius:var(--r); background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 16px 34px -28px rgba(10,33,68,.5);
}
.rev-c blockquote{
  margin:0 0 18px; font-size:14.5px; line-height:1.66; color:var(--ink);
  font-family:Inter,sans-serif;
}
.rev-c blockquote::before{content:"“"}
.rev-c blockquote::after{content:"”"}
.rev-c figcaption{display:flex; flex-direction:column; gap:3px; padding-top:14px; border-top:1px solid var(--line)}
.rev-c figcaption b{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.rev-c figcaption span{font-size:12px; color:var(--peri)}

@media (max-width:760px){
  .rev-c{width:78vw}
}

/* the rail runs the full width of the section, with a gutter so the first card is not
   flush to the screen edge */
.rev-wrap{padding:0 var(--gut)}

/* ---------- reviews, one at a time ----------
   Shared skeleton. Each demo gives it its own way of changing over. */
.rev-flick{display:grid}
.rev-f{
  grid-area:1 / 1; margin:0; display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
}
.rev-flick:not(.flick-on) .rev-f{opacity:1}
.rev-flick:not(.flick-on) .rev-f ~ .rev-f{display:none}
.rev-f.is-on{opacity:1; pointer-events:auto}
.rev-f blockquote{margin:0}
.rev-f blockquote::before{content:"“"}
.rev-f blockquote::after{content:"”"}
.rev-f figcaption{display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-top:18px}
.rev-f figcaption b{
  font-family:Inter,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
}
.rev-f figcaption span{font-family:Inter,sans-serif; font-size:12.5px; color:var(--peri)}

/* ---------- footer opening hours on a phone ----------
   At full width space-between threw the time to the far edge, up to 255px away from the
   day it belongs to. Left align them and give the day a fixed column so the times still
   line up with each other. */
@media (max-width:900px){
  .ftr-hours li{justify-content:flex-start; gap:0}
  .ftr-hours li span{flex:none; min-width:10.5em}
  .ftr-hours li b{white-space:nowrap}
}


/* ------------------------------------------------------------------ late overrides
   These sit at the very end on purpose: media queries add no specificity, so a mobile
   rule written earlier loses to a same-specificity desktop rule further down the file. */

/* The floating demo switcher is preview furniture, but it is fixed to the bottom of the
   viewport and was sitting on top of the footer's company registration line once you
   reached the true bottom of the page. Give the footer room for it, and shrink the pill
   itself on the narrowest phones, where it was 352px wide inside a 320px screen. */
/* .ftr-compact .ftr-bot sets padding with the shorthand and outspecifies a bare .ftr-bot,
   so the three demos using the compact footer kept their 22px and stayed covered. */
.ftr-bot,.ftr-compact .ftr-bot{padding-bottom:6px}   /* the live site has no switcher: no clearance needed */
/* The rail docks as a bar along the bottom on phones AND tablets: on an iPad the vertical rail
   sat over the right-hand edge of the modules and the pill rows (Sept 2026 pre-launch check). */
@media (max-width:1024px){
  .rail{
    right:auto; left:50%; top:auto; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%); flex-direction:row;
    transition:transform .5s var(--ease), opacity .5s var(--ease);
  }
  .rail.rail-late,.rail.rail-hold{transform:translate(-50%, 90px); opacity:0; pointer-events:none}
  .ftr-legal{padding-bottom:calc(22px + 72px + env(safe-area-inset-bottom, 0px))}   /* the contact bar sits here */
}
@media (max-width:420px){
  .switcher{gap:2px; padding:5px 6px; max-width:calc(100vw - 20px)}
  .switcher a{padding:0 10px; font-size:10.5px}   /* keep the 44px target: height is not what makes it wide */
}
@media (max-width:360px){
  .switcher a{padding:0 8px; font-size:10px; letter-spacing:.04em}
}

/* At 320px the logo lockup kept its full size and pushed the burger clean off the right
   edge of the screen, so there was no way to open the menu at all. */
@media (max-width:360px){
  .hdr .lockup img,.hdr.solid .lockup img{height:52px}
  .hdr .lockup .wm b{font-size:12.5px}
  .hdr .lockup .wm span{font-size:8.5px; letter-spacing:.24em}
  .d4-hdr .d4-mark img,.d4-hdr.solid .d4-mark img{height:56px}
}

/* Footer links were 15-16px tall with barely 10px between them on a phone: a 44px target is
   the minimum anyone can hit reliably, and these are the phone number and email. */
@media (max-width:760px){
  .ftr-grid li a,.ftr-contact a,.ftr-bot a{min-height:36px; display:flex; align-items:center}
  .ftr-contact a{gap:10px}
  /* the full footer's social icons are a bare 18px glyph with no box around them */
  .ftr-social{gap:12px}
  .ftr-social a{width:44px; height:44px; display:flex; align-items:center; justify-content:center}
}

/* Small periwinkle text on a light ground fails contrast at the brand tint, so those specific
   uses take the darker one. The same colour on the dark bands is left alone: it is readable
   there, and darkening it would make it worse. */
.rating span,.quote-meta,.count{color:var(--peri-text)}
.on-dark .rating span,.on-dark .quote-meta,.on-dark .count,
.d1-rev .rev-c figcaption span,.on-dark .rev-f figcaption span{color:var(--sky)}

/* Demo 1 — "The Terrace". Centred, light, editorial. Cormorant Garamond display. */

h1,h2,h3,.quote-body{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-variant-numeric:lining-nums;
}
h1 em,h2 em,h3 em{font-style:italic; color:var(--navy); display:block}
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em{color:var(--sky)}

h1{font-size:clamp(46px,7vw,104px); font-weight:300; line-height:1.02; letter-spacing:-.02em}
h2{font-size:clamp(34px,4.6vw,68px); font-weight:300; line-height:1.06}
h3{font-size:clamp(23px,2vw,29px); font-weight:400}

/* much bigger logo on this demo, as asked, with the header grown to carry it */
:root{--hdr:130px; --topbar-h:0px}
/* the client asked for the logo and the name "slightly bigger" (Sept 2026): mark 88 -> 98,
   wordmark 17 -> 19, header 120 -> 130 so the proportions hold */
.lockup img{height:98px}
.hdr.solid .lockup img{height:78px}
/* The header: nothing behind it over the banner; once you scroll it becomes a pane of light
   blue glass (Amy, Sept 2026: "as we scroll it turns to the light blue colour, maybe with a
   glass effect"). The menu itself is quieter and more spaced, with a fine rule that draws
   under the item you are on. */
.hdr.solid{
  background:rgba(184,201,236,.58);
  backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(21,71,136,.10), 0 18px 40px -30px rgba(10,33,68,.45);
}
.nav{gap:clamp(18px,2.2vw,36px)}
.nav a{font-size:12px; font-weight:600; letter-spacing:.16em; padding:10px 0}
.nav a::after{height:1.5px; background:var(--sky); bottom:2px}
.hdr.solid .nav a::after,.hdr-light .nav a::after{background:var(--navy)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr.solid .nav a[aria-current="page"]{color:var(--navy)}
.hdr .btn-hdr{border-radius:100px; padding:0 24px; letter-spacing:.14em; box-shadow:0 10px 24px -14px rgba(21,71,136,.7)}
.hdr.solid .btn-hdr{box-shadow:0 10px 24px -14px rgba(21,71,136,.5)}
@media (max-width:1560px){.nav{gap:16px} .nav a{font-size:11.5px; letter-spacing:.12em}}
@media (max-width:1400px){.nav{gap:13px} .nav a{font-size:11px; letter-spacing:.1em}}
.lockup{gap:17px}
.lockup .wm b{font-size:19px}
.lockup .wm span{font-size:12.5px; letter-spacing:.34em}
.hdr.solid{height:102px}

/* ---------------------------------------------------------------- top bar
   A quiet line above the menu for the phone number, so it is on screen before anyone has
   scrolled or opened anything. The header sits underneath it rather than over it. */
.topbar{
  position:fixed; inset:0 0 auto; z-index:65; height:var(--topbar-h);
  background:var(--navy); color:rgba(255,255,255,.82);   /* the logo's own blue (Amy: the navy "draws it down") */
}
.topbar .wrap-wide{
  display:flex; align-items:center; justify-content:flex-end; gap:clamp(16px,2.4vw,34px);
  height:100%;
}
.topbar a{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500;
  letter-spacing:.03em; color:rgba(255,255,255,.88); transition:color .3s var(--ease);
}
.topbar a:hover{color:#fff}
.topbar svg{color:#fff; flex:none; opacity:.85}
.topbar .tb-phones{display:inline-flex; align-items:center; gap:clamp(14px,2vw,28px)}
.topbar .tb-phones a{font-size:14px; font-weight:600; color:#fff; letter-spacing:.02em}
.hdr{top:var(--topbar-h)}
html{scroll-padding-top:calc(var(--topbar-h) + var(--hdr) + 14px)}
@media (max-width:760px){
  .topbar .tb-email{display:none}
  .topbar .wrap-wide{justify-content:center}
}

/* ---------------------------------------------------------------- hero */
.d1-hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:calc(var(--topbar-h) + var(--hdr) + 56px) 0 clamp(74px,9vh,116px);
}
/* No blue film. A neutral, bottom-weighted shade so the photograph keeps its own colour
   and the white type still has something to sit on. */
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.16) 46%,
                    rgba(0,0,0,.36) 74%, rgba(0,0,0,.58) 100%);
}
/* The client (Sept 2026): "a bit more of a luxurious touch... add some vibrancy... a heavy
   zoom out effect... remove any blue overlays on any of the images". The photographs carry
   a touch more saturation and contrast everywhere, the homepage banner opens close in and
   pulls back, and every tint laid over a photograph is neutral shade, never navy. */
img[src*="/assets/img/work/"]{filter:saturate(1.1) contrast(1.03)}
/* The homepage banner is three of their best projects, each pulling back from a close crop
   and dissolving into the next, so it reads like a slow film (Amy, Sept 2026). 7s a slide,
   1.4s crossfade, 21s round. The first slide is painted from the first frame. */
.hero-slides img{
  position:absolute; inset:0; filter:saturate(1.22) contrast(1.06); transform-origin:50% 55%;
  will-change:transform, opacity; opacity:0;
  animation:heroSlide 21s cubic-bezier(.3,.05,.2,1) infinite both;
}
.hero-slides img:nth-child(1){opacity:1; animation-name:heroSlideFirst}
.hero-slides img:nth-child(2){animation-delay:7s}
.hero-slides img:nth-child(3){animation-delay:14s}
@keyframes heroSlide{
  0%{opacity:0; transform:scale(1.28)} 6.7%{opacity:1}
  33.3%{opacity:1; transform:scale(1.04)} 40%{opacity:0; transform:scale(1.0)}
  100%{opacity:0; transform:scale(1.28)}
}
@keyframes heroSlideFirst{
  0%{opacity:1; transform:scale(1.28)}
  33.3%{opacity:1; transform:scale(1.04)} 40%{opacity:0; transform:scale(1.0)}
  99.9%{opacity:0; transform:scale(1.28)} 100%{opacity:1; transform:scale(1.28)}
}
@media (prefers-reduced-motion:reduce){
  .hero-slides img{animation:none; transform:none}
  .hero-slides img:nth-child(n+2){display:none}
}
.d1-hero-in{position:relative; display:flex; flex-direction:column; align-items:center; max-width:1000px}
.d1-hero .kicker{text-shadow:0 2px 16px rgba(0,0,0,.7)}
.d1-hero h1{color:#fff; margin-bottom:26px; text-shadow:0 2px 6px rgba(0,0,0,.32), 0 6px 34px rgba(0,0,0,.55)}
/* "Built to Last." was periwinkle with a light passing through it, and over the grey paving
   the colour vanished (Amy, Sept 2026: "I can't see the colour in the banner text", then "there
   should be 2 words or so in the blue colour, the rest of the text should be white"). So: the
   headline white, the accent line (the <em>) in a brighter, more saturated tint of the logo
   blue that still reads as blue over a photograph and against the blue block banners, with
   the light still passing through it on the homepage. The shadow is a drop-shadow filter: a
   text-shadow shows through gradient-filled type. The rules live with the inner banner ones
   further down so they win over .pb h1 em. */
@keyframes emShine{0%{background-position:100% 0} 55%{background-position:0% 0} 100%{background-position:0% 0}}
.d1-hero .lead{
  color:#fff; max-width:62ch; font-size:clamp(17px,1.35vw,20px);
  text-shadow:0 2px 18px rgba(0,0,0,.62);
}
.d1-hero .hero-cta{justify-content:center; margin:36px 0 30px}

/* the tick pills are gone; a single hairline row of facts instead */
.d1-facts{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  row-gap:10px; padding-top:20px; border-top:1px solid rgba(255,255,255,.28);
}
.d1-facts li{
  padding:2px clamp(12px,1.5vw,22px); line-height:1.5;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.94); text-shadow:0 2px 14px rgba(0,0,0,.6);
  border-left:1px solid rgba(255,255,255,.28);
}
.d1-facts li:first-child{border-left:0}

.d1-cue{
  position:static; margin-top:clamp(28px,4.4vh,54px);
  flex-direction:column-reverse; gap:10px;
  color:rgba(255,255,255,.86); text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.d1-cue i{height:40px; background:linear-gradient(rgba(255,255,255,.9),transparent)}

/* ---------------------------------------------------------------- intro */
.d1-intro-head{margin-bottom:clamp(34px,4vw,58px)}
.d1-intro-head h2{max-width:26ch}
.d1-intro-head h2 em{display:inline}
.d1-intro-in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,6vw,86px); align-items:start}
.d1-intro-copy p{max-width:56ch}
.d1-pull{
  margin:30px 0 34px; padding:20px 0 20px 24px; border-left:2px solid var(--navy);
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(19px,1.7vw,24px); line-height:1.45; color:var(--ink);
}
.d1-intro-art{position:relative}
.d1-intro-art figure{margin:0; position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.d1-intro-art img{width:100%; aspect-ratio:4/3.1; object-fit:cover}
.d1-intro-art figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
  background:linear-gradient(transparent, rgba(0,0,0,.62));
  color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.d1-badge{
  position:absolute; left:-26px; top:26px; background:#fff; border-radius:var(--r);
  padding:14px 18px; box-shadow:var(--shadow); border:1px solid var(--line);
}
.d1-badge .rating{flex-wrap:wrap; gap:6px 10px; max-width:220px}

/* ---------------------------------------------------------------- stats band */
.d1-stats-band{padding:0 0 var(--sec)}
.d1-stats-band .stats{border-top:1px solid var(--line); padding-top:clamp(34px,4vw,54px)}

/* ---------------------------------------------------------------- services */
.d1-svc{background:var(--wash); padding-bottom:0}
.d1-svc-head{max-width:820px; margin:0 auto clamp(48px,5vw,80px); text-align:center}
.d1-svc-head h2{margin-bottom:22px}
.d1-svc-head .eyebrow{justify-content:center}

.d1-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.3vw,18px)}
.svc{
  position:relative; display:block; overflow:hidden; border-radius:var(--r);
  aspect-ratio:4/3.6; background:var(--ink); isolation:isolate;
}
.svc img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease); z-index:-2;
}
.svc-veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(transparent 36%, rgba(0,0,0,.74) 92%);
  transition:background .5s var(--ease);
}
.svc-body{
  position:absolute; inset:auto 0 0 0; display:block;
  padding:clamp(22px,2.2vw,30px); color:#fff;
}
.svc-n{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.22em;
  color:var(--sky-2); margin-bottom:10px; font-variant-numeric:lining-nums;
}
.svc-t{
  display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(24px,2vw,31px); line-height:1.1; letter-spacing:-.015em;
}
/* the copy is hidden until hover, then it slides up under the name */
.svc-p,.svc-go{
  display:block; opacity:0; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .5s var(--ease),
             max-height .5s var(--ease), margin-top .5s var(--ease);
  max-height:0; overflow:hidden;
}
.svc-p{
  font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.9);
  font-family:Inter,sans-serif;
}
.svc-go{
  font-family:Inter,sans-serif; font-size:11px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sky-2);
}
.svc-go svg{display:inline-block; vertical-align:-2px; margin-left:6px}
.svc:hover img,.svc:focus-visible img{transform:scale(1.06)}
.svc:hover .svc-veil,.svc:focus-visible .svc-veil{
  background:linear-gradient(rgba(0,0,0,.30) 0%, rgba(0,0,0,.80) 62%);
}
.svc:hover .svc-p,.svc:focus-visible .svc-p{opacity:1; transform:none; max-height:9em; margin-top:12px}
.svc:hover .svc-go,.svc:focus-visible .svc-go{opacity:1; transform:none; max-height:3em; margin-top:16px}
/* touch devices never hover, so the copy is simply always there */
@media (hover:none){
  .svc-veil{background:linear-gradient(transparent 18%, rgba(0,0,0,.78) 74%)}
  .svc-p{opacity:1; transform:none; max-height:9em; margin-top:12px}
  .svc-go{opacity:1; transform:none; max-height:3em; margin-top:14px}
  .svc{aspect-ratio:4/4.1}
}

/* ---------------------------------------------------------------- and the rest, on a rail */
.also{padding:clamp(50px,5.2vw,78px) 0 clamp(56px,5.6vw,90px); position:relative}
.also-head{margin-bottom:26px; position:relative; z-index:2}
.also-head span{
  display:inline-block; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(21px,2vw,27px); color:var(--navy);
}
.also-c{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  margin-right:12px; padding:14px 22px; border-radius:100px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  font-size:14px; white-space:nowrap; box-shadow:0 8px 22px -18px rgba(10,33,68,.5);
}
.also-c svg{color:var(--navy); flex:none}

/* ---------------------------------------------------------------- materials band */
.d1-mat{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(520px,58vw,700px); display:flex; align-items:center;
  padding:clamp(60px,6vw,100px) 0;
}
.d1-mat-bg{position:absolute; inset:0; z-index:-2; background:var(--ink)}
.d1-mat-shot{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s var(--ease)}
.d1-mat-shot.on{opacity:1}
.d1-mat-shot img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform 7s var(--ease);
}
.d1-mat-shot.on img{transform:scale(1)}
.d1-mat-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(92deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.56) 44%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.26) 100%),
    linear-gradient(0deg, rgba(0,0,0,.42), transparent 55%);
}
.d1-mat-in{position:relative; max-width:1180px}
.d1-mat-in h2{color:#fff; max-width:19ch; margin-bottom:34px}
.d1-mat-in h2 em{color:var(--sky-2); display:inline}
.d1-mat-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.d1-mat-tab{
  min-height:46px; padding:0 22px; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.30); color:#fff;
  font-family:Inter,sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; backdrop-filter:blur(6px);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.d1-mat-tab:hover{background:rgba(255,255,255,.18)}
.d1-mat-tab.on{background:#fff; color:var(--ink); border-color:#fff}
/* the line that changes with the material: the name in sky small caps, then the sentence in
   the serif italic, so it reads as the live part of the band (Amy, Sept 2026) */
.d1-mat-desc{position:relative; min-height:5.6em; max-width:56ch; padding-top:16px;
             border-top:1px solid rgba(255,255,255,.22); margin-top:22px}
.d1-mat-d{
  position:absolute; inset:16px 0 0 0; opacity:0; transform:translateY(8px);
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:400;
  color:#fff; font-size:clamp(21px,1.7vw,26px); line-height:1.35;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.d1-mat-d b{
  display:block; font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sky); margin-bottom:8px;
}
.d1-mat-d.on{opacity:1; transform:none}


/* ---------------------------------------------------------------- garden rooms */
.d1-gr-in{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(34px,6vw,90px); align-items:center}
.d1-gr-art{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.d1-gr-art img{width:100%; aspect-ratio:4/3; object-fit:cover}
.d1-gr-copy h2{margin-bottom:26px; max-width:14ch}
.d1-gr-list{margin:26px 0 32px; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px}
.d1-gr-list li{display:flex; align-items:center; gap:10px; font-size:14.5px}
.d1-gr-list svg{color:var(--navy); flex:none}

/* ---------------------------------------------------------------- process */
.d1-proc{background:var(--wash)}
.d1-proc .wrap{max-width:1440px}
.d1-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.step{background:var(--wash); padding:clamp(28px,2.6vw,40px); display:flex; flex-direction:column}
.step-n{
  display:block; font-family:"Cormorant Garamond",Georgia,serif; font-size:52px; line-height:1;
  color:var(--peri); margin-bottom:20px; font-variant-numeric:lining-nums;
}
.step h3{margin-bottom:12px; min-height:2.2em}
.step p{font-size:15px; line-height:1.68}

/* ---------------------------------------------------------------- work */
.d1-work-head{
  display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,4vw,60px);
  align-items:end; margin-bottom:clamp(38px,4vw,62px);
}
.d1-gal{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(190px,17vw,260px); gap:clamp(12px,1.4vw,20px);
}
.d1-gal figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--wash)}
.d1-gal img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.d1-gal figure:hover img{transform:scale(1.045)}
.d1-gal .g1{grid-column:span 2; grid-row:span 2}

/* ---------------------------------------------------------------- reviews */
.d1-rev{background:#fff; position:relative; overflow:hidden; padding:clamp(72px,7vw,120px) 0}
.d1-rev .wrap{position:relative; z-index:1}
.d1-rev-head{max-width:640px; margin:0 auto clamp(30px,3vw,44px); text-align:center}
.d1-rev-head h2{font-size:clamp(28px,3.3vw,46px); margin-bottom:20px}
.d1-rev-head h2 em{display:inline}
.d1-rev-head .eyebrow{justify-content:center}
.d1-rev-rate{display:flex; justify-content:center}
.d1-rev-rate .rating{
  padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:var(--wash);
}
/* one review at a time */
.rq{position:relative; max-width:860px; margin:0 auto; text-align:center; padding-top:34px}
.rq-mark{
  position:absolute; left:50%; top:-10px; transform:translateX(-50%);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:140px; line-height:1; color:var(--sky);
  opacity:.55; pointer-events:none;
}
.rq-stage{position:relative; min-height:11em}
.rq-item{
  position:absolute; inset:0; margin:0; opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.rq-item.on{opacity:1; transform:none; pointer-events:auto; position:relative}
.rq-item.out{opacity:0; transform:translateY(-10px)}
.rq-item blockquote{
  margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,2.3vw,32px); line-height:1.45; color:var(--ink); text-wrap:balance;
}
.rq-item figcaption{margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:4px}
.rq-item figcaption b{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--navy)}
.rq-item figcaption span{font-size:13px; color:var(--peri-text)}
.rq-ctrl{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px}
.rq-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.rq-arrow[data-rq="prev"] svg{transform:rotate(180deg)}
.rq-arrow:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.rq-dots{display:none}   /* thirty dots was a crowd; the arrows and the auto-advance are enough */
.rq-dot{width:6px; height:6px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease)}
.rq-dot.on{background:var(--navy); transform:scale(1.4)}
@media (max-width:640px){.rq-stage{min-height:15em} .rq-mark{font-size:100px} .rq-dots{display:none}}
@media (prefers-reduced-motion:reduce){.rq-item{transition:none}}
.d1-rev-card{
  max-width:840px; margin:0 auto; text-align:center;
  padding:clamp(30px,3.4vw,52px) clamp(24px,3vw,54px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
}
.d1-rev-card .quote-solo{max-width:none}
.d1-rev-card .quote-mark{margin:0 0 14px; font-size:56px; color:var(--sky); opacity:.5}
.d1-rev-card .quote-body{font-size:clamp(18px,1.75vw,25px); line-height:1.5}
.d1-rev-card .quote-meta{margin-top:22px; font-size:11px}
.d1-rev-card .quote-ctrl{margin-top:26px; justify-content:center}
.d1-accred{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:1040px; margin:clamp(34px,3.6vw,52px) auto 0;
  background:transparent; border-top:1px solid rgba(255,255,255,.14);
}
.d1-rev .d1-accred li{
  background:transparent; padding:22px clamp(12px,1.4vw,22px); text-align:center;
  border-left:1px solid rgba(255,255,255,.14); align-items:center; gap:5px;
}
.d1-rev .d1-accred li:first-child{border-left:0}
.d1-rev .d1-accred li b{color:var(--sky); font-size:11px; letter-spacing:.15em}
.d1-rev .d1-accred li span{color:rgba(255,255,255,.6); font-size:12.5px; line-height:1.45}

/* ---------------------------------------------------------------- areas */
.d1-areas-head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,60px);
  align-items:end; margin-bottom:clamp(30px,3.4vw,48px);
}
.d1-areas-head h2{max-width:17ch}
.area-c{
  display:inline-flex; align-items:baseline; gap:11px; flex:none;
  margin-right:12px; padding:18px 26px; border-radius:var(--r);
  background:#fff; border:1px solid var(--line); white-space:nowrap;
  box-shadow:0 12px 30px -24px rgba(10,33,68,.6);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.area-c:hover{border-color:var(--navy); transform:translateY(-2px)}
.area-c b{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(20px,1.6vw,24px); color:var(--ink); letter-spacing:-.01em;
}
.area-c i{
  font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  color:var(--peri-text); font-variant-numeric:lining-nums;
}

/* ---------------------------------------------------------------- contact */
/* ---- get a quote (Amy, Sept 2026: "the image is far too large... modernise... make it a bit
   extra special"). A lighter navy band, the copy and the direct line on the left with one
   small photograph, and the form on a white card that lifts in on the right. */
.d1-contact{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:#0F3468;
  padding:clamp(72px,7vw,120px) 0;
}
/* a photograph behind the whole section under a neutral shade (never a blue film), heavier
   on the left where the copy sits */
.d1-contact-bg{position:absolute; inset:0; z-index:-2}
.d1-contact-bg img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04)}
.d1-contact::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(92deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 48%, rgba(0,0,0,.38) 100%),
             linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%);
}
.d1-contact-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,90px); align-items:start}
.d1-contact-copy .eyebrow{color:var(--sky)}
.d1-contact-copy h2{color:#fff; margin-bottom:22px; max-width:15ch}
.d1-contact-copy h2 em{color:var(--sky)}
.d1-contact .d1-contact-copy .lead{color:rgba(255,255,255,.82); margin-bottom:16px; max-width:52ch}
.d1-contact-points{margin:28px 0 0; padding:0; list-style:none; max-width:520px}
.d1-contact-points li{
  display:flex; align-items:flex-start; gap:16px; padding:14px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.d1-contact-points li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.d1-contact-points i{
  flex:none; width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:var(--sky); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.d1-contact-points span{display:block; font-size:14px; line-height:1.5; color:rgba(255,255,255,.78)}
.d1-contact-points b{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:20px; line-height:1.2; color:#fff; margin-bottom:2px}
.d1-contact-direct{display:flex; flex-direction:column; gap:10px; margin-top:30px}
.d1-contact-phone{
  display:inline-flex; align-items:center; gap:12px; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(30px,2.6vw,40px); line-height:1; color:#fff; font-variant-numeric:lining-nums;
}
.d1-contact-phone svg{color:var(--sky); width:22px; height:22px}
.d1-contact-phone:hover{color:var(--sky)}
.d1-contact-mail{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; color:rgba(255,255,255,.82)}
.d1-contact-mail svg{color:var(--sky)} .d1-contact-mail:hover{color:#fff}
/* the form: a pane of dark glass on the photograph rather than a white card (Amy, Sept 2026),
   fields drawn as a single hairline that brightens on focus, a white button */
.d1-contact-card{
  position:relative; color:#fff; border-radius:var(--r); padding:clamp(28px,2.8vw,44px);
  background:linear-gradient(160deg, rgba(10,33,68,.58), rgba(10,33,68,.40));
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 40px 80px -36px rgba(0,0,0,.7);
}
.d1-contact .d1-contact-card-h{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(26px,2.2vw,32px); line-height:1.1; color:#fff; margin:0 0 8px}
.d1-contact .d1-contact-card-p{font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.76); margin:0 0 26px}
.d1-contact-card .field{margin-bottom:22px}
.d1-contact-card .field span{color:var(--sky); letter-spacing:.2em; margin-bottom:4px}
.d1-contact-card .field input,.d1-contact-card .field textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.32); border-radius:0;
  padding:10px 0 12px; color:#fff; font-size:16px; box-shadow:none;
}
.d1-contact-card .field textarea{min-height:96px}
.d1-contact-card .field input:focus,.d1-contact-card .field textarea:focus{border-bottom-color:#fff; box-shadow:0 1px 0 #fff}
.d1-contact-card .field input:-webkit-autofill{-webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px rgba(10,33,68,.9) inset}
.d1-contact-card .btn-primary{background:#fff; color:var(--ink); border-color:#fff; margin-top:4px}
.d1-contact-card .btn-primary:hover{background:var(--sky); border-color:var(--sky); color:var(--ink)}
.d1-contact-card .form-note{color:rgba(255,255,255,.66)}
.d1-contact-card .form-ok{color:#fff}
@media (max-width:900px){.d1-contact-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .d1-grid{grid-template-columns:repeat(2,1fr)}
  .d1-steps{grid-template-columns:repeat(2,1fr)}
  .d1-accred{grid-template-columns:1fr 1fr}
  .d1-rev .d1-accred li:nth-child(3){border-left:0}
  .d1-rev .d1-accred li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:900px){
  .d1-intro-in,.d1-gr-in,.d1-areas-head,.d1-work-head,.d1-contact{grid-template-columns:1fr}
  .d1-gr-art{order:-1}
  .d1-badge{left:auto; right:16px; top:16px}
  .d1-gal{grid-template-columns:repeat(2,1fr)}
  .d1-gal .g1{grid-column:span 2; grid-row:span 1}
}
@media (max-width:640px){
  :root{--hdr:98px; --topbar-h:0px}
  .lockup img{height:68px}
  .hdr.solid .lockup img{height:60px}
  .lockup .wm b{font-size:15.5px}
  .lockup .wm span{font-size:10.5px; letter-spacing:.26em}
  .d1-grid{grid-template-columns:1fr}
  .d1-steps{grid-template-columns:1fr}
  .step h3{min-height:0}
  .d1-gr-list{grid-template-columns:1fr}
  .d1-gal{grid-template-columns:1fr; grid-auto-rows:230px}
  .d1-gal .g1{grid-column:span 1; grid-row:span 1}
  .d1-accred{grid-template-columns:1fr}
  .d1-rev .d1-accred li{border-left:0; border-top:1px solid rgba(255,255,255,.14)}
  .d1-hero{min-height:auto; padding:calc(var(--topbar-h) + var(--hdr) + 66px) 0 92px}
  .d1-facts{border-top:0; gap:8px; padding-top:14px}
  .d1-facts li{border-left:0; padding:0 8px; font-size:10.5px}
  .d1-badge{position:static; margin-top:16px; box-shadow:none}
  .d1-badge .rating{max-width:none}
  .d1-mat-desc{min-height:7.5em}
  /* the four material tabs as an even 2x2 on a phone (Amy, Sept 2026: "Porcelain, block
     paving, Indian sandstone and granite and stone are not laid out nicely") */
  .d1-mat-tabs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .d1-mat-tab{padding:0 8px; font-size:11px; letter-spacing:.07em; white-space:nowrap; min-height:44px}
}
@media (max-width:360px){
  .d1-mat-tab{font-size:10.5px; letter-spacing:.05em}
}


/* ---------------------------------------------------------------- motion: settle
   Demo 1's language. Nothing slides; blocks ease up and headings come out of a soft
   focus as they arrive. Calm, editorial, and quite unlike the other three.

   Letter spacing is deliberately NOT animated. Closing it re-lays-out the text, so a
   heading can start on three lines and finish on two while it is still fading in: the
   Where We Work heading did exactly that at every width (211px tall to 140px), and a
   whole line vanishing mid-transition reads as a glitch rather than a flourish. Opacity,
   transform and filter are all compositor properties, so nothing here can re-wrap. */
.js [data-reveal]{opacity:0; transform:translateY(12px)}
.js [data-reveal].in{opacity:1; transform:none; transition:opacity .95s var(--ease), transform 1.05s var(--ease)}
.js [data-reveal="scale"]{opacity:0; transform:scale(.97)}
.js [data-reveal="scale"].in{opacity:1; transform:none}
.js [data-split]{opacity:0; transform:translateY(16px); filter:blur(6px)}
.js [data-split].in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity 1s var(--ease), transform 1.15s var(--ease), filter 1.15s var(--ease);
}
/* the failsafe and reduced motion both clear the blur as well as the transform */
.js.no-reveal [data-split]{filter:none !important}
@media (prefers-reduced-motion:reduce){
  .js [data-split]{filter:none !important; transition:none}
}
.js .svc{opacity:0; transform:scale(.97)}
.js .svc.in{opacity:1; transform:none; transition:opacity .9s var(--ease), transform 1s var(--ease)}

/* reviews sit on the dark ground here */
.d1-rev .rev-c{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16)}
.d1-rev .rev-c blockquote{color:rgba(255,255,255,.92)}
.d1-rev .rev-c figcaption{border-top-color:rgba(255,255,255,.16)}
.d1-rev .rev-c figcaption b{color:var(--sky)}
.d1-rev .rev-c figcaption span{color:rgba(255,255,255,.6)}
.d1-rev .rev-rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.d1-rev .rev-wrap{margin-top:clamp(30px,3.4vw,46px)}


/* Four facts across one hairline row. Left to wrap they broke 3 + 1 at tablet widths, which
   stranded "Fully insured" on its own line still carrying the divider bar that should only
   ever sit between two items. Two by two below that, with the divider only in the middle. */
@media (max-width:900px){
  .d1-facts{display:grid; grid-template-columns:1fr 1fr; row-gap:10px; justify-items:center}
  .d1-facts li{border-left:0}
  .d1-facts li:nth-child(even){border-left:1px solid rgba(255,255,255,.28)}
}
@media (max-width:430px){
  .d1-facts{grid-template-columns:1fr}
  .d1-facts li:nth-child(even){border-left:0}
}


/* ---------------------------------------------------------------- what backs the work
   The same four names demo 3 carries, in demo 1's centred editorial setting: white panels
   on the pale ground, hairline gutters, Cormorant numerals. */
.d1-backs{
  background:linear-gradient(170deg, #0F2B57 0%, var(--ink) 55%, #071633 100%);
  color:#fff; position:relative; overflow:hidden;
}
.d1-backs .wrap{position:relative; z-index:1}
.d1-backs .d1-wm{background-image:url("/assets/img/brand/cp-mark-light.svg"); opacity:.06}
.d1-backs .eyebrow{color:var(--sky)}
.d1-backs h2,.d1-backs h2 em{color:#fff}
.d1-backs h2 em{color:var(--sky)}
/* a tighter band than the others (Amy: "a little bit tighter, a little bit smaller"), sitting
   between the garden rooms and the process on the homepage; the sections either side keep
   their own top padding, so this one carries less of its own */
.d1-backs{padding:clamp(52px,5.5vw,84px) 0 clamp(44px,4.6vw,72px)}
.d1-backs .d1-svc-head{margin-bottom:clamp(26px,3vw,44px)}
.d1-backs .d1-svc-head h2{font-size:clamp(30px,3.4vw,50px); margin-bottom:0}
.d1-backs + .sec{padding-top:clamp(56px,6.5vw,104px)}
.d1-backs-note{
  margin:clamp(20px,2.4vw,32px) auto 0; text-align:center; font-size:14.5px; color:rgba(255,255,255,.72);
  max-width:62ch;
}

/* ---- the four plaques (Amy, Sept 2026: "a bit more cool... interactive... not on a white
   background... a bit more 3D"). Glass tiles on the navy band with the scheme's logo in white.
   The pointer tilts a tile and a light moves across it; a press flips it to what the
   accreditation means. Phones get the flip on tap and no tilt. */
.d1-backs-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px);
  margin-top:0; perspective:1200px;
}
.plq-wrap{perspective:1000px}
.plq{
  display:block; width:100%; min-height:100%; padding:0; border:0; background:none; color:inherit;
  font:inherit; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .6s var(--ease);
}
.plq.tilting{transition:transform .12s linear}
.plq-front{width:100%; font:inherit; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; text-align:center}
.plq-front:focus-visible{outline:2px solid var(--sky); outline-offset:6px}
.plq-in{
  position:relative; display:block; min-height:clamp(196px,14.5vw,228px);
  transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.plq.flip .plq-in{transform:rotateY(180deg)}
.plq-face{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:clamp(18px,1.9vw,28px) clamp(16px,1.6vw,24px);
  border-radius:var(--r); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035) 60%, rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25),
             0 30px 60px -32px rgba(0,0,0,.75);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.plq:hover .plq-face,.plq:focus-visible .plq-face{
  border-color:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.25),
             0 44px 70px -30px rgba(0,0,0,.85);
}
.plq-back{transform:rotateY(180deg)}
/* Amy (Sept 2026): "when you hover, can their colour come to life?" The front lights up to
   white and the logo returns to its own colours; the back is always the lit version, so a
   phone, which has no hover, sees the colour when it flips the plaque. */
.plq-front{transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)}
.plq:hover .plq-front,.plq:focus-visible .plq-front,.plq-back{
  background:linear-gradient(160deg, #fff, #F4F7FC 70%, #EEF3FA);
  border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff, 0 44px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.15);
}
.plq:hover .plq-front b,.plq:focus-visible .plq-front b,.plq-back b{color:var(--ink)}
.plq:hover .plq-front small,.plq:focus-visible .plq-front small{color:var(--body)}
.plq:hover .plq-hint,.plq:focus-visible .plq-hint{color:var(--navy); opacity:1}
.plq:hover .plq-logo img,.plq:focus-visible .plq-logo img,.plq-back .plq-logo img{
  filter:brightness(1) invert(0) drop-shadow(0 1px 0 rgba(0,0,0,0)) drop-shadow(0 8px 14px rgba(10,33,68,.18));
}
.plq-back p{color:var(--body)}
.plq-back .plq-logo{height:34px; margin-bottom:2px}
.plq-logo{display:flex; align-items:center; justify-content:center; height:40px; max-width:190px; margin:0 auto 6px;
          transform:translateZ(28px)}
.plq-logo img{
  width:auto; max-width:100%; display:block;
  filter:brightness(0) invert(1) drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.45));
  transition:filter .45s var(--ease);
}
.plq-front b,.plq-back b{
  display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:400; font-size:clamp(19px,1.45vw,22px);
  line-height:1.15; color:#fff; transform:translateZ(18px);
}
.plq-front small{display:block; font-size:13px; line-height:1.5; color:rgba(255,255,255,.72); max-width:26ch; transform:translateZ(12px)}
.plq-hint{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-style:normal;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sky);
  opacity:.75; transition:opacity .3s var(--ease); transform:translateZ(12px);
}
.plq:hover .plq-hint{opacity:1}
.plq-back p{margin:0; font-size:13.5px; line-height:1.55; color:var(--body); max-width:30ch}
.plq-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:4px; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--navy); padding-bottom:3px;
}
.plq-link:hover{color:var(--ink); border-color:var(--ink)}
/* the light: a soft spot that follows the pointer across the face, with a faint gloss sweep */
.plq-light{
  position:absolute; inset:0; border-radius:var(--r); pointer-events:none; overflow:hidden;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,40%), rgba(157,176,222,.28), rgba(157,176,222,0) 60%);
  opacity:0; transition:opacity .4s var(--ease); transform:translateZ(1px);
}
.plq:hover .plq-light,.plq.tilting .plq-light{opacity:1}
.plq.flip .plq-light{opacity:0}
.plq-light::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-60%; width:45%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); opacity:0;
}
.plq-wrap.in .plq-light::after{animation:plqSheen 1.6s var(--ease) .35s 1 both}
@keyframes plqSheen{0%{left:-60%; opacity:0} 15%{opacity:1} 100%{left:130%; opacity:0}}
@media (hover:none){.plq{transform:none}}
@media (prefers-reduced-motion:reduce){
  .plq,.plq-in{transition:none} .plq{transform:none} .plq-wrap.in .plq-light::after{animation:none}
}
@media (max-width:900px){.d1-backs-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.d1-backs-grid{grid-template-columns:1fr} .plq-in{min-height:200px}}

/* ---------------------------------------------------------------- logo watermarks
   The mark set very large and very faint behind a few sections, purely as texture. Decorative
   only, so it is aria-hidden in the markup and never sits over anything you have to read. */
/* Amy (Sept 2026): "make sure no watermarks are cut off, laptop or mobile; we want to see
   them quite clearly". So the mark sits wholly inside its section (max-height keeps the
   circle whole on a short section, the aspect ratio carries it) and a shade stronger. */
.d1-wm{
  position:absolute; pointer-events:none; z-index:0; opacity:.075;
  background:url("/assets/img/brand/cp-mark.svg") no-repeat center / contain;
  aspect-ratio:1; max-height:84%;
}
.d1-wm-a{width:min(40vw,520px); right:3vw; top:8%}
.d1-wm-b{width:min(34vw,440px); left:3vw; bottom:8%}
.d1-wm-c{width:min(38vw,480px); right:3vw; bottom:8%; opacity:.065}
.d1-wm-light{opacity:.085}
@media (max-width:760px){
  .d1-wm{opacity:.07; max-height:60%}
  .d1-wm-a{width:min(58vw,300px); right:4vw; top:4%}
  .d1-wm-b{width:min(52vw,280px); left:4vw; bottom:4%}
  .d1-wm-c{width:min(56vw,300px); right:4vw; bottom:4%}
}
@media (prefers-reduced-motion:no-preference){.d1-wm{will-change:auto}}

/* the sections carrying a watermark have to clip it and keep their content above it */
.d1-intro,.d1-areas{position:relative; overflow:hidden}
.d1-intro > .wrap,.d1-areas > .wrap,.d1-areas > .area-rail{position:relative; z-index:1}

/* ==================================================================== inner pages
   Everything below is for the pages beyond the homepage. The homepage components are
   demo 1's, untouched; these are built in the same key: Cormorant display, navy and
   periwinkle, hairline rules, white panels on the pale ground. */

.skip{
  position:absolute; left:-9999px; top:0; z-index:200; padding:14px 22px;
  background:var(--navy); color:#fff; font-size:13px; font-weight:600;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- page banners */
.pb{
  position:relative; isolation:isolate; display:flex; align-items:flex-end;
  min-height:clamp(420px,58vh,620px);
  padding:calc(var(--topbar-h) + var(--hdr) + 60px) 0 clamp(52px,6vw,84px);
}
.pb{overflow:hidden}                     /* the zoomed photograph must not leak past the banner */
.pb-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
/* Amy (Sept 2026): "a heavier zoom effect" on every inner banner. The photograph opens close
   in and pulls back, then breathes between the two, so the page always arrives moving. */
.pb-img{transform-origin:50% 60%; will-change:transform;
        animation:pbZoom 16s cubic-bezier(.3,.05,.2,1) infinite alternate}
@keyframes pbZoom{from{transform:scale(1.24)} to{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.pb-img{animation:none}}
.pb .hero-scrim{z-index:-1}
.pb-in{position:relative; max-width:940px}
.pb h1{
  font-size:clamp(40px,5.6vw,80px); font-weight:300; line-height:1.03; color:#fff;
  margin-bottom:22px; text-shadow:0 3px 30px rgba(0,0,0,.55);
}
.pb h1 em{display:block; font-style:italic; color:#fff}
.pb .kicker{color:rgba(255,255,255,.92); text-shadow:0 2px 16px rgba(0,0,0,.7)}
.pb .lead{color:#fff; max-width:64ch; text-shadow:0 2px 18px rgba(0,0,0,.62)}
.pb .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* type led banner for the twenty town pages, with the place name ghosted behind it */
.pb-ink{background:var(--ink); overflow:hidden; min-height:clamp(360px,46vh,520px)}
.pb-ink .pb-in{z-index:1}
.pb-ghost{
  position:absolute; right:3vw; bottom:14px; z-index:0; pointer-events:none;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  /* sized so the whole word fits the screen: the face runs about 0.45em per letter, so
     200vw divided by the letter count (set inline) keeps "East Grinstead" on a phone */
  font-size:min(26vw, calc(190vw / var(--gl, 8)), 380px); line-height:1; letter-spacing:-.03em;
  color:rgba(157,176,222,.10); white-space:nowrap;
}
.pb-ink h1,.pb-ink h1 em,.pb-ink .lead,.pb-ink .kicker{text-shadow:none}

/* ---- banner accent lines: the few words in blue, the rest white (see the note by emShine).
   The flat blue runs 0-40% and 60-100% of the gradient and the window is 100/260 of it, so
   at rest (0%) and at the start of the sweep (100%) the line is plain blue; the white band
   only shows while the light passes. */
.d1-hero h1 em,.pb h1 em{
  color:transparent; text-shadow:none;
  background:linear-gradient(100deg, #74B3FF 0%, #74B3FF 40%, #EAF3FF 50%, #74B3FF 60%, #74B3FF 100%);
  background-size:260% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 6px 30px rgba(0,0,0,.5));
}
.pb-ink h1 em{filter:none}
.d1-hero h1 em{background-position:100% 0; animation:emShine 6.5s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@media (prefers-reduced-motion:reduce){
  .d1-hero h1 em,.pb h1 em{animation:none; color:#74B3FF; background:none; -webkit-text-fill-color:currentColor; filter:none;
                           text-shadow:0 2px 6px rgba(0,0,0,.4), 0 6px 34px rgba(0,0,0,.55)}
  .pb-ink h1 em{text-shadow:none}
}

/* ---------------------------------------------------------------- intro + splits */
.ip-intro{columns:2; column-gap:clamp(30px,4vw,64px); max-width:none}
.ip-intro p{break-inside:avoid; margin-bottom:16px; max-width:56ch}
.ip-intro p:last-child{margin-bottom:0}
@media (max-width:900px){.ip-intro{columns:1}}

.ip-splits .wrap{display:flex; flex-direction:column; gap:clamp(48px,7vw,104px)}
.sp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center}
.sp.flip .sp-art{order:2}
.sp-art figure{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.sp-art img{width:100%; aspect-ratio:4/3.05; object-fit:cover; display:block}
.sp-copy p{max-width:56ch; margin-bottom:14px}
.sp-copy p:last-child{margin-bottom:0}
.sp-copy h2{margin-bottom:18px}
ul.tick{display:grid; gap:9px; margin-top:22px}
ul.tick li{display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.55}
ul.tick svg{color:var(--navy); flex:none; margin-top:4px}
@media (max-width:900px){
  .sp{grid-template-columns:1fr}
  .sp.flip .sp-art{order:0}
}

/* ---------------------------------------------------------------- option cards */
.ip-opts{background:var(--wash)}
.opt-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:clamp(28px,3.2vw,46px);
}
.opt{background:#fff; padding:clamp(24px,2.4vw,36px)}
.opt-n{
  display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  font-size:38px; line-height:1; color:var(--peri); margin-bottom:14px;
  font-variant-numeric:lining-nums;
}
.opt h3{font-size:clamp(18px,1.45vw,22px); margin-bottom:9px}
.opt p{font-size:14.5px; line-height:1.62}
@media (max-width:1000px){.opt-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.opt-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- gallery grid */
.g-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(28px,3.2vw,46px);
}
.g-tile{margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--wash)}
.g-tile img{width:100%; aspect-ratio:4/3.1; object-fit:cover; display:block;
            transition:transform .9s var(--ease)}
.g-tile:hover img{transform:scale(1.05)}
.g-tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 18px 15px;
  background:linear-gradient(transparent, rgba(0,0,0,.66));
  color:#fff; font-size:12px; line-height:1.45; opacity:0; transition:opacity .4s var(--ease);
}
.g-tile:hover figcaption{opacity:1}

/* ---------------------------------------------------------------- faq accordion */
.d1-faq{background:var(--wash)}
.faq-list{max-width:900px; margin:clamp(26px,3vw,42px) auto 0; border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line); background:transparent}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer; list-style:none;
  font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(19px,1.6vw,25px);
  font-weight:400; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{color:var(--peri); flex:none; transition:transform .35s var(--ease)}
.faq[open] summary svg{transform:rotate(180deg)}
.faq-a{padding:0 4px 24px}
.faq-a p{max-width:78ch; font-size:15.5px}

/* ---------------------------------------------------------------- related cards */
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px);
          margin-top:clamp(18px,2vw,26px)}
.rel-c{
  display:flex; flex-direction:column; gap:7px; padding:clamp(22px,2.2vw,30px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.rel-c:hover{border-color:var(--navy); transform:translateY(-2px)}
.rel-c b{font-family:"Cormorant Garamond",Georgia,serif; font-weight:400; font-size:21px; color:var(--ink)}
.rel-c span{font-size:14px; line-height:1.55; color:var(--body)}
.rel-c svg{color:var(--navy); margin-top:6px}
@media (max-width:900px){.rel-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- towns + areas */
.town-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px);
           margin-top:clamp(28px,3.2vw,44px)}
.town-c{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:clamp(22px,2.2vw,30px); background:#fff; border:1px solid var(--line);
  border-radius:var(--r); transition:border-color .3s var(--ease), transform .3s var(--ease),
  box-shadow .3s var(--ease);
}
.town-c:hover{border-color:var(--navy); transform:translateY(-3px); box-shadow:var(--shadow)}
.town-pc{font-size:10.5px; font-weight:600; letter-spacing:.18em; color:var(--peri-text)}
.town-c b{font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
          font-size:clamp(23px,1.9vw,28px); line-height:1.1; color:var(--ink)}
.town-l{font-size:13.5px; line-height:1.55; color:var(--body)}
.town-nb{font-size:12px; color:var(--peri-text); margin-top:2px}
.town-c svg{color:var(--navy); margin-top:auto; padding-top:12px}
@media (max-width:1000px){.town-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.town-grid{grid-template-columns:1fr}}

.area-wall,.nb-wall{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px;
  margin-top:clamp(24px,2.8vw,38px);
}
.area-wall .area-c,.nb{
  display:inline-flex; align-items:baseline; gap:10px; flex:none; margin:0;
  padding:14px 22px; border-radius:var(--r); background:#fff; border:1px solid var(--line);
  white-space:nowrap; transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.area-wall .area-c:hover{border-color:var(--navy); transform:translateY(-2px)}
.nb b,.area-wall .area-c b{font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
                           font-size:19px; color:var(--ink)}
.nb i,.area-wall .area-c i{font-style:normal; font-size:10.5px; font-weight:600;
                           letter-spacing:.14em; color:var(--peri-text)}
.ip-nb{background:var(--wash)}
/* a long village name must wrap on a phone rather than push the page sideways (Purley's
   "Box Ridge Avenue, Purley Rise and Hill Road" was 421px wide on a 390px screen) */
@media (max-width:640px){
  .area-wall .area-c,.nb{white-space:normal; max-width:100%; flex-wrap:wrap; justify-content:center; text-align:center; padding:12px 16px}
}

/* ---------------------------------------------------------------- reviews page */
.rv-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(28px,3.2vw,46px); align-items:stretch;
}
.rv-c{
  display:flex; flex-direction:column; margin:0;
  padding:clamp(24px,2.4vw,34px); background:#fff; border:1px solid var(--line);
  border-radius:var(--r);
}
.rv-c blockquote{
  margin:0 0 18px; flex:1; font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(17px,1.35vw,20px); line-height:1.5; color:var(--ink);
}
.rv-c blockquote::before{content:"\201C"}
.rv-c blockquote::after{content:"\201D"}
.rv-c figcaption{display:flex; flex-direction:column; gap:4px; padding-top:16px;
                 border-top:1px solid var(--line)}
.rv-c figcaption b{font-size:11px; font-weight:600; letter-spacing:.15em;
                   text-transform:uppercase; color:var(--navy)}
.rv-c figcaption span{font-size:12.5px; color:var(--peri-text)}
@media (max-width:1000px){.rv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rv-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- contact + legal */
.ip-contact-in{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,5vw,80px);
               align-items:start}
.ip-cd{margin-top:24px}
.ip-cd a{font-size:16px}
.ip-hours{margin-top:12px}
.ip-note{margin-top:26px; font-size:13.5px; color:#5A6B94; max-width:44ch}
@media (max-width:900px){.ip-contact-in{grid-template-columns:1fr}}

.ip-legal-in{max-width:76ch}
.ip-legal-in h2{font-size:clamp(24px,2.2vw,32px); margin:34px 0 12px}
.ip-legal-in h2:first-child{margin-top:0}
.ip-legal-in p{margin-bottom:14px}

/* ---------------------------------------------------------------- inner page cta */
.d1-contact-band{background:var(--ink); color:rgba(255,255,255,.78); position:relative;
                 overflow:hidden}
.d1-contact-band .wrap{position:relative; z-index:1}
.d1-cta-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,84px);
           align-items:start}
.d1-contact-band h2,.d1-contact-band h2 em{color:#fff}
.d1-contact-band h2 em{color:var(--sky)}
.d1-contact-band .eyebrow{color:var(--sky)}
.d1-contact-band .lead{color:rgba(255,255,255,.8); max-width:52ch}
.d1-cta-list{display:grid; gap:11px; margin-top:28px}
.d1-cta-list li{display:flex; align-items:flex-start; gap:11px; font-size:15px;
                color:rgba(255,255,255,.86)}
.d1-cta-list svg{color:var(--sky); flex:none; margin-top:3px}
.d1-contact-band .field span{color:rgba(255,255,255,.7)}
.d1-contact-band .field input,.d1-contact-band .field textarea{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff;
}
.d1-contact-band .form-note{color:rgba(255,255,255,.6)}
@media (max-width:900px){.d1-cta-in{grid-template-columns:1fr}}

/* ==================================================================== nav dropdown
   Ten service pages will not sit across a header, so Services opens a panel. */
.nav-drop{position:relative; display:flex; align-items:center}
.nav-dropt{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0;
  cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.86); transition:color .3s var(--ease);
}
.nav-drop:hover .nav-dropt{color:#fff}
.hdr.solid .nav-dropt{color:var(--ink)}
@media (max-width:1560px){.nav-dropt{font-size:11.5px; letter-spacing:.12em}}
@media (max-width:1400px){.nav-dropt{font-size:11px; letter-spacing:.1em}}
.nav-dropt svg{transition:transform .3s var(--ease)}
.nav-drop:hover .nav-dropt svg,.nav-drop.open .nav-dropt svg{transform:rotate(180deg)}
.nav-dropt[aria-current="true"]{color:var(--sky)}
.hdr.solid .nav-dropt[aria-current="true"]{color:var(--navy)}
.nav-menu{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:250px; padding:10px; border-radius:var(--r); background:#fff;
  border:1px solid var(--line); box-shadow:0 26px 60px -26px rgba(10,33,68,.5);
  display:grid; gap:1px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), transform .3s var(--ease), visibility .26s;
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu,.nav-drop.open .nav-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%);
}
/* a hit area between the button and the panel so the pointer can travel to it */
.nav-drop::after{content:""; position:absolute; top:100%; left:0; right:0; height:20px}
.nav-menu a{
  display:block; padding:11px 16px; border-radius:var(--r-sm); color:var(--ink);
  font-family:Inter,sans-serif; font-size:13px; font-weight:500; letter-spacing:.02em;
  text-transform:none; transition:background .22s var(--ease), color .22s var(--ease);
}
.nav-menu a::after{display:none}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{background:var(--wash); color:var(--navy)}

/* in the drawer it becomes an accordion, and works with no javascript at all */
.nav-acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  list-style:none; cursor:pointer; padding:11px 0;
  font-size:clamp(24px,5vw,34px); font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300; color:#fff;
}
.nav-acc summary::-webkit-details-marker{display:none}
/* Amy (Sept 2026): every top-level item in the drawer in the same serif as "Services";
   the service links underneath stay in the plain face. */
.drawer nav > a{font-family:"Cormorant Garamond",Georgia,serif; font-weight:300; font-size:clamp(24px,5vw,34px); letter-spacing:0}
.nav-acc{border-bottom:1px solid rgba(255,255,255,.12)}
.nav-acc-in a{font-family:Inter,sans-serif; font-weight:500}
.nav-acc summary svg{color:var(--sky); transition:transform .3s var(--ease)}
.nav-acc[open] summary svg{transform:rotate(180deg)}
.nav-acc-in{display:grid; gap:2px; padding:4px 0 14px 16px; border-left:1px solid rgba(255,255,255,.2)}
.nav-acc-in a{font-size:14px !important; letter-spacing:.03em; opacity:.85; padding:7px 0}

/* ==================================================================== footer contact
   Both numbers on one line, then the email, then the address. */
.ftr-contact{display:flex; flex-direction:column; gap:11px; align-items:flex-start; margin-top:4px}
.ftr-contact a{display:inline-flex; align-items:center; gap:9px; line-height:1.45}
.ftr-contact svg{flex:none; color:var(--sky)}
.ftr-phones{display:flex; flex-wrap:wrap; gap:6px clamp(14px,2vw,26px)}
.ftr-phones a{font-weight:600; color:rgba(255,255,255,.92)}
.ftr-addr{align-items:flex-start}
.ftr-addr svg{margin-top:3px}
.ftr-addr span{max-width:30ch}
.ip-cd{gap:14px}
.ip-cd a{font-size:16px}
.ip-cd svg{color:var(--navy)}
.ip-cd .ftr-phones a{color:var(--ink)}

/* ==================================================================== service pages
   Extra life on the inner pages: a rule that draws itself across a card as it arrives,
   a hairline that sweeps a section, images that drift, and cards that lift. */
/* Columns come from a variable so the responsive steps below cannot be undone by a rule
   written later in the file: a media query adds no specificity of its own. */
.opt-grid{grid-template-columns:repeat(var(--cols,4),1fr)}
.opt-grid.cols-2{--cols:2}
.opt-grid.cols-3{--cols:3}
.opt-grid.cols-4{--cols:4}
@media (max-width:1000px){.opt-grid,.opt-grid.cols-3,.opt-grid.cols-4{--cols:2}}
@media (max-width:620px){.opt-grid,.opt-grid.cols-2,.opt-grid.cols-3,.opt-grid.cols-4{--cols:1}}
.opt{position:relative; overflow:hidden; transition:background .4s var(--ease)}
.opt::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--navy), var(--peri));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
.opt.in::before{transform:scaleX(1)}
.opt:hover{background:var(--wash)}
.opt:hover .opt-n{color:var(--navy)}
.opt-n{transition:color .35s var(--ease)}

.sp-art figure{position:relative; overflow:hidden}
.sp-art figure{transition:box-shadow .5s var(--ease), transform .6s var(--ease)}
.sp:hover .sp-art figure{transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(10,33,68,.55)}
/* The drift moves the photograph inside its frame, so it has to be taller than the frame or
   the travel exposes a strip of background at the top or the bottom. */
/* A percentage MARGIN resolves against the containing block's width, not its height, so on a
   landscape frame -10% was a far bigger nudge than intended and still left a strip showing at
   the bottom. Absolute offsets resolve against height, which is what this needs. */
.sp-art figure{position:relative; aspect-ratio:4/3.05; overflow:hidden}
.sp-art img.px{
  position:absolute; left:0; top:-6%; width:100%; height:112%;
  object-fit:cover; will-change:transform;
}
/* a slow bar that fills as the row arrives, tying the image and the copy together */
.sp-copy .eyebrow::before{transform-origin:0 50%}
ul.tick li{transition:transform .35s var(--ease)}
ul.tick li:hover{transform:translateX(3px)}

.g-tile{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.g-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow)}

.rel-c{position:relative; overflow:hidden}
.rel-c::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--navy); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.rel-c:hover::after{transform:scaleX(1)}

.area-wall .area-c{position:relative}
.faq summary{transition:color .3s var(--ease)}
.faq:hover summary{color:var(--navy)}

/* Every section that carries a watermark has to clip it. Left unclipped it paints past the
   right edge of the screen and widens the document. */
.d1-backs,.d1-intro,.d1-areas,.d1-contact-band,.ip-contact,.ip-reviews,.ip-legal,
section:has(> .d1-wm){position:relative; overflow:hidden}

.town-pc,.town-nb,.rv-c figcaption span,.area-c i,.nb i{color:var(--peri-text)}

/* ==================================================================== service page families
   Four families, each with its own intro shape, gallery shape and photograph strip, so ten
   pages off one renderer do not read as one page ten times. */

/* shared module header */
.mod .mod-head{max-width:760px; margin-bottom:clamp(30px,3.6vw,52px)}
.mod .mod-head h2{margin:12px 0 16px}
.mod .lead{max-width:60ch}

/* ---- drive family: intro with a spec rail beside it */
.intro-rail{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,80px); align-items:start}
.ip-intro.one{columns:1}
.spec-rail{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px}
.spec-rail li{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
              padding:18px 22px; background:#fff}
.spec-rail b{font-family:"Cormorant Garamond",Georgia,serif; font-weight:300; font-size:clamp(34px,3vw,46px);
             line-height:1; color:var(--navy); font-variant-numeric:lining-nums; white-space:nowrap}
.spec-rail b small{font-size:.42em; font-family:Inter,sans-serif; font-weight:600; letter-spacing:.06em;
                   color:var(--peri-text); margin-left:4px}
.spec-rail span{font-size:14px; line-height:1.5; color:var(--body)}
.spec-note{margin:14px 0 0; font-size:13px; line-height:1.55; color:var(--peri-text); font-style:italic; max-width:44ch}
@media (max-width:900px){.intro-rail{grid-template-columns:1fr}}

/* ---- patio family: pull quote intro, two column questions */
.intro-pull{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:start}
.intro-pull .d1-pull{margin:6px 0 0; font-size:clamp(22px,2vw,29px)}
@media (max-width:900px){.intro-pull{grid-template-columns:1fr}}
.faq-cols{max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,60px); border-top:0}
.faq-cols .faq{border-top:1px solid var(--line)}
@media (max-width:900px){.faq-cols{grid-template-columns:1fr}}

/* ---- room family: numbered index beside the intro, feature gallery */
.intro-index{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,80px); align-items:start}
.index-list{display:grid; gap:0; margin-top:8px; border-top:1px solid var(--line)}
.index-list li{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:baseline;
               padding:15px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.5}
.index-list span{font-family:"Cormorant Garamond",Georgia,serif; font-size:26px; font-weight:300;
                 color:var(--peri-text); font-variant-numeric:lining-nums}
@media (max-width:900px){.intro-index{grid-template-columns:1fr}}
.ft-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px);
         margin-top:clamp(28px,3.2vw,46px)}
.ft-grid figure{margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--wash)}
.ft-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease)}
.ft-grid figure:hover img{transform:scale(1.05)}
.ft-grid figcaption{position:absolute; inset:auto 0 0 0; padding:34px 18px 15px;
  background:linear-gradient(transparent, rgba(0,0,0,.66)); color:#fff; font-size:12px;
  line-height:1.45; opacity:0; transition:opacity .4s var(--ease)}
.ft-grid figure:hover figcaption{opacity:1}
.ft-big{grid-column:span 2; aspect-ratio:4/2.8}
.ft-sm{aspect-ratio:1}

/* ---- photo strip, edge to edge */
.photo-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:clamp(20px,3vw,40px) 0 0}
.photo-strip figure{margin:0; overflow:hidden; aspect-ratio:4/3}
.photo-strip img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease)}
.photo-strip figure:hover img{transform:scale(1.06)}

/* ---- galleries: always a full, even row. CSS columns balance by HEIGHT, so three photographs
   came out two, one and none across three columns. Every gallery is a fixed aspect grid whose
   count is a multiple of its column count; below 900px it becomes a scroll-snap carousel, so
   there is no width at which a row can end short. */
.ms-grid,.g-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(28px,3.2vw,46px);
}
.ms-tile,.g-tile{margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--wash)}
.ms-tile img,.g-tile img{width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; display:block;
                         transition:transform .9s var(--ease)}
.ms-tile:hover img,.g-tile:hover img{transform:scale(1.05)}
.ms-tile figcaption,.g-tile figcaption{position:absolute; inset:auto 0 0 0; padding:34px 18px 15px;
  background:linear-gradient(transparent, rgba(0,0,0,.66)); color:#fff; font-size:12px;
  line-height:1.45; opacity:0; transition:opacity .4s var(--ease)}
.ms-tile:hover figcaption,.g-tile:hover figcaption{opacity:1}
@media (max-width:900px){
  .ms-grid,.g-grid,.ft-grid,.photo-strip{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:0 var(--gut) 8px;
  }
  /* the bleed only where there is a wrap to pull against: a strip placed at section level
     already spans the viewport, and the negative margins pushed it 33px past the edge */
  .wrap > .ms-grid,.wrap > .g-grid,.wrap > .ft-grid,.wrap > .photo-strip{
    margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut));
  }
  .ms-grid::-webkit-scrollbar,.g-grid::-webkit-scrollbar,.ft-grid::-webkit-scrollbar,.photo-strip::-webkit-scrollbar{display:none}
  .ms-grid > *,.g-grid > *,.ft-grid > *,.photo-strip > *{flex:0 0 78vw; scroll-snap-align:start; aspect-ratio:4/3}
  .ft-grid .ft-big,.ft-grid .ft-sm{aspect-ratio:4/3}
  .ms-tile figcaption,.g-tile figcaption,.ft-grid figcaption{opacity:1}
}

/* ==================================================================== the modules */

/* shared: a row of press buttons and a stack of descriptions that swap */
.xs-tabs,.pt-tabs,.fm-tabs,.bd-tabs{display:grid; gap:6px}
.xs-tab,.pt-tab,.fm-tab,.bd-tab,.pk-tab{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:14px 18px; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff;
  font-family:Inter,sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink);
  cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease),
  transform .25s var(--ease);
}
.xs-tab:hover,.pt-tab:hover,.fm-tab:hover,.bd-tab:hover,.pk-tab:hover{border-color:var(--navy); transform:translateX(3px)}
.xs-tab.on,.pt-tab.on,.fm-tab.on,.bd-tab.on,.pk-tab.on{background:var(--navy); border-color:var(--navy); color:#fff}
.xs-n,.pk-n{font-family:"Cormorant Garamond",Georgia,serif; font-size:22px; font-weight:300; line-height:1;
            color:var(--peri-text); font-variant-numeric:lining-nums; min-width:28px}
.xs-tab.on .xs-n,.pk-tab.on .pk-n{color:rgba(255,255,255,.92)}
.xs-desc,.pt-desc,.fm-desc,.bd-desc,.ws-desc{position:relative; min-height:9em; margin-top:18px}
.xs-d,.pt-d,.fm-d,.bd-d,.ws-d{
  position:absolute; inset:0; margin:0; opacity:0; transform:translateY(8px); pointer-events:none;
  font-size:15.5px; line-height:1.62; color:var(--body);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.xs-d b,.pt-d b,.fm-d b,.bd-d b,.ws-d b{display:block; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400; font-size:24px; color:var(--ink); margin-bottom:8px}
.xs-d.on,.pt-d.on,.fm-d.on,.bd-d.on,.ws-d.on{opacity:1; transform:none; pointer-events:auto}

/* 1. driveway cross section */
.xs{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,4vw,60px); align-items:start}
.xs-fig{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,34px)}
.xs-svg{width:100%; height:auto; display:block}
.xs-band rect{transition:opacity .35s var(--ease), transform .45s var(--ease); transform-box:fill-box;
              transform-origin:center; cursor:pointer}
.xs-svg.has-on .xs-band:not(.on) rect{opacity:.28}
.xs-band.on rect{transform:scaleY(1.06)}
.xs-lab{font-family:Inter,sans-serif; font-size:15px; font-weight:600; fill:#fff; letter-spacing:.04em;
        pointer-events:none}
.xs-lab.dark{fill:var(--ink)}
.xs-svg.has-on .xs-band:not(.on) .xs-lab{fill:var(--ink)}   /* a dimmed band goes pale, so its label goes dark */
@media (max-width:640px){.xs-lab{display:none}}   /* the tabs name every layer already */
.xs-car{transition:transform .8s var(--ease)}
.xs-svg.has-on.deep .xs-car{transform:translateY(-6px)}
@media (max-width:900px){.xs{grid-template-columns:1fr}}

/* 2. block patterns, 5. slab formats, 9. bonds: a panel that re-tiles */
.pt,.fm,.bd{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,4vw,60px); align-items:start}
.pt-fig,.fm-fig,.bd-fig{border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
                        box-shadow:var(--shadow); background:var(--wash)}
.pt-panel,.fm-panel,.bd-wall{width:100%; aspect-ratio:4/2.6; background-repeat:repeat;
  transition:opacity .28s var(--ease), transform .8s var(--ease); background-size:auto}
.pt-panel.swap,.fm-panel.swap,.bd-wall.swap{opacity:0; transform:scale(1.02)}
.bd-wall{aspect-ratio:4/2.2; background-color:var(--wash)}
@media (max-width:900px){.pt,.fm,.bd{grid-template-columns:1fr}}

/* 3. resin bound v bonded */
.rs{max-width:820px}
.rs-toggle{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:5px;
           border-radius:100px; background:var(--wash); border:1px solid var(--line); margin-bottom:30px}
.rs-t{position:relative; z-index:1; padding:12px 26px; border:0; background:none; cursor:pointer;
      font-family:Inter,sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em;
      text-transform:uppercase; color:var(--ink); transition:color .3s var(--ease); white-space:nowrap}
.rs-t.on{color:#fff}
.rs-pill{position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:100px;
         background:var(--navy); transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.rs-toggle.bonded .rs-pill{transform:translateX(100%)}
.rs-bars{display:grid; gap:16px}
.rs-row{display:grid; grid-template-columns:minmax(150px,.9fr) 1.6fr; gap:22px; align-items:center}
.rs-l b{display:block; font-size:14px; font-weight:600; color:var(--ink)}
.rs-l span{font-size:12.5px; color:var(--peri-text)}
.rs-bar{height:10px; border-radius:100px; background:var(--wash); border:1px solid var(--line); overflow:hidden}
.rs-bar i{display:block; height:100%; border-radius:100px;
          background:linear-gradient(90deg, var(--navy), var(--peri));
          transition:width .9s cubic-bezier(.22,.61,.36,1)}
.rs-note{margin-top:26px; font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; color:var(--ink);
         min-height:1.4em; position:relative}
.rs-note b{position:absolute; left:0; top:0; font-weight:400; opacity:0; transition:opacity .35s var(--ease)}
.rs-note b.on{opacity:1}
@media (max-width:600px){.rs-row{grid-template-columns:1fr; gap:8px}}

/* 6. garden room configurator */
.cf{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,60px); align-items:start}
.cf fieldset{border:0; padding:0; margin:0 0 22px}
.cf legend{font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
           color:var(--peri-text); margin-bottom:10px}
.cf-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.cf-row{display:flex; flex-wrap:wrap; gap:8px}
.cf-opt{position:relative; display:block; cursor:pointer}
.cf-opt input{position:absolute; opacity:0; inset:0; pointer-events:none}
.cf-opt span{display:block; padding:12px 16px; border-radius:var(--r-sm); border:1px solid var(--line);
             background:#fff; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3;
             transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.cf-opt small{display:block; font-weight:400; font-size:12px; color:var(--peri-text); margin-top:3px}
.cf-opt:hover span{border-color:var(--navy)}
.cf-opt input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff}
.cf-opt input:checked + span small{color:rgba(255,255,255,.82)}
.cf-opt input:focus-visible + span{outline:2px solid var(--navy); outline-offset:2px}
.cf-out{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.4vw,32px);
        position:sticky; top:calc(var(--topbar-h) + var(--hdr) + 20px)}
.cf-plan{border-radius:var(--r-sm); overflow:hidden; background:var(--wash); margin-bottom:20px}
.cf-svg{width:100%; height:auto; display:block}
.cf-room,.cf-doors,.cf-deck{transition:all .6s cubic-bezier(.22,.61,.36,1)}
.cf-dim{font-family:Inter,sans-serif; font-size:12px; font-weight:600; fill:var(--ink); letter-spacing:.08em}
.cf-sum{display:grid; gap:0; margin:0 0 20px}
.cf-sum div{display:grid; grid-template-columns:100px 1fr; gap:14px; padding:10px 0;
            border-bottom:1px solid var(--line); font-size:14px}
.cf-sum dt{color:var(--peri-text); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
           padding-top:3px}
.cf-sum dd{margin:0; color:var(--ink); transition:color .3s var(--ease)}
.cf-sum dd.flash{color:var(--navy)}
@media (max-width:900px){.cf{grid-template-columns:1fr} .cf-out{position:static}}

/* 7. landscaping sequence: six steps and a line that fills as you scroll */
.mod-sq .sq-wrap{position:relative; padding:0 var(--gut)}
.sq-line{position:absolute; left:var(--gut); right:var(--gut); top:26px; height:2px; background:var(--line)}
.sq-line i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--navy), var(--peri));
           transition:width .25s linear}
.sq{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,20px); list-style:none;
    margin:0; padding:0; counter-reset:none}
.sq-step{position:relative; padding-top:52px}
.sq-n{position:absolute; top:12px; left:0; width:30px; height:30px; border-radius:50%; background:#fff;
      border:2px solid var(--navy); display:flex; align-items:center; justify-content:center;
      font-family:Inter,sans-serif; font-size:11px; font-weight:700; color:var(--navy);
      transition:background .3s var(--ease), color .3s var(--ease)}
.sq-step.lit .sq-n{background:var(--navy); color:#fff}
.sq-step figure{margin:0 0 14px; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.2; background:var(--wash)}
.sq-step img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease)}
.sq-step:hover img{transform:scale(1.05)}
.sq-step h3{font-size:clamp(19px,1.5vw,22px); margin-bottom:6px}
.sq-step p{font-size:14px; line-height:1.55}
@media (max-width:1100px){.sq{grid-template-columns:repeat(3,1fr)} .sq-line{display:none} .sq-step{padding-top:44px}}
@media (max-width:640px){.sq{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.sq{grid-template-columns:1fr}}

/* 8. retaining wall section with hotspots */
.ws{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,4vw,60px); align-items:start}
.ws-fig{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
        box-shadow:var(--shadow)}
.ws-svg{width:100%; height:auto; display:block}
.ws-dot{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:0;
        background:transparent; cursor:pointer; padding:0}
.ws-dot i{display:block; width:14px; height:14px; margin:8px; border-radius:50%; background:#fff;
          border:3px solid var(--navy); box-shadow:0 0 0 0 rgba(21,71,136,.35);
          transition:transform .3s var(--ease), background .3s var(--ease); animation:wsPulse 2.4s var(--ease) infinite}
.ws-dot:hover i,.ws-dot.on i{background:var(--navy); transform:scale(1.25); animation:none}
@keyframes wsPulse{0%{box-shadow:0 0 0 0 rgba(21,71,136,.35)} 70%{box-shadow:0 0 0 12px rgba(21,71,136,0)} 100%{box-shadow:0 0 0 0 rgba(21,71,136,0)}}
.ws-desc{min-height:11em}
@media (max-width:900px){.ws{grid-template-columns:1fr}}

/* 10. garden services picker */
.pk{display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(24px,3.4vw,50px); align-items:start}
.pk-tabs{display:grid; gap:6px}
.pk-panels{position:relative}
.pk-panel{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,2.6vw,36px); align-items:center;
          position:absolute; inset:0; opacity:0; transform:translateY(10px); pointer-events:none;
          transition:opacity .45s var(--ease), transform .45s var(--ease)}
.pk-panel.on{position:relative; opacity:1; transform:none; pointer-events:auto}
.pk-panel figure{margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.2; box-shadow:var(--shadow)}
.pk-panel img{width:100%; height:100%; object-fit:cover; display:block}
.pk-copy h3{font-size:clamp(24px,2vw,30px); margin-bottom:10px}
.pk-copy p{font-size:15px}
.pk-copy ul.tick{margin-top:16px}
@media (max-width:900px){.pk{grid-template-columns:1fr} .pk-panel{grid-template-columns:1fr}
  .pk-tabs{display:flex; flex-wrap:wrap} .pk-tab{width:auto}}

/* the module sections alternate ground so they read as set pieces */
.mod-xs,.mod-fm,.mod-ws,.mod-pk{background:var(--wash)}
.mod-rs,.mod-cf,.mod-sq{background:#fff}
.mod-pt,.mod-bd{background:linear-gradient(180deg, #fff, var(--wash))}

.xs-fig{position:relative}

/* ---- a long heading leaves the half width column and runs the full width above the row */
.sp-wide{grid-template-columns:1fr 1fr; grid-template-areas:"head head" "art copy"}
.sp-wide.flip{grid-template-areas:"head head" "copy art"}
.sp-wide .sp-head{grid-area:head; max-width:none; margin-bottom:clamp(4px,1vw,12px)}
.sp-wide .sp-head h2{max-width:26ch}
.sp-wide .sp-art{grid-area:art; order:0}
.sp-wide .sp-copy{grid-area:copy}
.sp h2 em{display:inline}                /* the italic carries on, rather than taking its own line */
.sp-copy h2{font-size:clamp(28px,3.1vw,44px)}
.sp-head h2{font-size:clamp(34px,4.4vw,64px)}
@media (max-width:900px){
  .sp-wide{grid-template-areas:"head" "art" "copy"; grid-template-columns:1fr}
  .sp-wide.flip{grid-template-areas:"head" "art" "copy"}
}
.d1-cta-in{grid-template-areas:"head head" "copy form"}
.d1-cta-head{grid-area:head; max-width:none}
.d1-cta-head h2{max-width:22ch}
.d1-cta-copy{grid-area:copy}
.d1-cta-form{grid-area:form}
@media (max-width:900px){.d1-cta-in{grid-template-areas:"head" "copy" "form"}}

/* ---- freeze steps: any switching module pins and the scroll wheel steps through it */
.mod[data-freeze-steps],.mod-mat[data-freeze-steps]{position:relative}
.pinned.mod,.pinned.mod-mat{padding:0; min-height:0; display:block}
.pinned > .fz-track{
  position:sticky; top:0; min-height:100svh; box-sizing:border-box;
  display:flex; align-items:center;
  padding:calc(var(--topbar-h) + var(--hdr) + 10px) 0 18px;
}
/* the track is a flex row, so its one child must be allowed to shrink below its min-content:
   a height-capped SVG reports a 625px min-content on a 390px phone and pushed the whole
   module off the right edge */
.pinned > .fz-track > *{min-width:0; max-width:100%}
/* overflow:hidden on an ancestor kills position:sticky, so the band's own clip moves down
   onto the track, which also stops the scaled background photograph inflating scrollHeight */
.pinned.mod-mat{overflow:visible}
.pinned.mod-mat > .fz-track{padding:0; isolation:isolate; overflow:hidden}
.pinned.mod-mat > .fz-track > .d1-mat-in{padding-top:calc(var(--topbar-h) + var(--hdr) + 14px)}
.pinned .mod-head{margin-bottom:clamp(16px,2.2vw,30px)}
.fz-prog{display:flex; gap:8px; margin-top:16px}
.fz-prog i{width:26px; height:3px; border-radius:3px; background:var(--line); transition:background .3s var(--ease)}
.fz-prog i.on{background:var(--navy)}
.fz-prog i.done{background:var(--peri)}
.mod-mat .fz-prog i{background:rgba(255,255,255,.25)}
.mod-mat .fz-prog i.on{background:#fff}
.mod-mat .fz-prog i.done{background:var(--sky)}

/* ---- the pinned state is a compact cut of the module, so it fits a 768px laptop screen
   with the header above it. The unpinned (phone) layout is untouched. */
.pinned .mod-head{max-width:none; margin-bottom:clamp(10px,1.4vw,18px); display:grid;
                  grid-template-columns:1fr auto; gap:6px clamp(20px,3vw,40px); align-items:end}
.pinned .mod-head .eyebrow{grid-column:1 / -1}
.pinned .mod-head h2{font-size:clamp(26px,2.7vw,40px); margin:4px 0 0; max-width:none}
.pinned .mod-head .lead{font-size:14px; line-height:1.5; max-width:44ch; margin:0}
.pinned .mod-head .fz-prog{grid-column:1 / -1; margin-top:10px}
.pinned .xs,.pinned .pt,.pinned .fm,.pinned .bd,.pinned .ws,.pinned .pk{align-items:center}
.pinned .xs-fig{padding:clamp(12px,1.6vw,22px)}
.pinned .xs-svg{max-height:min(44vh,400px)}
.pinned .pt-panel,.pinned .fm-panel,.pinned .bd-wall{aspect-ratio:auto; height:min(46vh,430px)}
.pinned .ws-svg{max-height:min(46vh,430px)}
.pinned .pk-panel figure{aspect-ratio:auto; height:min(44vh,400px)}
.pinned .xs-tab,.pinned .pt-tab,.pinned .fm-tab,.pinned .bd-tab,.pinned .pk-tab{padding:10px 14px; font-size:12.5px}
.pinned .xs-desc,.pinned .pt-desc,.pinned .fm-desc,.pinned .bd-desc,.pinned .ws-desc{min-height:7.5em; margin-top:12px}
.pinned .xs-d,.pinned .pt-d,.pinned .fm-d,.pinned .bd-d,.pinned .ws-d{font-size:14.5px; line-height:1.55}
.pinned .xs-d b,.pinned .pt-d b,.pinned .fm-d b,.pinned .bd-d b,.pinned .ws-d b{font-size:21px; margin-bottom:5px}
.pinned .rs-bars{gap:12px}
.pinned .pk-copy p{font-size:14.5px}
.pinned.mod-mat .d1-mat-in h2{font-size:clamp(28px,3vw,44px); margin-bottom:20px}

/* ---- phones pin too (Amy, Sept 2026: "can it have the freeze screen so that I can scroll
   through it and it changes automatically... on all pages"). The pinned cut on a phone is
   tighter still: no lead, a small heading, the step buttons as one scrolling row of pills,
   the drawing held to a third of the screen, so the whole thing sits under the header. */
@media (max-width:760px){
  .pinned > .fz-track{padding-top:calc(var(--topbar-h) + var(--hdr) + 8px); padding-bottom:12px}
  .pinned .mod-head{display:block; margin-bottom:8px}
  .pinned .mod-head .lead{display:none}
  .pinned .mod-head .eyebrow{margin-bottom:4px}
  .pinned .mod-head h2{font-size:clamp(21px,6vw,26px); line-height:1.1; margin:0}
  .pinned .mod-head .fz-prog{margin-top:8px}
  .pinned .xs-tabs,.pinned .pt-tabs,.pinned .fm-tabs,.pinned .bd-tabs,.pinned .pk-tabs{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; margin:10px 0 0; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .pinned .xs-tabs::-webkit-scrollbar,.pinned .pt-tabs::-webkit-scrollbar,.pinned .fm-tabs::-webkit-scrollbar,
  .pinned .bd-tabs::-webkit-scrollbar,.pinned .pk-tabs::-webkit-scrollbar{display:none}
  .pinned .xs-tab,.pinned .pt-tab,.pinned .fm-tab,.pinned .bd-tab,.pinned .pk-tab{
    width:auto; flex:none; padding:8px 12px; font-size:11.5px; gap:8px; white-space:nowrap}
  .pinned .xs-tab:hover,.pinned .pt-tab:hover,.pinned .fm-tab:hover,.pinned .bd-tab:hover,.pinned .pk-tab:hover{transform:none}
  .pinned .xs-n,.pinned .pk-n{font-size:16px; min-width:0}
  .pinned .xs-fig{padding:10px}
  .pinned .xs-svg{max-height:26vh}
  .pinned .pt-panel,.pinned .fm-panel,.pinned .bd-wall{height:min(30vh,240px)}
  .pinned .ws-svg{max-height:32vh}
  .pinned .pk-panel figure{height:min(26vh,210px)}
  .pinned .pk-copy h3{font-size:20px; margin-bottom:6px}
  .pinned .pk-copy p{font-size:13.5px}
  .pinned .pk-copy ul.tick{margin-top:8px}
  .pinned .xs-desc,.pinned .pt-desc,.pinned .fm-desc,.pinned .bd-desc,.pinned .ws-desc{min-height:6.2em; margin-top:8px}
  .pinned .xs-d,.pinned .pt-d,.pinned .fm-d,.pinned .bd-d,.pinned .ws-d{font-size:13.5px; line-height:1.5}
  .pinned .xs-d b,.pinned .pt-d b,.pinned .fm-d b,.pinned .bd-d b,.pinned .ws-d b{font-size:18px; margin-bottom:4px}
  .pinned.mod .rs{grid-template-columns:1fr; gap:10px}
  /* one column that is the screen, never the content: a capped SVG or a row of pills has a
     min-content wider than a phone and would size the track to itself */
  .pinned .xs,.pinned .pt,.pinned .fm,.pinned .bd,.pinned .ws,.pinned .pk{grid-template-columns:minmax(0,1fr)}
  .pinned .xs-svg,.pinned .ws-svg{max-width:100%}
  .pinned .rs-toggle{margin-bottom:4px}
  .pinned .rs-bars{gap:8px}
  .pinned .rs-row{grid-template-columns:1fr 1.15fr; gap:10px}
  .pinned .rs-l b{font-size:12.5px}
  .pinned .rs-l span{display:none}
  .pinned .rs-note{display:none}
  .pinned .pk-panel figure{height:min(22vh,180px)}
  .pinned .pk-copy ul.tick{display:none}
  .pinned.mod-mat > .fz-track > .d1-mat-in{padding-top:calc(var(--topbar-h) + var(--hdr) + 8px)}
  .pinned.mod-mat .d1-mat-in h2{font-size:24px; margin-bottom:10px}
  .pinned.mod-mat .d1-mat-lead{font-size:13.5px; line-height:1.5; margin-bottom:8px}
  .pinned.mod-mat .d1-mat-lead + .d1-mat-lead{margin-bottom:12px}
}
.pinned.mod-mat .d1-mat-desc{min-height:4.4em}
@media (max-width:1100px){.pinned .mod-head{grid-template-columns:1fr} .pinned .mod-head .lead{max-width:none}}

/* resin is one tall column unpinned; pinned, the toggle and note sit beside the bars */
.pinned .rs{max-width:none; display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(24px,4vw,60px); align-items:center}
.pinned .rs-toggle{margin-bottom:18px}
.pinned .rs-note{margin-top:8px; font-size:19px}

/* the brand line, in the footer */
.ftr-tag{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:25px;
         color:#fff; margin:16px 0 8px !important; line-height:1.25}

/* The hero carries the client's two opening paragraphs. On a laptop-height screen the type
   steps down so the quote button stays above the fold. */
@media (max-height:980px) and (min-width:761px){
  .d1-hero{padding-top:calc(var(--topbar-h) + var(--hdr) + 32px); padding-bottom:clamp(40px,6vh,70px)}
  .d1-hero h1{font-size:clamp(44px,6.2vw,88px); margin-bottom:18px}
  .d1-hero .lead{font-size:clamp(16px,1.25vw,19px); max-width:62ch}
  .d1-hero .lead + .lead{margin-top:10px}
  .d1-hero .hero-cta{margin:24px 0 20px}
  .d1-facts{padding-top:14px}
  .d1-cue{margin-top:16px}
}
@media (max-height:820px) and (min-width:761px){
  .d1-hero h1{font-size:clamp(36px,4.8vw,62px)}
  .d1-hero .kicker{margin-bottom:10px}
  .d1-cue{display:none}
}
@media (max-width:760px){
  .d1-hero{padding-top:calc(var(--topbar-h) + var(--hdr) + 18px); padding-bottom:28px}
  .d1-hero .kicker{margin-bottom:10px}
  .d1-hero h1{font-size:clamp(38px,10.5vw,46px); margin-bottom:10px}
  .d1-hero .lead{font-size:14.5px; line-height:1.5}
  .d1-hero .lead + .lead{margin-top:10px}
  .d1-hero .hero-cta{margin:16px 0 0; gap:10px}
  .d1-hero .hero-cta .btn{min-height:50px}
  /* Amy (Sept 2026): the four facts sat under the buttons AND rolled along the ticker right
     below the hero, and the contact rail landed on top of them. On phones the ticker carries
     the facts alone, the hero ends at the buttons, and the rail sits under them. */
  .d1-hero .d1-facts{display:none}
  .d1-hero .d1-cue{display:none}
}

/* the client's quality message on the dark materials band: white, and held to a readable
   measure inside the veiled left side rather than running across the whole photograph */
.d1-mat-lead{color:rgba(255,255,255,.9); max-width:56ch; font-size:clamp(16px,1.25vw,18.5px);
             line-height:1.6; margin:0 0 14px}
.d1-mat-lead + .d1-mat-lead{margin-bottom:26px}
.d1-mat-in h2{margin-bottom:22px}

/* the client's areas heading is long, so it runs the full width above its note rather than
   sitting four lines deep in a half width column */
.d1-areas-head{grid-template-columns:1fr; gap:14px}
.d1-areas-head h2{max-width:22ch}
.d1-areas-head .lead{max-width:62ch}

/* ---- the big blocks: the logo's own blue rather than the near-black ink (Amy, Sept 2026:
   "the block navy just looks quite harsh... match the menu colour"). One gradient shared by
   the footer, the inner contact bands, the town banners, the drawer and the accreditations. */
:root{--block:linear-gradient(160deg, #1A4A8E 0%, #154788 45%, #0F3468 100%); --block-flat:#154788}
.ftr,.ftr-compact{background:var(--block)}
.ftr-bot,.ftr-legal{border-color:rgba(255,255,255,.16)}
.pb-ink{background:var(--block)}
.d1-contact-band{background:var(--block)}
.drawer{background:linear-gradient(170deg, #1A4A8E, #0F3468)}
.d1-backs{background:var(--block)}
.d1-mat{background:#0F3468}
.ftr-tag{font-size:38px; line-height:1.15}

/* ---- inner pages, a little more life (Amy, Sept 2026: "more special animations, more
   elements... really modern, really cool"). Four things, used everywhere so they read as
   one language: a reading line across the top; photographs that wipe in from the bottom as
   they arrive; the option cards lift and light under the pointer; the banner copy drifts
   up a little slower than the page. */
.prog{background:linear-gradient(90deg, var(--sky), #fff); height:2px; z-index:100}
/* only elements the reveal system marks with .in, so nothing can stay clipped */
.js .sp-art[data-reveal] figure,.js .g-tile[data-reveal],.js .ms-tile[data-reveal],.js .ft-grid figure[data-reveal],.js .photo-strip figure[data-reveal]{
  clip-path:inset(100% 0 0 0 round var(--r)); transition:clip-path 1.15s cubic-bezier(.2,.8,.2,1), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.js .sp-art[data-reveal].in figure,.js .g-tile[data-reveal].in,.js .ms-tile[data-reveal].in,.js .ft-grid figure[data-reveal].in,.js .photo-strip figure[data-reveal].in{clip-path:inset(0 0 0 0 round var(--r))}
.no-reveal .sp-art figure,.no-reveal .g-tile,.no-reveal .ms-tile,.no-reveal .ft-grid figure,.no-reveal .photo-strip figure{clip-path:none !important}
.opt{transition:background .4s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease)}
.opt:hover{transform:translateY(-4px); box-shadow:0 30px 50px -30px rgba(10,33,68,.45); background:#fff}
.opt::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(157,176,222,.22), rgba(157,176,222,0) 60%);
}
.opt:hover::after{opacity:1}
.pb-in{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js .sp-art[data-reveal] figure,.js .g-tile[data-reveal],.js .ms-tile[data-reveal],.js .ft-grid figure[data-reveal],.js .photo-strip figure[data-reveal]{clip-path:none; transition:none}
  .opt:hover{transform:none}
}
.d1-cta .d1-contact-copy h2{max-width:14ch}
.d1-cta .eyebrow{color:var(--sky)}
/* the banner ends at the buttons now (Amy: "remove the bullet points... clean it up") */
.d1-hero .hero-cta{margin-bottom:0}
.d1-hero{padding-bottom:clamp(64px,8vh,110px)}
/* the direct line under the quote copy: the phone the same size as the email (Amy) */
.d1-contact-phone{font-family:Inter,sans-serif; font-size:14.5px; font-weight:600; gap:9px}
.d1-contact-phone svg{width:16px; height:16px}

/* ---- the opening screen (Amy, Sept 2026: "a landing page with their logo... three seconds...
   really cool, really modern, really luxurious", then "keep their logo exactly as it is, the
   name to the right-hand side, and make it even more luxurious"). The logo is the header's
   own lockup, scaled up by --lk so it lands on the header pixel for pixel when site.js flies
   it home. Deep ground with a breathing light and a film grain, a light tracing the mark, the
   name wiping in beside it, the brand line rising, and a hairline counting the time.
   html.intro-on is set before first paint; the header's lockup hides until the flight lands. */
.intro{display:none}
/* The screen sits just BELOW the header (60) so the header's own lockup can fly over the
   dissolving veil: during the hold the header's parts are hidden and the intro shows its own
   copy of the lockup at --lk times header size; at the exit site.js puts the real lockup
   exactly over that copy (one translate + uniform scale), swaps them while the motion starts,
   and lets the real one settle into place with nothing to swap at the end. The rail and the
   reading line wait too. The gutter is reserved so the scrollbar's return moves nothing. */
html.intro-on{scrollbar-gutter:stable}
.intro-on .intro{
  display:flex; align-items:center; justify-content:center; position:fixed; inset:0; z-index:58;
  color:#fff; cursor:pointer; overflow:hidden; --lk:2.2; --inset:clamp(16px,2.6vw,38px);
}
.intro-on .hdr .lockup{opacity:0}
.intro-on .intro.out ~ .hdr .lockup{opacity:1}
.intro-on .hdr .nav,.intro-on .hdr .hdr-cta,.intro-on .hdr .burger{opacity:0; transition:opacity .6s var(--ease) .4s}
.intro-on .intro.out ~ .hdr .nav,.intro-on .intro.out ~ .hdr .hdr-cta,.intro-on .intro.out ~ .hdr .burger{opacity:1}
.intro-on .rail,.intro-on .prog{visibility:hidden}
.intro-on .intro.out .intro-lk{visibility:hidden}
.intro-veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(85% 70% at 50% 46%, #1A4A8E 0%, #0F3468 34%, #081D42 66%, #03091B 100%);
  transition:opacity 1s cubic-bezier(.55,0,.3,1) .2s;
}
.intro-bloom{
  position:absolute; left:50%; top:46%; width:min(72vw,900px); aspect-ratio:1.25; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(157,176,222,.34), rgba(157,176,222,.10) 45%, transparent 72%);
  mix-blend-mode:screen; animation:introBreathe 4.2s ease-in-out infinite alternate;
}
.intro-ghost{
  position:absolute; right:-12vw; top:50%; width:min(64vw,760px); aspect-ratio:1; transform:translateY(-50%);
  background:url("/assets/img/brand/cp-mark-light.svg") center/contain no-repeat; opacity:.045;
  animation:introSpin 60s linear infinite; pointer-events:none;
}
.intro-grain{
  position:absolute; inset:-40px; opacity:.09; mix-blend-mode:overlay; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  animation:introGrain .7s steps(4) infinite;
}
/* a hairline frame drawing itself just inside the screen, and two lines of small caps in the corners */
.intro-frame{position:absolute; inset:var(--inset); pointer-events:none}
.intro-frame::before,.intro-frame::after{content:""; position:absolute; inset:0; pointer-events:none}
.intro-frame::before{border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16);
                     transform:scaleX(0); animation:introFrameX 1.6s cubic-bezier(.3,0,.2,1) .9s both}
.intro-frame::after{border-left:1px solid rgba(255,255,255,.16); border-right:1px solid rgba(255,255,255,.16);
                    transform:scaleY(0); animation:introFrameY 1.6s cubic-bezier(.3,0,.2,1) 1.1s both}
.intro-cap{position:absolute; bottom:calc(var(--inset) + 18px); font-size:11px; font-weight:600; letter-spacing:.32em;
           text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap; animation:introRise 1s var(--ease) 2s both}
.intro-cap-l{left:calc(var(--inset) + 22px)}
.intro-cap-r{right:calc(var(--inset) + 22px)}
.intro-in{position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(22px,3vw,34px); padding:0 24px}
/* the lockup at header proportions times --lk, so a uniform scale lands it on the header */
.intro .lockup{position:relative; gap:calc(17px * var(--lk)); transform-origin:0 0; will-change:transform}
.intro .lockup img{height:calc(98px * var(--lk))}   /* no shadow: the header's has none, and the two swap */
.intro .lockup .mark-on-dark{animation:introMark 1.5s cubic-bezier(.2,.8,.2,1) both}
.intro .lockup .mark-on-light{display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .45s var(--ease) .3s}
.intro .lockup .wm b{font-size:calc(19px * var(--lk)); animation:introWipe 1.1s cubic-bezier(.2,.8,.2,1) .55s both; transition:color .45s var(--ease) .3s}
.intro .lockup .wm span{font-size:calc(12.5px * var(--lk)); letter-spacing:.34em; margin-top:calc(5px * var(--lk));
                        animation:introWipe 1.1s cubic-bezier(.2,.8,.2,1) .8s both; transition:color .45s var(--ease) .3s}
.intro.to-light .lockup .mark-on-dark{opacity:0; transition:opacity .45s var(--ease) .3s}
.intro.to-light .lockup .mark-on-light{opacity:1}
.intro.to-light .lockup .wm b{color:var(--ink)}
.intro.to-light .lockup .wm span{color:var(--navy)}
/* a light tracing the ring of the mark, then a sheen passing through the mark's own shape */
.intro-ring,.intro-sheen{
  position:absolute; left:0; top:50%; width:calc(98px * var(--lk)); aspect-ratio:1; transform:translateY(-50%);
  pointer-events:none;
}
.intro-ring{
  left:calc(-4px * var(--lk)); width:calc(106px * var(--lk)); border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(157,176,222,.25) 74%, #fff 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  opacity:0; animation:introRing 1.9s cubic-bezier(.45,0,.2,1) .25s both;
}
.intro-sheen{
  -webkit-mask:url("/assets/img/brand/cp-mark-light.svg") center/contain no-repeat;
          mask:url("/assets/img/brand/cp-mark-light.svg") center/contain no-repeat;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.85) 50%, transparent 68%) 120% 0 / 260% 100% no-repeat;
  animation:introSheen 1.3s cubic-bezier(.4,0,.2,1) 1.35s both;
}
.intro-tag{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:400;
           font-size:clamp(20px,2.3vw,33px); letter-spacing:.01em; color:rgba(255,255,255,.9);
           text-shadow:0 2px 24px rgba(0,0,0,.4); animation:introRise 1s var(--ease) 1.45s both}
.intro-bar{display:block; width:min(260px,56vw); height:1px; background:rgba(255,255,255,.14); overflow:hidden;
           animation:introRise 1s var(--ease) 1.7s both}
.intro-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, transparent, var(--sky) 30%, #fff 50%, var(--sky) 70%, transparent);
             transform:scaleX(0); animation:introBar 2.2s cubic-bezier(.3,0,.4,1) 1.1s both}
/* the way out: the veil dissolves while the header's own lockup flies home (site.js) */
.intro-on .intro.out{cursor:default}
.intro-on .intro.out .intro-veil{opacity:0}
.intro-on .intro.out .intro-tag,.intro-on .intro.out .intro-bar{opacity:0; transform:translateY(-8px); transition:opacity .35s var(--ease), transform .35s var(--ease)}
.intro-on .intro.out .intro-ring,.intro-on .intro.out .intro-sheen{display:none}
@keyframes introMark{from{opacity:0; transform:scale(.84); filter:blur(10px)} 60%{filter:blur(0)} to{opacity:1; transform:none; filter:blur(0)}}
@keyframes introWipe{from{opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-10px)} to{opacity:1; clip-path:inset(0 0 0 0); transform:none}}
@keyframes introRing{0%{opacity:0; transform:translateY(-50%) rotate(-40deg)} 18%{opacity:1} 80%{opacity:1} 100%{opacity:0; transform:translateY(-50%) rotate(380deg)}}
@keyframes introSheen{from{background-position:120% 0} to{background-position:-40% 0}}
@keyframes introRise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes introCapC{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}
@keyframes introBar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes introFrameX{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes introFrameY{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes introBreathe{from{transform:translate(-50%,-50%) scale(.92)} to{transform:translate(-46%,-52%) scale(1.12)}}
@keyframes introSpin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes introGrain{0%{background-position:0 0} 25%{background-position:-60px 30px} 50%{background-position:40px -50px} 75%{background-position:-30px -20px} 100%{background-position:0 0}}
@media (max-width:1100px){.intro-on .intro{--lk:1.5}}
@media (max-width:820px){.intro-cap-r{display:none} .intro-cap-l{left:50%; transform:translateX(-50%); animation-name:introCapC} .intro-cap{font-size:10px}}
@media (max-width:640px){
  .intro-on .intro{--lk:1.24}
  .intro .lockup img{height:calc(68px * var(--lk))}
  .intro .lockup .wm b{font-size:calc(15.5px * var(--lk))}
  .intro .lockup .wm span{font-size:calc(10.5px * var(--lk)); letter-spacing:.26em}
  .intro-ring,.intro-sheen{width:calc(68px * var(--lk))}
  .intro-ring{left:calc(-2.7px * var(--lk)); width:calc(73.5px * var(--lk))}
  .intro-ghost{right:-30vw; width:110vw}
}
@media (max-width:400px){.intro-on .intro{--lk:1.1}}
@media (max-width:360px){
  .intro-on .intro{--lk:1.12}
  .intro .lockup img{height:calc(52px * var(--lk))}
  .intro .lockup .wm b{font-size:calc(12.5px * var(--lk))}
  .intro .lockup .wm span{font-size:calc(8.5px * var(--lk)); letter-spacing:.24em}
  .intro-ring,.intro-sheen{width:calc(52px * var(--lk))}
  .intro-ring{left:calc(-2.1px * var(--lk)); width:calc(56.2px * var(--lk))}
}
.intro-on body{overflow:hidden}
.intro-on.intro-done body{overflow:visible}

/* ---- the signature modules, a size up (Amy, Sept 2026: "make them stand out, make them pop").
   Bigger heading, the drawing panel wider and raised on a shadow with a faint glow behind it,
   the step buttons a touch larger; the pinned cut follows suit on a desktop. */
.mod:not(.pinned) .mod-head h2{font-size:clamp(34px,3.8vw,58px)}
.mod:not(.pinned) .lead{font-size:clamp(16px,1.3vw,19px)}
.xs,.pt,.fm,.bd,.ws{grid-template-columns:1.4fr .6fr}
.xs-fig,.pt-fig,.fm-fig,.bd-fig,.ws-fig{
  position:relative; box-shadow:0 50px 90px -46px rgba(10,33,68,.55), 0 0 0 1px rgba(21,71,136,.06);
}
.xs-fig{padding:clamp(24px,3vw,44px); background:linear-gradient(160deg, #fff, #F4F7FC)}
/* the glow behind each drawing reaches 12% past it, so the module clips sideways (clip, not
   hidden: hidden would break the pinned track's sticky). On a 390px phone the glow was 21px
   past the edge and iOS Safari let the page slide over to it. */
.mod,.mod-mat{overflow-x:clip}
.xs-fig::before,.pt-fig::before,.fm-fig::before,.bd-fig::before,.ws-fig::before{
  content:""; position:absolute; inset:-12%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(157,176,222,.35), rgba(157,176,222,0) 70%);
}
.xs-tab,.pt-tab,.fm-tab,.bd-tab,.pk-tab{padding:16px 20px; font-size:13.5px}
.xs-n,.pk-n{font-size:24px}
.xs-d b,.pt-d b,.fm-d b,.bd-d b,.ws-d b{font-size:26px}
@media (min-width:761px){
  .pinned .mod-head h2{font-size:clamp(28px,3vw,46px)}
  .pinned .xs-svg{max-height:min(52vh,520px)}
  .pinned .pt-panel,.pinned .fm-panel,.pinned .bd-wall{height:min(54vh,520px)}
  .pinned .ws-svg{max-height:min(54vh,520px)}
  .pinned .pk-panel figure{height:min(50vh,480px)}
  .pinned .xs-tab,.pinned .pt-tab,.pinned .fm-tab,.pinned .bd-tab,.pinned .pk-tab{padding:12px 16px; font-size:13px}
}
@media (max-width:900px){.xs,.pt,.fm,.bd,.ws{grid-template-columns:1fr}}

/* ---- the ground map on the areas page (Amy, Sept 2026): navy ground, sky rings, the
   towns by what is under them, a beam that turns, a hover spoke and a readout. */
/* ---- the ground map (Amy, Sept 2026: "not the dark blue, a white background, all their
   colours, much more interactive, stand out a lot more"). White section, the map in a card,
   the three grounds as washes in the palette's tints, the towns in the palette's strong
   colours, and a town card beside it that follows the pointer, the beam, or the find box. */
.am-sec{background:#fff; color:var(--ink); position:relative; overflow:hidden}
.am-sec .wrap{position:relative; z-index:1}
.am{max-width:1180px; margin:0 auto}
.am-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin-bottom:20px}
.am-legend{display:flex; flex-wrap:wrap; gap:8px}
.am-f{
  display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:100px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
  background:#fff; border:1px solid var(--line); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.am-f:hover{border-color:var(--sky); box-shadow:0 8px 20px -10px rgba(21,71,136,.35)}
.am-f.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.am-f i,.am-chip i,.am-tag i{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; box-shadow:0 0 0 2px #fff}
.am-chalk i{background:var(--navy)}
.am-sand i{background:var(--peri)}
.am-clay i{background:var(--ink)}
.am-f.on i{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.am-find{
  display:inline-flex; align-items:center; gap:8px; padding:0 14px; height:40px; border-radius:100px; min-width:220px;
  background:var(--wash); border:1px solid var(--line); color:var(--navy); transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.am-find:focus-within{border-color:var(--navy); box-shadow:0 0 0 4px rgba(21,71,136,.12); background:#fff}
.am-find .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.am-find svg{flex:none; color:var(--navy)}
.am-find input{border:0; background:none; font:inherit; font-size:14px; color:var(--ink); outline:none; width:100%; min-width:0}
.am-find input::placeholder{color:var(--peri-text)}
.am-find input::-webkit-search-cancel-button{-webkit-appearance:none}
.am-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr); gap:22px; align-items:stretch}
.am-map{position:relative; border-radius:var(--r); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.am-map{display:flex}
.am-svg{display:block; width:100%; height:100%; min-height:0}
@media (max-width:900px){.am-svg{height:auto}}
.am-band{transition:opacity .45s var(--ease), fill .45s var(--ease); cursor:pointer}
.am-band-chalk{fill:#F6F8FD}
.am-band-sand{fill:#E4EBF7}
.am-band-clay{fill:#D2DCEF}
.am-pocket{fill:#E4EBF7}
.am.filtered .am-band:not(.am-band-on){opacity:.35}
.am-edge{fill:none; stroke:rgba(21,71,136,.16); stroke-width:1}
.am-band-l{font-family:Inter,sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; pointer-events:none}
.am-band-l-chalk{fill:rgba(21,71,136,.55)}
.am-band-l-sand{fill:rgba(90,107,148,.7)}
.am-band-l-clay{fill:rgba(10,33,68,.5)}
.am-ring{fill:none; stroke:rgba(21,71,136,.22); stroke-width:1; stroke-dasharray:3 6}
.am-ring-l{font-family:Inter,sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; fill:rgba(21,71,136,.6)}
.am-beam{will-change:transform}
.am-spoke{stroke:var(--navy); stroke-width:1.5; stroke-dasharray:5 5; opacity:0; transition:opacity .3s var(--ease); animation:amDash 1.2s linear infinite}
.am-spoke.on{opacity:.85}
@keyframes amDash{to{stroke-dashoffset:-20}}
.am-town{cursor:pointer; outline:none; transition:opacity .35s var(--ease)}
/* sizes move by transform, not the r property, which Safari does not take from CSS */
.am-dot{stroke:#fff; stroke-width:2.5; transform-box:fill-box; transform-origin:center; transition:transform .3s var(--ease), fill .3s var(--ease); filter:drop-shadow(0 2px 4px rgba(10,33,68,.35))}
.am-chalk .am-dot{fill:var(--navy)}
.am-sand .am-dot{fill:var(--peri)}
.am-clay .am-dot{fill:var(--ink)}
.am-halo{fill:none; stroke:var(--navy); stroke-width:1.5; opacity:0; transform:scale(.6); transform-box:fill-box; transform-origin:center;
         transition:opacity .35s var(--ease), transform .45s var(--ease)}
.am-sand .am-halo{stroke:var(--peri)}
.am-clay .am-halo{stroke:var(--ink)}
.am-ping{fill:none; stroke:var(--navy); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center}
.am-town.ping .am-ping{animation:amPing 1.1s cubic-bezier(.2,.7,.3,1) both}
@keyframes amPing{0%{transform:scale(1); opacity:.85} 100%{transform:scale(4.5); opacity:0}}
.am-l{font-family:Inter,sans-serif; font-size:13.5px; font-weight:600; fill:var(--ink); letter-spacing:.01em; transition:fill .3s var(--ease); paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round}
.am-town:hover .am-dot,.am-town:focus-visible .am-dot,.am-town.on .am-dot{transform:scale(1.45)}
.am-town:hover .am-halo,.am-town:focus-visible .am-halo,.am-town.on .am-halo{opacity:.7; transform:scale(1)}
.am-town:hover .am-l,.am-town:focus-visible .am-l,.am-town.on .am-l{fill:var(--navy)}
.am.filtered .am-town:not(.am-match){opacity:.18}
.am-home-o{fill:none; stroke:var(--navy); stroke-width:1.5; opacity:.55; transform-box:fill-box; transform-origin:center; animation:amHome 3.2s ease-in-out infinite}
@keyframes amHome{0%,100%{transform:scale(1); opacity:.55} 50%{transform:scale(1.2); opacity:.2}}
.am-home-i{fill:var(--navy); filter:drop-shadow(0 6px 14px rgba(21,71,136,.4))}
.am-home-l{font-family:Inter,sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; fill:var(--navy)}
.am-north path{fill:var(--navy); opacity:.7}
.am-north text{font-family:Inter,sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; fill:var(--navy)}
/* the town card */
.am-card{
  display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; background:var(--block); color:#fff;
  box-shadow:var(--shadow); position:relative; min-height:0;
}
.am-photo{margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink); flex:none}
.am-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease), transform 6s linear; transform:scale(1)}
.am-photo img.on{opacity:1; transform:scale(1.06)}
.am-photo::after{content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(to top, rgba(10,33,68,.55), transparent); pointer-events:none}
.am-card-in{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.am-tag{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:5px 11px 5px 7px; border-radius:100px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
        background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff}
.am-tag i{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.am-tag.am-clay i{background:var(--sky)}
.am-tag.am-chalk i{background:#fff}
.am-tag.am-sand i{background:var(--sky-2)}
.am-card h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:34px; line-height:1; color:#fff; margin:6px 0 0}
.am-miles{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sky); margin:0}
.am-line{font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.84); margin:2px 0 0; flex:1}
.am-go{align-self:flex-start; margin-top:12px; padding:12px 20px; font-size:12px; background:#fff; color:var(--navy); border-color:#fff}
.am-go:hover{background:var(--sky-2); border-color:var(--sky-2); color:var(--ink)}
.am-card.swap .am-card-in > *{animation:amCardIn .5s var(--ease) both}
.am-card.swap .am-card-in > :nth-child(2){animation-delay:.05s}
.am-card.swap .am-card-in > :nth-child(3){animation-delay:.1s}
.am-card.swap .am-card-in > :nth-child(4){animation-delay:.15s}
.am-card.swap .am-card-in > :nth-child(5){animation-delay:.2s}
@keyframes amCardIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* the phone list of towns: two even columns, a dot, the name, the postcode (Amy, Sept 2026:
   "make sure the towns are listed really nicely... the dots listed nicely or neater") */
.am-chips{display:none; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}
.am-chip{display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; border-radius:12px; font-size:13.5px; font-weight:500; color:var(--ink);
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
         background:#fff; border:1px solid var(--line); transition:opacity .35s var(--ease), border-color .3s var(--ease)}
.am-chip:active{border-color:var(--navy)}
.am[data-filter="chalk"] .am-chip:not(.am-chalk),.am[data-filter="sand"] .am-chip:not(.am-sand),.am[data-filter="clay"] .am-chip:not(.am-clay){opacity:.3}
@media (max-width:900px){
  .am-grid{grid-template-columns:1fr}
  .am-card{flex-direction:row; align-items:stretch}
  .am-photo{width:42%; aspect-ratio:auto; min-height:230px}
  .am-card-in{padding:18px 20px}
}
@media (max-width:640px){
  .am-l,.am-ring-l,.am-band-l,.am-north{display:none}
  .am-dot{transform:scale(2); stroke-width:1.4}
  .am-town:hover .am-dot,.am-town:focus-visible .am-dot,.am-town.on .am-dot{transform:scale(2.5)}
  .am-hit{transform:scale(1.6); transform-box:fill-box; transform-origin:center}
  .am-town:hover .am-halo,.am-town:focus-visible .am-halo,.am-town.on .am-halo{transform:scale(1.5)}
  .am-ping{transform:scale(1.7)}
  @keyframes amPing{0%{transform:scale(1.7); opacity:.85} 100%{transform:scale(6); opacity:0}}
  .am-home-l{font-size:15px}
  .am-chips{display:grid}
  .am-card{flex-direction:column}
  .am-photo{width:auto; aspect-ratio:16/10; min-height:0}
  .am-card h3{font-size:28px}
  .am-bar{display:grid; grid-template-columns:1fr; gap:8px}
  .am-legend{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .am-f{justify-content:center; padding:11px 10px; font-size:11px; letter-spacing:.08em; white-space:nowrap}
  .am-find{width:100%; min-width:0}
}
@media (prefers-reduced-motion:reduce){.am-spoke,.am-home-o,.am-town.ping .am-ping{animation:none} .am-photo img{transition:opacity .4s; transform:none}}


/* ---- the not-found page (only in the upload package) */
.nf{min-height:clamp(420px,60vh,640px)}
.nf-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.nf-links a{display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-weight:500; text-decoration:none;
            transition:border-color .3s var(--ease), background .3s var(--ease)}
.nf-links a:hover{border-color:var(--navy); background:var(--wash)}

/* generated by services.pattern_css(): laying patterns, bonds and slab formats */
.pt-panel.hb45{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2248%22%20height%3D%2248%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate%2845%29%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%22-23.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%22-11.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%2224.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%22-11.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%2236.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%22-35.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2248.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%22-23.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2260.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%22-23.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%22-11.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2224.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%22-11.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2236.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%22-35.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2248.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%22-23.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2260.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.pt-panel.hb90{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2248%22%20height%3D%2248%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%22-23.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%22-11.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%2224.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%22-11.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%2236.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%22-35.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2248.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%22-23.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2260.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%22-23.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%22-11.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2224.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%22-11.4%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2236.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%22-35.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2248.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%22-23.4%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2260.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.pt-panel.stretcher{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2224%22%20height%3D%2224%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-23.4%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%22-11.4%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.pt-panel.basket{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2248%22%20height%3D%2248%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2212.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2222.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2224.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2236.6%22%20width%3D%2222.8%22%20height%3D%2210.8%22%20fill%3D%22%23B9C6E4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.bd-wall.stretcher{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2228%22%20height%3D%2228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-27.4%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2228.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2256.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-13.4%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2214.6%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2242.6%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2270.6%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.bd-wall.flemish{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2228%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2242%22%20height%3D%2228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2242%22%20height%3D%2228%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-83.4%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-55.4%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-41.4%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-13.4%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2228.6%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2242.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2270.6%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2284.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22112.6%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-62.4%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-34.4%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-20.4%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%227.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2221.6%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2249.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2263.6%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2291.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22105.6%22%20y%3D%2214.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22133.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.bd-wall.english{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2228%22%20height%3D%2228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-27.4%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2228.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2256.6%22%20y%3D%220.6%22%20width%3D%2226.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-6.4%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%227.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2221.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2235.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2249.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.bd-wall.header{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2228%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2214%22%20height%3D%2228%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2214%22%20height%3D%2228%22%20fill%3D%22%23EEF3FA%22%2F%3E%3Crect%20x%3D%22-13.4%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2214.6%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2228.6%22%20y%3D%220.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%22-6.4%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%227.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2221.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3Crect%20x%3D%2235.6%22%20y%3D%2214.6%22%20width%3D%2212.8%22%20height%3D%2212.8%22%20fill%3D%22%237988B6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.fm-panel.f600{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2260%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2230%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%22-29.4%22%20y%3D%220.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2230.6%22%20y%3D%220.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%220.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%22-29.4%22%20y%3D%2230.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2230.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2230.6%22%20y%3D%2230.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2230.6%22%20width%3D%2228.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.fm-panel.f900{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245.0%22%20height%3D%2260%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2245.0%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2245.0%22%20height%3D%2260%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%22-44.4%22%20y%3D%220.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2245.6%22%20y%3D%220.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2290.6%22%20y%3D%220.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%22-21.9%22%20y%3D%2230.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2223.1%22%20y%3D%2230.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2268.1%22%20y%3D%2230.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%22113.1%22%20y%3D%2230.6%22%20width%3D%2243.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.fm-panel.f1200{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2260%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2260%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%22-59.4%22%20y%3D%220.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%220.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%22120.6%22%20y%3D%220.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%22-29.4%22%20y%3D%2230.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2230.6%22%20y%3D%2230.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2290.6%22%20y%3D%2230.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%22150.6%22%20y%3D%2230.6%22%20width%3D%2258.8%22%20height%3D%2228.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}
.fm-panel.fplank{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2260%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22p%22%20width%3D%2220%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2720%27%20height%3D%2760%27%20fill%3D%27%23FFFFFF%27%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%228.8%22%20height%3D%2258.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2210.6%22%20y%3D%22-29.4%22%20width%3D%228.8%22%20height%3D%2258.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3Crect%20x%3D%2210.6%22%20y%3D%2230.6%22%20width%3D%228.8%22%20height%3D%2258.8%22%20fill%3D%22%23DCE5F4%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E")}