/* Every style on the site. The original look: Archivo for headings and
   buttons, Source Serif for reading, a dark brand band with a bright accent button.
   Brand colors are variables written from site.json into /assets/css/theme.css
   (lib/theme.js); the neutrals below stay the same for every client. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-latin.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:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-latin.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:"Source Serif";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --disp:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif",Georgia,"Times New Roman",serif;
  --line:#DED6C6;--line-soft:#E4DDCE;--line-input:#C9C0AE;--chip:#D8D0BF;--row:#EAE3D4;--row-hi:#F6F2E8;
  --muted:#37413E;--tint:#F3EEE3;--faint:#B3AB9B;--err:#8A2A1B;--err-bg:#FFF1ED;--err-ink:#6E2216;--warn-bg:#FFF8EA;--warn-ink:#5A3D0C;
  /* fallbacks until theme.css loads */
  --main:#1B4D45;--dark:#0E312C;--accent:#E0A33E;--paper:#FBF8F2;--sand:#EFE9DC;--ink:#14181B;--stone:#5C655F;
  /* cards and form boxes, and link and heading color: the white text version changes both */
  --card:#fff;--link:var(--main);
}
/* a look drawn on part of a page (Color looks page cards) gets its own link color too */
[data-look]{--link:var(--main)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
body.home{font-size:18px}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
h1,h2,h3,.num,.btn,.bar,.eyebrow,legend{font-family:var(--disp)}
p{margin:0 0 16px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 14px;font-family:var(--disp);font-weight:700;text-decoration:none;border-radius:3px}
.skip:focus{top:12px}
.no-js .js-only{display:none!important}
.js .nojs-only{display:none!important}
.small{font-size:15px}
[hidden]{display:none!important}

/* ---------- sample banner (template sample site only) ---------- */
.sample{background:#FFF3C4;color:#3D2E00;font-family:var(--disp);font-size:14px;text-align:center;padding:8px 16px;line-height:1.4}
.sample a{color:#3D2E00;font-weight:700;margin-left:4px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:50;background:var(--dark);color:#fff;display:flex;align-items:center;gap:16px;padding:11px 24px;font-size:15px}
.bar a{text-decoration:none}
.bar .mark{flex:0 0 auto;display:block;line-height:0}
.bar .mark img,.bar .mark svg{width:42px;height:42px}
.bar .name{font-weight:800;letter-spacing:-.01em;font-size:16.5px;margin-right:auto;line-height:1.15;color:#fff}
.bar .name span{display:block;font-weight:500;font-size:11.5px;color:var(--on-dark-faint);letter-spacing:.02em}
.bar .tel{color:#fff;font-weight:600;white-space:nowrap}
.bar .btn{white-space:nowrap}
.mark-svg .m-b{fill:var(--main)}.mark-svg .m-a{fill:var(--accent)}.mark-svg .m-l{fill:#fff;opacity:.8}
@media(max-width:640px){
  .bar{padding:9px 12px;gap:10px}
  .bar .mark img,.bar .mark svg{width:34px;height:34px}
  .bar .name{font-size:14px}
  .bar .name span{display:none}
  .bar .tel{font-size:14.5px}
}
@media(max-width:400px){.bar .name{display:none}.bar .tel{margin-right:auto}}

/* The Colors menu in the top bar (features.json colorLooks) */
.bar-looks{position:relative}
.bar-looks summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;white-space:nowrap}
.bar-looks summary::-webkit-details-marker{display:none}
.bar-looks summary .ico{flex:none}
.bar-looks[open] summary{border-color:#fff;background:rgba(255,255,255,.1)}
.looks-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(280px,calc(100vw - 24px));padding:14px 12px 12px;
  background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.28);font-family:var(--disp)}
.looks-menu-h{margin:0 6px 8px;font-size:13px;font-weight:600;color:var(--stone);text-transform:uppercase;letter-spacing:.05em}
.looks-menu ul{list-style:none;margin:0;padding:0}
.looks-menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer}
.looks-menu button:hover{background:var(--tint)}
.looks-menu button[aria-pressed="true"]{background:var(--sand)}
.looks-menu button[aria-pressed="true"]::after{content:"✓";margin-left:auto;color:var(--link);font-weight:800}
.looks-menu small{font-size:12.5px;font-weight:500;color:var(--stone)}
.look-dot{flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  background:linear-gradient(135deg,var(--dark) 0 50%,var(--accent) 50% 100%)}
.looks-menu-more{display:block;margin:8px 8px 2px;font-size:14.5px;font-weight:600;color:var(--link)}
.bar .looks-menu-more{color:var(--link);text-decoration:underline}
@media(max-width:640px){
  .bar-looks-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar-looks summary{padding:8px 10px}
  /* on phones the menu hangs from the whole top bar (which is sticky, so it anchors it), edge to edge */
  .bar-looks{position:static}
  .looks-menu{left:12px;right:12px;width:auto;top:calc(100% + 6px)}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;font-weight:700;letter-spacing:-.005em;border-radius:3px;
  padding:13px 22px;font-size:16px;line-height:1.3;transition:background .15s ease;text-align:center}
.btn-sm{padding:9px 16px;font-size:14.5px}
.btn-big{padding:13px 22px;font-size:16px}
.btn-gold{background:var(--accent);color:var(--on-accent)}
.btn-gold:hover{background:var(--accent-hover)}
.btn-line{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent;padding:11.5px 20px}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--main);color:#fff}
.btn-dark:hover{background:var(--light)}
.btn-light{background:var(--paper);color:var(--dark)}
.btn-light:hover{background:#fff}
.btn-outline{background:transparent;color:var(--link);border:1.5px solid var(--main);padding:11.5px 20px}
.btn-outline:hover{background:var(--card)}
.linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--link);text-decoration:underline;cursor:pointer}
@media(max-width:640px){.bar .btn{padding:9px 13px;font-size:14px}}
@media(max-width:520px){.hero .cta .btn,.book .cta .btn,.endcta .cta .btn{flex:1 1 100%}}

/* ---------- home: hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.hero .soil{position:absolute;inset:0;background:
  repeating-linear-gradient(101deg,rgba(0,0,0,.16) 0 3px,rgba(0,0,0,0) 3px 11px),
  radial-gradient(120% 90% at 78% 8%,var(--glow) 0%,var(--glow-end) 62%),
  linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}
.hero .pass{position:absolute;top:-14%;bottom:-14%;left:46%;width:64%;transform:skewX(-11deg);transform-origin:top left;
  background:repeating-linear-gradient(101deg,rgba(255,255,255,.055) 0 4px,rgba(255,255,255,0) 4px 13px),
  linear-gradient(100deg,var(--pass-a) 0%,var(--pass-b) 55%,var(--pass-c) 100%);
  box-shadow:-1px 0 0 rgba(255,255,255,.22),26px 0 44px rgba(0,0,0,.16)}
.hero .inner{position:relative;padding-top:74px;padding-bottom:128px}
.hero h1{font-size:clamp(36px,5.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0 0 22px;max-width:19ch}
.hero h1 .where{display:block;font-size:.5em;letter-spacing:-.015em;line-height:1.1;margin-top:.45em;color:var(--on-dark-soft);font-weight:700}
.hero .lede{font-size:clamp(18px,2.1vw,21px);color:var(--on-dark-bright);max-width:46ch;margin:0 0 30px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .note{margin:22px 0 0;font-size:15px;color:var(--on-dark-soft);max-width:44ch}
.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;display:block}
.ridge .r1{fill:var(--ridge)}.ridge .r2{fill:var(--paper)}
@media(max-width:760px){.hero .pass{left:36%;width:86%}.hero .inner{padding-top:52px;padding-bottom:96px}}

/* background video (features.json heroVideo). The dark layer over it is strong enough that
   the faintest words stay readable even on an all-white frame (lib/theme.js works it out). */
.hero-media{position:absolute;inset:0;background:var(--dark)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--video-focus,50% 50%);display:block}
.hero-media::after{content:"";position:absolute;inset:0;background:var(--video-shade);opacity:var(--video-shade-opacity)}
.hero-pause{position:absolute;z-index:2;top:14px;right:16px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 14px 7px 12px;
  font-family:var(--disp);font-size:14px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.55);border-radius:999px;cursor:pointer}
.hero-pause:hover{background:rgba(0,0,0,.6);border-color:#fff}
.hero-pause::before{content:"";flex:none;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero-pause[data-state="paused"]::before{width:0;height:0;border-left:10px solid currentColor;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- home: sections ---------- */
.home section h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.022em;line-height:1.06;margin:0 0 18px}
.home section h3{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.home section p{max-width:62ch}
section .inner{padding-top:66px;padding-bottom:66px}
.lead{font-size:20px;max-width:56ch}
.home .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:34px}
.svc>div{background:var(--paper);padding:24px 22px}
.svc p{font-size:16.5px;color:var(--muted);margin:0}
.svc .tick{color:var(--link);font-family:var(--disp);font-weight:800;font-size:13px;margin-bottom:10px;display:block;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:640px){.svc{grid-template-columns:1fr}}

.who{background:var(--main);color:#fff}
.who .inner{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:center}
.home .who h2{color:#fff}
.who p{color:var(--on-dark-bright)}
.who p a{color:#fff}
.who figure{margin:0}
.who img{width:100%;border-radius:2px}
.who figcaption{font-family:var(--disp);font-size:13.5px;color:var(--on-dark-soft);margin-top:10px}
.who .small{font-size:15px;color:var(--on-dark-soft)}
/* Cells grow to fill each row, so five facts sit three and two, never four and one beside an
   empty block. */
.creds-dark{display:flex;flex-wrap:wrap;gap:1px;margin:22px 0 14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18)}
.creds-dark>div{flex:1 1 230px;background:var(--main);padding:10px 14px}
.creds-dark dt{font-family:var(--disp);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--on-dark-soft)}
.creds-dark dd{margin:2px 0 0;font-family:var(--disp);font-weight:600;font-size:15.5px;color:#fff}
.creds-dark dd a{color:#fff}
@media(max-width:820px){.who .inner{grid-template-columns:1fr;gap:30px}.who figure{max-width:210px}}

.feature .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.featfig{margin:0}
.featfig img{width:100%;border-radius:2px}
.featfig figcaption{font-family:var(--disp);font-size:13.5px;color:var(--stone);margin-top:10px}
@media(max-width:820px){.feature .inner{grid-template-columns:1fr;gap:30px}}

/* A real site with no photo for a section yet: the words take the full width. */
.who .inner.no-fig,.feature .inner.no-fig{grid-template-columns:1fr}
.who .inner.no-fig>div,.feature .inner.no-fig>div{max-width:760px}

/* "See it working": example sites, each with a screenshot */
.examples{background:var(--sand)}
.example-list{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.example{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden}
.example img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--line-soft)}
.ex-text{padding:20px 22px 22px}
.ex-tag{font-family:var(--disp);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--link);margin:0 0 6px}
.home .example h3{font-size:21px;margin:0 0 8px}
.example p{font-size:16.5px;color:var(--muted)}
.example .ex-link{margin:0;font-family:var(--disp);font-weight:600;font-size:16px}
.example .ex-link a{color:var(--link)}

/* Grey boxes standing in for photos on the sample site. */
.ph{display:grid;place-items:center;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--sand) 0 12px,var(--row) 12px 24px);
  border:1px dashed var(--chip);border-radius:2px;padding:16px;text-align:center;font-family:var(--disp);font-size:14px;color:var(--stone)}
.ph-tall{aspect-ratio:23/24}
.who .ph{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:var(--on-dark-bright)}

.steps{background:var(--sand)}
.steps ol{list-style:none;margin:34px 0 0;padding:0}
.steps li{display:flex;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.num{flex:0 0 38px;height:38px;border-radius:50%;background:var(--main);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.home .steps h3{margin-bottom:3px}
.steps p{margin:0;font-size:16.5px;color:var(--muted)}
.home .steps .more,.home .reviews .more{margin:24px 0 0;font-size:16.5px}

.gear{border-top:1px solid var(--line-soft)}
.mat-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 28px;padding:0;list-style:none}
.mat-highlights li{background:var(--card);border:1px solid var(--line-soft);border-radius:3px;padding:20px}
.mat-highlights img{margin:-20px -20px 16px;width:calc(100% + 40px);max-width:none;aspect-ratio:4/3;object-fit:cover;border-radius:3px 3px 0 0;background:var(--line-soft)}
.home .mat-highlights h3{font-size:18.5px}
.mat-highlights h3 a{text-decoration:none;color:var(--dark)}
.mat-highlights h3 a:hover{text-decoration:underline}
.mat-highlights p{font-size:16px;color:var(--muted);margin:0}
@media(max-width:760px){.mat-highlights{grid-template-columns:1fr}}

.reviews{border-top:1px solid var(--line-soft)}
.quotes{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.quotes li{background:var(--card);border:1px solid var(--line-soft);padding:22px}
.quotes blockquote{margin:0}
.quotes blockquote p{font-size:17px;margin:0 0 12px}
.who-said{font-family:var(--disp);font-size:14px;color:var(--stone);margin:0}

.area .inner{padding-bottom:56px}
.arealist{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none;font-family:var(--disp);font-size:15px}
.arealist li{border:1px solid var(--chip);padding:7px 13px;border-radius:2px;background:var(--card)}
.zipcheck{margin-top:30px;max-width:460px}
.zipcheck label{display:block;font-family:var(--disp);font-weight:600;font-size:15px;margin-bottom:6px}
.zip-row{display:flex;gap:8px}
.zip-row input{flex:1;min-width:0;font-family:var(--serif);font-size:17px;padding:11px 13px;border:1.5px solid var(--line-input);border-radius:2px;background:var(--card);color:var(--ink)}
.zip-result{font-family:var(--disp);font-size:15px;margin:10px 0 0;min-height:1.4em}
.zip-result[data-state="yes"]{color:var(--link);font-weight:600}
.zip-result[data-state="invalid"]{color:var(--err)}

.quote{background:var(--sand);border-top:1px solid var(--line)}
.quote .inner{padding-top:62px;padding-bottom:62px}
.quote form{margin-top:30px;max-width:640px}

.book{background:var(--dark);color:#fff;text-align:center}
.book .inner{padding-top:70px;padding-bottom:70px}
.home .book h2{color:#fff;max-width:20ch;margin-left:auto;margin-right:auto}
.home .book p{color:var(--on-dark);margin-left:auto;margin-right:auto;max-width:44ch}
.book .cta{justify-content:center;margin-top:26px}
.book p a{color:#fff}

/* ---------- inner pages ---------- */
.page-head{background:var(--dark);color:#fff;padding:52px 0 44px}
.page-head h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(32px,5.5vw,50px);line-height:1;margin:0 0 14px}
.page-head p{margin:0;color:var(--on-dark);font-size:16px;max-width:60ch}
.page-main{padding:44px 0 60px}
.page-main h2{font-weight:600;font-size:19px;letter-spacing:-.01em;margin:34px 0 10px;color:var(--link);scroll-margin-top:84px}
.page-main h2 .n{color:var(--stone);font-weight:500;margin-right:8px}
.page-main h3{font-size:17px;font-weight:600;margin:0 0 4px}
.intro{background:var(--sand);border-left:3px solid var(--main);padding:18px 20px;margin:0 0 30px;font-size:16px}
.intro p{margin:0}
.callout{background:var(--sand);border-left:3px solid var(--main);padding:18px 20px;margin:26px 0;font-size:16px}
.callout p{margin:0}
.callout p+p{margin-top:10px}
.updated{font-family:var(--disp);font-size:14px;color:var(--stone);border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.contact{margin-top:44px;border-top:1px solid var(--line);padding-top:22px;font-size:16px}
.fine{margin-top:30px;font-size:16px;color:var(--stone)}
.page-main .cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none;font-family:var(--disp);font-size:14.5px}
.jump a{display:inline-block;border:1px solid var(--chip);background:var(--card);border-radius:2px;padding:6px 12px;text-decoration:none;color:var(--dark)}
.jump a:hover{border-color:var(--link)}
.checks{list-style:none;margin:12px 0 26px;padding:0;border-top:1px solid var(--line-soft)}
.checks li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--line-soft);font-size:16.5px}
.checks li::before{content:"";position:absolute;left:3px;top:18px;width:15px;height:15px;border:2px solid var(--main);border-radius:3px}
.checks b{font-family:var(--disp);font-weight:600}
.day{list-style:none;margin:14px 0 18px;padding:0}
.day li{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.day li:last-child{border-bottom:1px solid var(--line)}
.day .num{flex:0 0 34px;height:34px;font-size:15px}
.day h3{margin:4px 0 3px}
.day p{margin:0;font-size:16px;color:var(--muted)}
.endcta{background:var(--dark);color:#fff;text-align:center}
.endcta .inner{max-width:760px;margin:0 auto;padding:52px 24px}
.endcta h2{color:#fff;font-family:var(--disp);font-size:clamp(26px,4vw,36px);font-weight:800;margin:0 0 12px}
.endcta p{color:var(--on-dark);margin:0 auto;max-width:44ch}
.endcta .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0}

/* ---------- Prices page ---------- */
.ptable{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:16.5px}
.ptable th{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--stone);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:0 0 9px;border-bottom:1px solid var(--line)}
.ptable th.r{text-align:right}
.ptable td{padding:13px 0;border-bottom:1px solid var(--row);vertical-align:top}
.ptable td.amt{font-family:var(--disp);font-weight:700;text-align:right;white-space:nowrap;color:var(--link);font-size:18px;padding-left:16px}
.ptable tr.hi td{background:var(--row-hi)}
.ptable .sm{display:block;font-size:14.5px;color:var(--stone);margin-top:3px}
.sub-intro{font-size:16px;color:var(--stone);margin:0 0 6px}
.calc-link{font-family:var(--disp);font-size:15px;font-weight:600;margin:0 0 30px}

/* ---------- calculators ---------- */
/* The tabs share the row in equal columns, a long name wrapping inside its own tab: the four
   sample calculators sit four across on a computer and two by two on a phone, instead of one
   tab dropping to a line of its own. Each tab carries its share of the line underneath. */
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin:0 0 30px}
.tabs button{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.25;background:none;border:0;border-bottom:1.5px solid var(--line);
  box-shadow:inset 0 -1.5px 0 transparent;padding:12px 14px;min-height:48px;color:var(--stone);cursor:pointer}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--dark);border-bottom-color:var(--link);box-shadow:inset 0 -1.5px 0 var(--link)}
@media(max-width:520px){.tabs button{padding:10px;font-size:15.5px}}
.restored{font-family:var(--disp);font-size:15px;background:var(--sand);border-left:3px solid var(--main);padding:10px 14px;margin:0 0 26px}
.restored .linklike{margin-left:6px}
.calc{scroll-margin-top:84px}
.no-js .calc+.calc{border-top:1px solid var(--line);margin-top:48px;padding-top:34px}
.page-main .calc-h{font-size:clamp(22px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.calc>.help{font-size:16px;color:var(--stone);margin:0 0 26px;max-width:58ch}
.no-js .calc .q,.no-js .calc .total{display:none}   /* nothing can add them up without JavaScript */
.q{margin:0 0 28px;padding:0;border:0;min-width:0}
/* A question is a heading (a number to type) or a legend (a group of choices); .calc keeps both
   looking the same, out of reach of the heading styles each font gives h3. */
.calc .qh{display:flex;align-items:baseline;gap:8px;font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.01em;text-transform:none;font-size-adjust:none;color:var(--link);margin:0 0 6px;padding:0}
.qh .n{color:var(--stone);font-weight:500}
.qh .hint,.lbl .hint{font-family:var(--serif);font-weight:400;color:var(--stone);font-size:14.5px}
.q .help{font-size:16px;color:var(--stone);margin:0 0 14px;max-width:58ch}
.stepper{display:inline-flex;align-items:stretch;background:var(--card);border:1.5px solid var(--line-input);border-radius:3px}
.stepper input{width:72px;height:50px;margin:0;padding:0;border:0;border-left:1.5px solid var(--line-soft);border-right:1.5px solid var(--line-soft);border-radius:0;background:var(--card);text-align:center;
  font-family:var(--disp);font-size:21px;font-weight:700;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--main)}
.stepper button{width:50px;height:50px;padding:0;border:0;background:transparent;color:var(--link);cursor:pointer;display:grid;place-items:center}
.stepper button:hover:not(:disabled){background:var(--tint)}
.stepper button:disabled{color:var(--faint);cursor:not-allowed}
.measure{width:100%;max-width:260px;font-family:var(--disp);font-size:21px;font-weight:700;color:var(--ink);background:var(--card);border:1.5px solid var(--line-input);border-radius:2px;padding:10px 13px}
.measure:focus{border-color:var(--link);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.lw{margin:10px 0 0;font-size:16px}
.lw summary{cursor:pointer;color:var(--link);font-family:var(--disp);font-weight:600;font-size:15px;min-height:32px}
.lw .row2{margin-top:14px;max-width:540px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1.5px solid var(--line-input);border-radius:3px;padding:12px 14px;cursor:pointer;font-size:16px}
.opt:hover{border-color:var(--link)}
.opt input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--link)}
.opt:has(input:checked){border-color:var(--link);box-shadow:inset 0 0 0 1px var(--main);background:#FDFCF8}
.opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.opt b{font-family:var(--disp);font-weight:600}
.opt .price{font-family:var(--disp);font-size:14.5px;color:var(--stone);white-space:nowrap}
.opt .sub{display:block;font-size:15px;color:var(--stone);margin-top:2px}
.about-mats{font-size:15px;color:var(--stone);margin:10px 0 0}

.total{background:var(--dark);color:#fff;padding:24px 24px 22px;margin:34px 0 0;border-radius:3px}
.total .lbl{font-family:var(--disp);color:var(--on-dark);font-size:13.5px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}
.total .amt{font-family:var(--disp);font-weight:800;font-size:clamp(46px,8vw,62px);letter-spacing:-.03em;line-height:1;margin:0 0 16px}
.total ul{list-style:none;margin:0 0 16px;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.18);font-family:var(--disp);font-size:15.5px}
.total>ul li{display:flex;justify-content:space-between;gap:16px;padding:4px 0;color:var(--on-dark-bright)}
.total>ul li span:last-child{white-space:nowrap}
.total .recurring{margin-top:-4px}
.total .recurring li{font-weight:600;color:#fff}
.total .first-year{font-family:var(--disp);font-size:15.5px;color:var(--on-dark-bright);margin:-4px 0 16px}
.total .first-year:empty{display:none}
.total .note{font-size:15px;color:var(--on-dark);margin:0 0 18px;max-width:56ch}
.total .cta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.total .or{font-family:var(--disp);font-size:15px;color:var(--on-dark)}
.total .or a{color:#fff;font-weight:600}
.total .reqmat{margin:14px 0 0;font-family:var(--disp);font-size:15px}
.total .linklike{color:#fff}
.nojs-note{background:var(--sand);border-left:3px solid var(--main);padding:14px 18px;font-size:16px;margin:10px 0 0}

.handoff{margin:20px 0 0;padding:16px 18px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);border-radius:3px}
.handoff .h-status{font-family:var(--disp);font-weight:700;font-size:16.5px;color:#fff;margin:0 0 12px}
.handoff .h-status:focus{outline:none}
.handoff label{display:block;font-family:var(--disp);font-size:13.5px;color:var(--on-dark);text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}
.handoff textarea{width:100%;min-height:0;resize:none;font-family:var(--disp);font-size:15.5px;line-height:1.45;color:var(--ink);background:var(--card);border:0;border-radius:2px;padding:10px 12px;margin:0 0 14px}
.handoff ol{margin:0 0 16px;padding-left:22px;color:var(--on-dark-bright);font-size:15.5px}
.handoff ol li{margin-bottom:5px}
.handoff .h-cta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.handoff .h-copy{background:none;border:0;padding:6px 0;font-family:var(--disp);font-weight:600;font-size:15px;color:#fff;text-decoration:underline;cursor:pointer}

/* ---------- "Next opening" line (always on a dark panel) ---------- */
.openings{display:flex;align-items:center;gap:10px;min-height:24px;margin:18px 0 0;font-family:var(--disp);font-size:15px;font-weight:600;line-height:1.35;color:#fff;visibility:hidden}
.openings[data-state="ready"]{visibility:visible}
.openings a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.openings a:hover{text-decoration-color:#fff}
.openings .live{flex:none;width:9px;height:9px;border-radius:50%;background:#7FD3A8;box-shadow:0 0 0 3px rgba(127,211,168,.25)}
.book .openings,.endcta .openings{justify-content:center;margin-top:20px}

/* ---------- forms ---------- */
.send-sec{border-top:1px solid var(--line);margin-top:48px;padding-top:34px;scroll-margin-top:70px}
.page-main .send-sec h2{font-size:clamp(22px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.send-sec>.help{font-size:16px;color:var(--stone);margin:0 0 24px;max-width:58ch}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px}
.field .hint{font-family:var(--serif);font-weight:400;color:var(--stone);font-size:14.5px}
.field input,.field select,.field textarea{width:100%;font-family:var(--serif);font-size:17px;color:var(--ink);background:var(--card);border:1.5px solid var(--line-input);border-radius:2px;padding:12px 13px}
.field input[type=file]{padding:10px;font-size:15px}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%235C655F' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--link);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.field .note{display:block;font-family:var(--serif);font-size:14.5px;color:var(--stone);margin-top:6px;line-height:1.45}
.field .err{display:none;font-family:var(--disp);font-size:14px;color:var(--err);margin-top:6px}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--err);background:#FFF8F6}
.field[data-invalid="true"] .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.row2{grid-template-columns:1fr;gap:0}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formtop{display:none;border-left:3px solid var(--err);background:var(--err-bg);padding:12px 14px;margin-bottom:22px;font-family:var(--disp);font-size:15px;color:var(--err-ink)}
.formtop[data-show="true"]{display:block}
.send{margin-top:6px}
.send[disabled]{opacity:.75;cursor:progress}
.send .spin{display:none;width:15px;height:15px;margin:0 9px -2px 0;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.send[aria-busy="true"] .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.formstatus{display:none;margin:18px 0 0;padding:12px 14px;max-width:640px;font-family:var(--disp);font-size:15px;line-height:1.45}
.formstatus[data-kind]{display:block}
.formstatus[data-kind="error"],.formstatus[data-kind="timeout"]{border-left:3px solid var(--err);background:var(--err-bg);color:var(--err-ink)}
.formstatus[data-kind="blocked"]{border-left:3px solid var(--accent);background:var(--warn-bg);color:var(--warn-ink)}
.formstatus a{color:inherit;font-weight:700}
.smallprint{font-size:15px;color:var(--stone);margin-top:16px;max-width:52ch}

/* photo picker */
.photos{margin:0 0 26px}
.photos .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.photos .head b{font-family:var(--disp);font-weight:600;font-size:15px}
.photos .head span{font-family:var(--disp);font-size:14px;color:var(--stone)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.tiles:empty{display:none}
.tile{position:relative;aspect-ratio:1/1;background:var(--line-soft);border-radius:3px;overflow:hidden}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.tile.busy{display:grid;place-items:center}
.tile .wheel{width:24px;height:24px;border:2.5px solid rgba(0,0,0,.18);border-top-color:var(--link);border-radius:50%;animation:spin .8s linear infinite}
.tile .rm{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-end}
.tile .rm span{margin:6px;width:26px;height:26px;border-radius:50%;background:rgba(20,24,27,.82);color:#fff;display:grid;place-items:center}
.addphoto{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px dashed var(--main);border-radius:3px;background:var(--card);cursor:pointer;font-family:var(--disp)}
.addphoto:hover{background:var(--tint)}
.addphoto .ico{flex:0 0 44px;height:44px;border-radius:50%;background:var(--main);color:#fff;display:grid;place-items:center}
.addphoto b{display:block;font-weight:600;font-size:16px;color:var(--ink)}
.addphoto small{display:block;font-family:var(--serif);font-size:14.5px;color:var(--stone);line-height:1.4}
.vh:focus-visible+.addphoto{outline:3px solid var(--accent);outline-offset:2px}
.photo-msg{font-family:var(--disp);font-size:14.5px;color:var(--stone);margin:8px 0 0}
.photo-msg:empty{display:none}
@media(max-width:480px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Materials page ---------- */
.mat-cat{scroll-margin-top:84px}
.mat-cat>.help{font-size:16px;color:var(--stone);margin:0 0 14px;max-width:58ch}
.mats{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line-soft)}
.mat{display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:84px}
.mat:target{background:var(--row-hi);box-shadow:-12px 0 0 var(--row-hi),12px 0 0 var(--row-hi)}
.mat img{grid-column:1 / -1;width:100%;max-width:360px;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:var(--line-soft)}
.mat-body p{margin:0 0 6px;font-size:16px}
.mat .maker{font-family:var(--disp);font-size:14px;color:var(--stone)}
.mat .used{color:var(--muted);font-size:15.5px}
.mat .used b{font-family:var(--disp);font-weight:600}
.mat .mprice{font-family:var(--disp);font-weight:700;color:var(--link);font-size:17px;margin-top:4px}
.mat .mprice span{font-weight:500;font-size:14.5px;color:var(--stone)}
.mat-inc{font-family:var(--disp);font-size:13.5px;color:var(--stone);max-width:15ch;text-align:right;margin:2px 0 0}
.btn-add{background:var(--card);color:var(--link);border:1.5px solid var(--main);padding:9px 14px;font-size:14.5px;white-space:nowrap}
.btn-add:hover{background:var(--row-hi)}
.btn-add .when-on,.btn-add[aria-pressed="true"] .when-off{display:none}
.btn-add[aria-pressed="true"] .when-on{display:inline}
.btn-add[aria-pressed="true"]{background:var(--main);color:#fff}
.btn-add[aria-pressed="true"]::before{content:"✓ "}
@media(max-width:520px){.mat{grid-template-columns:1fr}.mat-inc{text-align:left;max-width:none}.btn-add{justify-self:start}}
.req{background:var(--card);border:1.5px solid var(--line-input);border-radius:3px;padding:16px 18px;margin:0 0 22px}
.req-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--disp);font-size:15px;margin-bottom:8px}
.req-head span{color:var(--stone)}
.req-empty{font-size:15.5px;color:var(--stone);margin:0}
.req-job{font-size:15.5px;color:var(--muted);margin:0 0 6px}
.req-list{list-style:none;margin:0;padding:0}
.req-item{display:grid;grid-template-columns:1fr 170px auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--row)}
.req-item:first-child{border-top:0}
.req-name{font-family:var(--disp);font-weight:600;font-size:15.5px}
.req-qty input{width:100%;font-family:var(--serif);font-size:16px;padding:8px 10px;border:1.5px solid var(--line-input);border-radius:2px;background:var(--card);color:var(--ink)}
.req-qty input:focus{border-color:var(--link);outline:none}
.req-rm{font-family:var(--disp);font-size:14.5px;min-height:36px}
@media(max-width:520px){.req-item{grid-template-columns:1fr auto}.req-qty{grid-column:1 / -1;grid-row:2}}

/* ---------- footer ---------- */
.foot{background:var(--footer);color:var(--footer-text);font-family:var(--disp);font-size:14.5px}
.foot .inner{padding-top:40px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.foot b{color:#fff;font-weight:600;display:block;margin-bottom:6px;font-size:15.5px}
.foot a,.foot .linklike{color:var(--on-dark-soft);text-decoration:none;display:inline-block;padding:2px 0;font-weight:500}
.foot a:hover,.foot .linklike:hover{text-decoration:underline}
.foot .fsub{margin-top:18px}
.foot .flinks{list-style:none;margin:0;padding:0}
.foot .flinks a{display:inline-flex;align-items:center;gap:8px;min-height:28px}
.foot .flinks svg{flex:none;fill:currentColor}
.foot .fmark{display:block;margin-bottom:12px;line-height:0}
.foot .fmark img,.foot .fmark svg{width:64px;height:64px}
.foot .base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;padding-bottom:28px;font-size:13.5px}

/* ---------- optional parts: emergency call bar, cookie banner ---------- */
.callbar{display:none}
@media(max-width:760px){
  .has-callbar{padding-bottom:72px}
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px;background:var(--dark);box-shadow:0 -4px 16px rgba(0,0,0,.2)}
  .callbar .btn{display:block;width:100%}
}
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:18px}
.consent p{font-size:15.5px;margin:0 0 12px}
.consent .actions{display:flex;flex-wrap:wrap;gap:10px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.send .spin,.tile .wheel{animation:none}}

/* ---------- color looks (features.json colorLooks; normally the sample site only) ---------- */
.looks-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 26px}
.looks-status{margin:0;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--link);min-height:1.4em}
.looks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px}
.look{display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.look-text{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px}
.page-main .look-text h2{margin:0;font-size:21px;font-weight:700;color:var(--link)}
.look-text p{margin:0;font-size:16px}
.look-from{font-family:var(--disp);font-size:14px;color:var(--stone)}
.look-mine{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--sand);color:var(--ink);font-size:12.5px;font-weight:600}
.look .btn{align-self:flex-start;margin-top:auto}
.swatches{list-style:none;margin:4px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-family:var(--disp);font-size:13px;color:var(--stone)}
.swatches li{display:flex;flex-direction:column;gap:4px;line-height:1.25}
.sw{display:block;height:26px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.sw-dark{background:var(--dark)}.sw-main{background:var(--main)}.sw-accent{background:var(--accent)}
.sw-paper{background:var(--paper)}.sw-sand{background:var(--sand)}.sw-footer{background:var(--footer)}
.looks-own{margin:30px 0 0;font-size:16px;color:var(--muted)}
.try-styles{margin:48px 0 0}
.page-main .try-styles h2{font-size:clamp(22px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.try-styles>p{font-size:16px;color:var(--muted);max-width:60ch}
.style-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px;margin:18px 0 0}
.page-main .style-groups h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);margin:0 0 8px}
.style-list{list-style:none;margin:0;padding:0}
.style-list li{padding:12px 0;border-top:1px solid var(--line-soft);font-size:16px;color:var(--muted)}
.style-list a{font-family:var(--disp);font-size:17px;margin-right:6px}
.style-reset{font-family:var(--disp);font-weight:600;font-size:15.5px;margin:18px 0 0}
html[data-format="seamless"] .style-list li{border-top-color:transparent;background:var(--card);border-radius:12px;padding:12px 16px;margin-bottom:8px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
/* a small drawing of the site in each look */
.look-demo{background:var(--paper);border-bottom:1px solid var(--line)}
.ld-top{position:relative;display:flex;flex-direction:column;gap:7px;padding:0 16px 34px;
  background:radial-gradient(120% 90% at 78% 8%,var(--glow) 0%,var(--glow-end) 62%),linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}
.ld-bar{display:block;height:14px;margin:0 -16px 8px;background:var(--dark);border-bottom:1px solid rgba(255,255,255,.1)}
.ld-h{display:block;height:11px;width:78%;border-radius:2px;background:#fff}
.ld-h.short{width:52%}
.ld-btns{display:flex;gap:8px;margin-top:6px}
.ld-gold,.ld-light{display:block;width:62px;height:18px;border-radius:3px}
.ld-gold{background:var(--accent)}.ld-light{background:var(--paper)}
.ld-ridge{position:absolute;left:0;right:0;bottom:-1px;height:18px;background:var(--ridge);
  clip-path:polygon(0 100%,0 70%,20% 55%,28% 20%,34% 45%,40% 0,47% 40%,55% 25%,63% 60%,80% 55%,100% 70%,100% 100%)}
.ld-ridge::after{content:"";position:absolute;inset:0;background:var(--paper);
  clip-path:polygon(0 100%,0 88%,22% 80%,30% 55%,36% 72%,42% 40%,49% 66%,57% 58%,65% 80%,82% 78%,100% 86%,100% 100%)}
.ld-page,.ld-sand,.ld-foot{display:flex;flex-direction:column;gap:6px;padding:11px 16px}
.ld-sand{background:var(--sand)}
.ld-foot{background:var(--footer)}
.ld-h2{display:block;height:9px;width:46%;border-radius:2px;background:var(--main)}
.ld-p{display:block;height:6px;width:90%;border-radius:2px;background:var(--ink);opacity:.35}
.ld-p.short{width:64%}
.ld-foot .ld-p{width:50%;background:var(--footer-text);opacity:.8}
/* on other pages while a look is being tried */
.look-note-box{position:fixed;left:12px;bottom:12px;z-index:60}
.look-note{display:block;padding:8px 14px;border-radius:999px;background:var(--dark);color:#fff;
  font-family:var(--disp);font-size:14px;font-weight:600;text-underline-offset:3px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.look-note:hover{background:var(--main)}
@media(max-width:760px){.has-callbar .look-note-box{bottom:78px}}

/* ====================== font and layout options ======================
   site.json > style > font and format. On a site with the Color looks page, a visitor can
   also try them (?font= &format=, kept by early.js until the tab is closed).
   A font file is only downloaded by visitors when its option is chosen. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/oswald-latin.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:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/oswald-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Fraunces: a warm, soft serif for headings and buttons, with Source Serif for reading */
html[data-font="fraunces"]{--disp:"Fraunces",Georgia,"Times New Roman",serif}
html[data-font="fraunces"] :is(h1,h2,h3){letter-spacing:-.012em;font-variation-settings:"SOFT" 100,"WONK" 0}
html[data-font="fraunces"] .hero h1{font-weight:800;line-height:1.02}
html[data-font="fraunces"] :is(.btn,.bar .name,.tabs button,.jump a,.qh,.svc .tick,.eyebrow){letter-spacing:0}

/* Oswald: tall, bold letters, with Archivo for reading */
html[data-font="oswald"]{--disp:"Oswald","Arial Narrow",Arial,sans-serif;--serif:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif}
html[data-font="oswald"] :is(h1,h2,h3){letter-spacing:.005em;text-transform:uppercase;font-weight:700}
html[data-font="oswald"] .hero h1{font-size:clamp(40px,6.4vw,70px);line-height:1}
html[data-font="oswald"] .hero h1 .where{text-transform:none;font-weight:500;letter-spacing:.01em}
html[data-font="oswald"] :is(.btn,.tabs button,.jump a){text-transform:uppercase;letter-spacing:.04em;font-weight:600}
html[data-font="oswald"] body{font-size:16.5px}

/* More fonts (2026-09-30). Each is only downloaded by visitors when its option is chosen. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/playfair-latin.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:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/playfair-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-latin.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:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage-latin.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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin.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:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url(../fonts/josefin-latin.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:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url(../fonts/josefin-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/caveat-latin.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:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/caveat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Playfair Display: an elegant, high-contrast serif, like a restaurant menu or a boutique */
html[data-font="playfair"]{--disp:"Playfair Display",Georgia,"Times New Roman",serif}
html[data-font="playfair"] :is(h1,h2,h3){font-weight:800;letter-spacing:-.01em}
html[data-font="playfair"] .hero h1{line-height:1.04}
html[data-font="playfair"] :is(.btn,.bar .name,.tabs button,.jump a,.qh,.svc .tick,.eyebrow){letter-spacing:0}

/* Space Grotesk: modern and techy, with Archivo for reading */
html[data-font="space"]{--disp:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--serif:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif}
html[data-font="space"] :is(h1,h2,h3){font-weight:700;letter-spacing:-.025em}
html[data-font="space"] body{font-size:16.5px}

/* Bricolage Grotesque: bold and characterful, with Source Serif for reading */
html[data-font="bricolage"]{--disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif}
html[data-font="bricolage"] :is(h1,h2,h3){font-weight:800;letter-spacing:-.03em}
html[data-font="bricolage"] .hero h1{line-height:.98}

/* Nunito: round and friendly, for headings and reading */
html[data-font="nunito"]{--disp:"Nunito","Helvetica Neue",Arial,sans-serif;--serif:"Nunito","Helvetica Neue",Arial,sans-serif}
html[data-font="nunito"] :is(h1,h2,h3){font-weight:900;letter-spacing:-.015em}
html[data-font="nunito"] body{font-size:17.5px}

/* Josefin Sans: vintage, art deco capitals for headings only (its letters sit high, so
   buttons and labels keep Archivo) */
html[data-font="josefin"] :is(h1,h2,h3){font-family:"Josefin Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
html[data-font="josefin"] .hero h1 .where{text-transform:none;letter-spacing:0}

/* Caveat: handwritten headings only, made a bit bigger (font-size-adjust) so they read as
   easily as the others; buttons and labels keep Archivo */
html[data-font="caveat"] :is(h1,h2,h3){font-family:"Caveat","Comic Sans MS",cursive;font-weight:700;letter-spacing:0;font-size-adjust:.52}
html[data-font="caveat"] .hero h1 .where{font-family:var(--disp);font-size-adjust:none}

/* Seamless: no boxes or hard lines. The top of the home page (video or picture) fades into
   the page, sections blend into each other, and the dark bands fade in from the page color.
   Words always sit on the solid part of each fade, never on the see-through part, so the
   color check in lib/theme.js still holds. */
html[data-format="seamless"] .btn{border-radius:10px}
html[data-format="seamless"] .hero .ridge{display:none}
html[data-format="seamless"] .hero .inner{padding-bottom:190px}
html[data-format="seamless"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--paper));pointer-events:none}
@media(max-width:760px){html[data-format="seamless"] .hero .inner{padding-bottom:150px}html[data-format="seamless"] .hero::after{height:110px}}
html[data-format="seamless"] .svc{background:transparent;border:0;gap:18px}
html[data-format="seamless"] .svc>div{background:var(--card);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.06)}
html[data-format="seamless"] .who{background:linear-gradient(to bottom,var(--paper) 0,var(--main) 130px,var(--main) calc(100% - 130px),var(--paper) 100%)}
html[data-format="seamless"] .who .inner{padding-top:170px;padding-bottom:170px}
html[data-format="seamless"] .creds-dark{background:transparent;border:0;gap:10px}
html[data-format="seamless"] .creds-dark>div{border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
html[data-format="seamless"] :is(.who img,.featfig img,.ph){border:0;border-radius:14px}
html[data-format="seamless"] :is(.steps,.quote,.examples){border-top:0;background:linear-gradient(to bottom,var(--paper),var(--sand) 110px,var(--sand) calc(100% - 110px),var(--paper))}
html[data-format="seamless"] :is(.steps .inner,.quote .inner,.examples .inner){padding-top:110px;padding-bottom:110px}
html[data-format="seamless"] :is(.steps li,.steps li:last-child,.day li,.day li:last-child){border-color:transparent}
html[data-format="seamless"] :is(.gear,.reviews){border-top:0}
html[data-format="seamless"] :is(.quotes li,.mat-highlights li,.example){border:0;border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.07)}
html[data-format="seamless"] .arealist li{border:0;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.07)}
html[data-format="seamless"] .book{background:linear-gradient(to bottom,var(--paper) 0,var(--dark) 170px,var(--dark) calc(100% - 140px),var(--footer) 100%)}
html[data-format="seamless"] .book .inner{padding-top:200px}
html[data-format="seamless"] .page-head{background:linear-gradient(to bottom,var(--dark) 0,var(--dark) calc(100% - 100px),var(--paper) 100%);padding-bottom:120px}
html[data-format="seamless"] .endcta{background:linear-gradient(to bottom,var(--paper) 0,var(--dark) 150px,var(--dark) calc(100% - 120px),var(--footer) 100%)}
html[data-format="seamless"] .endcta .inner{padding-top:180px}
html[data-format="seamless"] :is(.intro,.callout,.restored,.nojs-note){border-left:0;border-radius:14px}
html[data-format="seamless"] :is(.updated,.contact,.send-sec,.checks,.checks li,.mats,.mat){border-color:transparent}
html[data-format="seamless"] .ptable td{border-bottom-color:transparent}
html[data-format="seamless"] .ptable tbody tr:nth-child(odd) td{background:rgba(255,255,255,.7)}
html[data-format="seamless"] .ptable tbody tr.hi td{background:var(--row-hi)}
html[data-format="seamless"] .ptable td:first-child{border-radius:10px 0 0 10px;padding-left:12px}
html[data-format="seamless"] .ptable td:last-child{border-radius:0 10px 10px 0;padding-right:12px}
html[data-format="seamless"] .ptable th{border-bottom:0;padding-left:12px;padding-right:12px}
html[data-format="seamless"] .tabs{border-bottom:0;gap:6px}
html[data-format="seamless"] .tabs button{border-bottom:0;box-shadow:none;border-radius:22px;margin:0;min-height:44px;padding:10px 12px}
html[data-format="seamless"] .tabs button[aria-selected="true"]{background:var(--main);color:#fff}
html[data-format="seamless"] :is(.jump a,.opt,.stepper,.req,.addphoto,.look){border-radius:12px}
html[data-format="seamless"] .jump a{border:0;box-shadow:0 4px 14px rgba(0,0,0,.07)}
html[data-format="seamless"] .look{border:0;box-shadow:0 14px 34px rgba(0,0,0,.08)}
html[data-format="seamless"] :is(.total,.handoff){border-radius:18px}
html[data-format="seamless"] .foot .base{border-top-color:transparent}
/* A page that ends without a dark band (terms, privacy, color looks): the footer fades in
   from the page too. The footer's words sit below the fade. */
html[data-format="seamless"] main:not(:has(>.book:last-child))+.foot{background:linear-gradient(to bottom,var(--paper) 0,var(--footer) 130px)}
html[data-format="seamless"] main:not(:has(>.book:last-child))+.foot .inner{padding-top:160px}

/* ---------- Motion styles (site.json › style › motion; assets/js/motion.js) ----------
   The background video drives the whole home page, top bar included. Each style has a still
   version made of CSS alone, for browsers without JavaScript, visitors who ask for less
   motion and phones. motion.js adds .motion-live when a style's script runs. */
.cues,.scroll-hint,.vwin{display:none}
.motion-canvas,.flow-shape{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.flow-shape path{fill:var(--flow-shape,var(--flow-1-soft,var(--sand)))}
@media print{.motion-canvas,.flow-shape,.vwin{display:none!important}}

/* The video behind the whole page: Scene change. The shade that keeps the headline readable
   covers the top of the page only, so the gaps between sections show the video clearly. */
html[data-motion="scenes"] .home .hero{background:transparent;min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center}
html[data-motion="scenes"] .home .hero::before{content:"";position:absolute;inset:0;background:var(--video-shade);opacity:var(--video-shade-opacity)}
html[data-motion="scenes"] .home .hero::after{content:none}
html[data-motion="scenes"] .home .hero .ridge{display:none}
html[data-motion="scenes"] .home .hero .inner{padding-top:60px;padding-bottom:90px}
html[data-motion="scenes"] .home .hero-media{position:fixed;inset:0;z-index:-1}
html[data-motion="scenes"] .home .hero-media::after{content:none}
/* The video keeps playing all the way down, so its Pause button stays on screen too. */
html[data-motion="scenes"] .home .hero-pause{position:fixed;top:auto;bottom:16px;right:16px;z-index:45}

/* Scene change: every section floats on frosted glass over the video, with
   gaps where it shows. 92% of the page color keeps every word readable over any frame. */
html[data-motion="scenes"] .home main>section{background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);border:0;margin:3vh clamp(8px,2vw,28px);border-radius:26px;-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.28)}
/* The dark bands stay solid: their small light text needs every bit of the dark behind it. */
html[data-motion="scenes"] .home main>section.who{background:var(--main)}
html[data-motion="scenes"] .home main>section.book{background:var(--dark);margin-bottom:0;border-radius:26px 26px 0 0}
html[data-motion="scenes"] .home main>section .inner{padding-top:64px;padding-bottom:64px}
html[data-motion="scenes"] .home .vwin{display:block;height:34vh}

/* The top bar takes the color under it (Scene change, Color flow). */
:is(html[data-motion="scenes"],html[data-motion="flow"]).motion-live .home .bar{background:var(--bar-bg,var(--dark));transition:background-color .5s ease}

/* Color flow: the page and a big soft shape behind it take the video's colors in order
   (motion/flow.js); sections are see-through except the dark bands. Without JavaScript,
   each section simply has its own color from the video. */
html[data-motion="flow"] .home{background:var(--flow-bg,var(--flow-1-pale,var(--paper)))}
html[data-motion="flow"] .home main>section{background:transparent;border-color:transparent}
html[data-motion="flow"] .home main>section.who{background:linear-gradient(to bottom,transparent 0,var(--main) 130px,var(--main) calc(100% - 130px),transparent 100%)}
html[data-motion="flow"] .home main>section.book{background:linear-gradient(to bottom,transparent 0,var(--dark) 170px,var(--dark) calc(100% - 140px),var(--footer) 100%)}
html[data-motion="flow"] .home .hero::after{background:linear-gradient(to bottom,rgba(0,0,0,0),var(--flow-bg,var(--flow-1-pale,var(--paper))))}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+1):not(.who,.book){background:var(--flow-1-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+2):not(.who,.book){background:var(--flow-2-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+3):not(.who,.book){background:var(--flow-3-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+4):not(.who,.book){background:var(--flow-4-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n):not(.who,.book){background:var(--flow-5-pale,transparent)}

/* Keyhole: the top of the page is pinned while the video opens from a keyhole and plays
   with the scroll (motion/keyhole.js). Without it, the normal top of the page. */
html.motion-live[data-motion="keyhole"] .home .hero{height:235vh;overflow:clip}
html.motion-live[data-motion="keyhole"] .home .hero-stage{position:sticky;top:var(--bar-h,64px);height:calc(100vh - var(--bar-h,64px));overflow:hidden}
html.motion-live[data-motion="keyhole"] .home .hero .inner{padding-top:clamp(28px,7vh,74px);padding-bottom:40px}
html.motion-live[data-motion="keyhole"] .home .cues{display:block;position:absolute;right:6%;bottom:14%;margin:0;padding:0;list-style:none;pointer-events:none;z-index:1}
html.motion-live[data-motion="keyhole"] .home .cues li{position:absolute;right:0;bottom:0;white-space:nowrap;opacity:0;font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5)}
html.motion-live[data-motion="keyhole"] .home .scroll-hint{display:block;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);pointer-events:none}
html.motion-live[data-motion="keyhole"] .home .scroll-hint::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:currentColor;opacity:.7}
@media(max-width:760px){html.motion-live[data-motion="keyhole"] .home .cues{display:none}}

/* ---------- Layout character: Normal and Seamless (site.json › style › format) ----------
   Refined 2026-09-30 so the two read differently at a glance.
   Normal: structured. Left-aligned headings with a short accent bar under each, crisp lines
   between sections, square corners, the mountain ridge under the top of the home page.
   Seamless: soft. Centered headings, sections that fade into each other, floating rounded
   cards with soft shadows, pill-shaped buttons. */
html:not([data-format="seamless"]) .home section h2::after{content:"";display:block;width:64px;height:5px;margin-top:14px;background:var(--accent);border-radius:1px}
html:not([data-format="seamless"]) .home .book h2::after{margin-left:auto;margin-right:auto}
html:not([data-format="seamless"]) .home main>section+section{border-top:1px solid var(--line)}
html:not([data-format="seamless"]) .btn{border-radius:2px}
html[data-format="seamless"] .btn{border-radius:999px}
html[data-format="seamless"] :is(.svc>div,.example,.quotes li,.mat-highlights li){border-radius:22px}
html[data-format="seamless"] .home main>section:not(.who,.feature)>.inner>:is(h2,.lead){text-align:center;margin-left:auto;margin-right:auto}
html[data-format="seamless"] .home main>section:not(.who,.feature)>.inner>.lead{max-width:52ch}
html[data-format="seamless"] .home :is(.arealist,.steps .more){justify-content:center;text-align:center}
html[data-format="seamless"] .home .steps ol{max-width:760px;margin-left:auto;margin-right:auto}
html[data-format="seamless"] .home .quote form{margin-left:auto;margin-right:auto}

/* ---------- Style menu: text color, fonts and motion (features.json colorLooks) ----------
   The Style menu in the top bar holds the color looks, a Black text / White text switch,
   every font and the motion styles. The text switch also sits in the bar itself on wider
   screens. A choice lasts until the tab closes (early.js). */
.looks-menu{width:min(360px,calc(100vw - 24px));max-height:var(--menu-room,calc(100vh - 96px));overflow-y:auto;overscroll-behavior:contain}
.looks-menu-group{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.looks-menu .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.looks-menu .pair button{justify-content:center;border:1.5px solid var(--line-input);min-height:40px}
.looks-menu .pair button[aria-pressed="true"]{border-color:var(--link)}
.looks-menu .pair button[aria-pressed="true"]::after{margin-left:4px}
.text-swatch{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.layout-swatch{flex:none;width:22px;height:18px;border:2px solid currentColor}
.layout-swatch.seamless{border-radius:9px;border-color:transparent;background:linear-gradient(to bottom,var(--link),rgba(0,0,0,0));opacity:.85}
.layout-swatch.normal{border-radius:1px;background:linear-gradient(currentColor,currentColor) 4px 5px/12px 2px no-repeat}
.text-swatch.black{background:#FBF8F2;color:#14181B}
.text-swatch.white{background:#14181B;color:#fff}
.looks-menu .fonts{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.looks-menu .fonts button{font-size:16.5px;min-height:40px}
.looks-menu .motion-links{list-style:none;margin:0;padding:0}
.looks-menu .motion-links a{display:flex;align-items:center;min-height:40px;padding:6px 8px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.looks-menu .motion-links a:hover{background:var(--tint)}
.looks-menu .motion-links a[aria-current="true"]{background:var(--sand)}
.looks-menu .motion-links a[aria-current="true"]::after{content:"✓";margin-left:auto;color:var(--link);font-weight:800}
/* each font's name is shown in that font (only downloaded when the menu opens) */
[data-font-pick="fraunces"] span{font-family:"Fraunces",Georgia,serif}
[data-font-pick="archivo"] span{font-family:"Archivo",Arial,sans-serif}
[data-font-pick="oswald"] span{font-family:"Oswald","Arial Narrow",sans-serif}
[data-font-pick="playfair"] span{font-family:"Playfair Display",Georgia,serif}
[data-font-pick="space"] span{font-family:"Space Grotesk",Arial,sans-serif}
[data-font-pick="bricolage"] span{font-family:"Bricolage Grotesque",Arial,sans-serif}
[data-font-pick="nunito"] span{font-family:"Nunito",Arial,sans-serif}
[data-font-pick="josefin"] span{font-family:"Josefin Sans",Arial,sans-serif}
[data-font-pick="caveat"] span{font-family:"Caveat",cursive;font-size:1.25em}
.bar-text{display:inline-flex;align-items:center;gap:7px}
.bar-text .ico{flex:none}
.bar-text[aria-pressed="true"]{border-color:#fff;background:rgba(255,255,255,.14)}
@media(max-width:900px){.bar-text-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bar-text{padding:8px 10px}}
@media(max-width:640px){.bar-text{display:none}.looks-menu .fonts{grid-template-columns:1fr}}

/* ---------- White text version (html[data-text="white"]: the text button) ----------
   Dark pages with light words. The colors (paper, sand, card, ink, muted, stone, link, lines)
   come from lib/night.js, worked out per look and checked in tests/night.test.mjs. */
html[data-text="white"]{color-scheme:dark}
html[data-text="white"] .btn-light{background:#F4F1EC}
html[data-text="white"] :is(.mat-highlights h3 a,.jump a,.tabs button[aria-selected="true"]){color:var(--ink)}
html[data-text="white"] :is(.btn-outline,.btn-add,.addphoto){border-color:var(--link)}
html[data-text="white"] .tabs button[aria-selected="true"]{border-bottom-color:var(--link)}
html[data-text="white"] :is(.intro,.callout,.restored,.nojs-note){border-left-color:var(--link)}
html[data-text="white"] .field[data-invalid="true"] :is(input,select,textarea){background:var(--card)}
html[data-text="white"] .opt:has(input:checked){background:var(--row-hi)}
html[data-text="white"][data-format="seamless"] .ptable tbody tr:nth-child(odd) td{background:var(--row)}
html[data-text="white"] :is(.svc>div,.example,.quotes li,.mat-highlights li){box-shadow:0 14px 34px rgba(0,0,0,.3)}
/* motion styles in white text: the Color flow page uses the dark versions of the
   video's colors (lib/flow.js nsoft, npale) */
html[data-text="white"][data-motion="flow"] .home{background:var(--flow-bg,var(--flow-1-npale,var(--paper)))}
html[data-text="white"][data-motion="flow"] .home .hero::after{background:linear-gradient(to bottom,rgba(0,0,0,0),var(--flow-bg,var(--flow-1-npale,var(--paper))))}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+1):not(.who,.book){background:var(--flow-1-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+2):not(.who,.book){background:var(--flow-2-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+3):not(.who,.book){background:var(--flow-3-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+4):not(.who,.book){background:var(--flow-4-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n):not(.who,.book){background:var(--flow-5-npale,transparent)}
html[data-text="white"] .flow-shape path{fill:var(--flow-shape,var(--flow-1-nsoft,var(--sand)))}

/* ---------- General contractor style (2026-09-30) ----------
   Touches that make the template read as a builder's site in any color look: a safety-stripe
   edge under the top bar, a faint blueprint grid behind the headline, numbered section labels
   like the sheets of a plan set (Normal layout), a strip of plain facts, and trade icons. */
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,var(--dark) 12px 24px)}
.hero .soil::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 85%);mask-image:linear-gradient(to bottom,#000 25%,transparent 85%)}
html:not([data-format="seamless"]) .home main{counter-reset:sheet}
html:not([data-format="seamless"]) .home main>section>.inner>h2::before{counter-increment:sheet;content:counter(sheet,decimal-leading-zero);content:counter(sheet,decimal-leading-zero) / "";
  display:block;margin-bottom:8px;font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--link)}
html:not([data-format="seamless"]) .home main>:is(.who,.book)>.inner>h2::before{color:var(--on-dark-soft)}
.trust{background:var(--dark);color:#fff}
.trust ul{list-style:none;margin:0 auto;padding-top:14px;padding-bottom:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;font-family:var(--disp);font-size:15px;font-weight:600}
.trust li{display:flex;align-items:center;gap:8px}
.trust .trade-icon{width:20px;height:20px;flex:none;color:var(--accent)}
html[data-format="seamless"] .trust{background:transparent;color:var(--ink)}
html[data-format="seamless"] .trust .trade-icon{color:var(--link)}
.trade-icon{display:block}
.svc .trade-icon{color:var(--link);margin-bottom:12px}

/* Recent work on the home page */
.recent-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.recent-card{display:block;height:100%;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden}
.recent-card:hover b,.recent-card:focus-visible b{text-decoration:underline}
.recent-media{display:block;aspect-ratio:16/10;background:var(--sand)}
.recent-media img,.recent-media svg{width:100%;height:100%;object-fit:cover;display:block}
.recent-text{display:block;padding:14px 16px 16px}
.recent-text b{display:block;font-family:var(--disp);font-size:17px;line-height:1.25;color:var(--link)}
.recent-text span{display:block;font-size:15px;color:var(--muted);margin-top:4px}
.home .recent .more{margin:22px 0 0;font-family:var(--disp);font-weight:600}
html[data-format="seamless"] .recent-card{border:0;border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.07)}

/* The Work page: completed jobs, with drawn stand-ins on the sample site */
.work-art{display:block;width:100%;height:100%}
.wa-sky{fill:var(--tint)}.wa-wall{fill:var(--sand)}.wa-dark{fill:var(--dark)}.wa-ground{fill:var(--line-soft)}
.wa-slab{fill:var(--chip)}.wa-sunk{fill:var(--faint)}.wa-roof{fill:var(--main)}.wa-counter{fill:var(--dark)}
.wa-joint{fill:none;stroke:var(--stone);stroke-width:2.5;opacity:.8}
.wa-crack{fill:none;stroke:var(--dark);stroke-width:3}
.wa-wood{fill:var(--accent);opacity:.55}
.wa-plank{fill:none;stroke:var(--dark);stroke-width:2;opacity:.35}
.wa-rail{fill:none;stroke:var(--dark);stroke-width:5}
.wa-post,.wa-beam{fill:none;stroke:var(--dark);stroke-width:8}
.wa-frame{fill:none;stroke:var(--accent);stroke-width:4}
.wa-cab{fill:var(--main);opacity:.85}
.wa-tile{fill:none;stroke:var(--line);stroke-width:2}
.wa-tub{fill:var(--card);stroke:var(--stone);stroke-width:3}
.work-filter{display:flex;flex-wrap:wrap;gap:8px}
.chipbtn{font-family:var(--disp);font-weight:600;font-size:15px;min-height:40px;padding:8px 14px;border:1.5px solid var(--line-input);border-radius:2px;background:var(--card);color:var(--ink);cursor:pointer}
.chipbtn:hover{border-color:var(--link)}
.chipbtn[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
html[data-format="seamless"] .chipbtn{border-radius:999px}
.work-count{font-family:var(--disp);font-size:14px;color:var(--stone);margin:8px 0 18px;min-height:1.4em}
.work-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.job{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--card);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;scroll-margin-top:90px}
@media(max-width:760px){.job{grid-template-columns:1fr}}
.job-media{position:relative;background:var(--sand);min-height:220px}
.job-media img,.job-media .work-art{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.job-text{padding:22px 24px 24px}
.job-tag{font-family:var(--disp);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--link);margin:0 0 6px}
.page-main .job h2{font-size:24px;font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--ink);margin:0 0 4px}
.job-where{font-family:var(--disp);font-size:15px;color:var(--stone);margin:0 0 14px}
.job-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.job-facts div{background:var(--tint);border:1px solid var(--line-soft);border-radius:2px;padding:6px 12px}
.job-facts dt{font-family:var(--disp);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--stone)}
.job-facts dd{margin:0;font-family:var(--disp);font-size:16px;font-weight:700}
.job-text>p:last-child{font-size:16.5px;color:var(--muted);margin:0}
.art-note,.ba-label{position:absolute;left:12px;z-index:1;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--dark);color:#fff;padding:4px 10px;border-radius:2px}
.ba-label{top:12px}.art-note{bottom:12px}
.ba{position:relative;height:100%}
.ba-pane{position:relative;height:100%}
.js .ba-pane.ba-off{display:none}
.ba-switch{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:3px;padding:3px;background:var(--dark);border-radius:3px}
.ba-switch button{min-height:36px;padding:7px 12px;border:0;border-radius:2px;background:transparent;color:#fff;font-family:var(--disp);font-size:14px;font-weight:700;cursor:pointer}
.ba-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.work-permission{font-size:15px;color:var(--stone);margin:26px 0 0}
html[data-format="seamless"] .job{border:0;border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.07)}

/* ---------- Working model on My Koga (src/_data/model.js) ----------
   My Koga's own bar, in its own colors so it never looks like part of the sample business. */
.model-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;padding:9px 16px;background:#FFF1C2;color:#2A1F05;font-family:var(--disp);font-size:14.5px;line-height:1.4}
.model-what{margin:0}
.model-actions{display:flex;flex-wrap:wrap;gap:8px}
.model-actions :is(button,a){display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1.5px solid #2A1F05;border-radius:3px;background:transparent;color:#2A1F05;font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.model-actions [data-model-send]{background:#2A1F05;color:#FFF1C2}
.model-actions :is(button,a):hover{text-decoration:underline}
.model-status{flex-basis:100%;margin:0;text-align:center;font-weight:600}
.model-status:empty{display:none}
.formstatus[data-kind="model"]{border-left:3px solid #2A1F05;background:#FFF1C2;color:#2A1F05}