/* Monalux site design system: shared by every page. Taken from the homepage, which is the master reference. */

/* ================================================================
   HOMEPAGE REDESIGN (Nov 2026), scoped to .hz
   Visual rules taken from the package cards and the links page:
   Instrument Serif headings, Pinyon once per section, Montserrat body,
   italic-serif links with a drawn arrow, left-aligned asymmetric layouts,
   fine rules only where they organise content.
   ================================================================ */
.hz{--pe:#FAF8F5;--kh:#DFDACF;--ta:#A3968D;--dt:#8A7C73;--ca:#4D403A;--le:#262626;
 --serif:"Instrument Serif",Georgia,serif;--script:"Pinyon Script",cursive;--sans:Montserrat,Arial,sans-serif;
 --ease:cubic-bezier(.2,.8,.2,1);--gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));
 position:relative;width:100%;text-align:left;font-family:var(--sans);color:var(--le)}
.hz *{box-sizing:border-box}
:where(.hz) :where(p,h1,h2,ul){margin:0}
.hz h1,.hz h2{text-transform:none;letter-spacing:normal;font-weight:400}
.hz-wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}

/* links: italic serif + drawn arrow (as on the links page) */
.hz-more,.hz-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--le);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .3s ease}
.hz-more{font:italic 400 18px/1 var(--serif)}
.hz-more i,.hz-cta i{position:relative;display:block;flex:none;width:22px;height:9px;transition:width .45s var(--ease)}
.hz-more i::before,.hz-cta i::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor}
.hz-more i::after,.hz-cta i::after{content:"";position:absolute;right:.5px;top:1px;width:6.5px;height:6.5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.hz-more:active i,.hz-cta:active i{width:34px}
@media (hover:hover){.hz-more:hover i,.hz-cta:hover i{width:34px}}
.hz-more:focus-visible,.hz-cta:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* the primary call to action: serif, fine Taupe underline */
.hz-cta{min-height:48px;font:400 26px/1 var(--serif);letter-spacing:-.01em;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--ta);min-height:0;transition:border-color .3s ease}
.hz-cta i{width:24px}
.hz-cta:active{border-color:var(--le)}
@media (hover:hover){.hz-cta:hover{border-color:var(--le)}}

/* ---------- hero ---------- */
.hz-hero{background:var(--pe);overflow:hidden}
.hz-hero-g{display:grid;grid-template-columns:minmax(0,1fr) 54%;grid-template-areas:"t t" "out ph" "lede lede" "acts acts";padding-top:18px;padding-bottom:40px;column-gap:8px}
.hz-hero-t{display:contents}
.hz-h1{grid-area:t;display:flex;flex-direction:column;font-weight:400}
.hz-k{margin-bottom:14px;font:600 9.5px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--dt)}
.hz-h1a{font:400 clamp(54px,16.4vw,66px)/.88 var(--serif);letter-spacing:-.015em;text-transform:uppercase;color:var(--le)}
.hz-h1b{margin-top:8px;font:400 clamp(25px,7.6vw,31px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.005em;color:var(--le)}
.hz-h1b .hz-scr{font:400 1.6em/1 var(--script);text-transform:none;letter-spacing:0;color:var(--ca);margin-left:.04em}
.hz-out{grid-area:out;align-self:center;padding-right:4px;font:italic 400 clamp(19px,5.6vw,22px)/1.25 var(--serif);color:var(--ca)}
.hz-hero-p{grid-area:ph;display:block;margin-top:-6px}
.hz-hero-p img{display:block;width:100%;height:auto}
.hz-lede{grid-area:lede;margin-top:20px;max-width:36em;font:400 14px/1.72 var(--sans);color:var(--ca)}
.hz-acts{grid-area:acts;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:22px}

/* ---------- hero, every size: a small label led by a taupe rule, the headline, one supporting line,
   one short line of copy, then a solid "Book a chat" and a quieter "See prices" ---------- */
.hz-k{display:flex;align-items:center;gap:12px;color:var(--ca)}
.hz-k::before{content:"";flex:none;width:26px;height:1px;background:var(--ta)}
.hz-hero .hz-acts .hz-cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 26px;border:0;background:var(--le);color:var(--pe);font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;transition:background-color .3s ease}
.hz-hero .hz-acts .hz-cta i{width:20px}
.hz-hero .hz-acts .hz-cta:active{background:var(--ca)}
@media (hover:hover){.hz-hero .hz-acts .hz-cta:hover{background:var(--ca)}}
.hz-hero .hz-acts .hz-more{color:var(--ca)}
/* phones and tablets: headline with room to breathe, the cut-out tucked under it, the supporting line beside her */
@media (max-width:1023px){
 .hz-hero-g{grid-template-columns:minmax(0,1fr) 67%;column-gap:6px;padding-top:30px;padding-bottom:48px}
 .hz-k{margin-bottom:22px;font-size:9.5px;letter-spacing:.26em}
 .hz-h1b{margin-top:16px}
 .hz-h1b .hz-scr{font-size:1.5em}
 .hz-hero-p{margin-top:18px;margin-right:calc(-1*var(--gutr) + 2px)}
 .hz-out{position:relative;z-index:1;align-self:center;margin:24px 0 0;padding:0;font-size:clamp(17px,4.9vw,21px);line-height:1.22;text-wrap:balance}
 .hz-out::before{content:"";display:block;width:26px;height:1px;margin-bottom:14px;background:var(--ta)}
 .hz-lede{margin-top:26px;max-width:30em;font-size:14px;line-height:1.72;text-wrap:pretty}
 .hz-acts{justify-content:flex-start;gap:14px 26px;margin-top:28px}
 .hz-hero .hz-acts .hz-more{font-size:17px}
}
@media (max-width:359px){.hz-hero .hz-acts .hz-cta{padding:0 20px;letter-spacing:.2em}.hz-k{gap:10px;letter-spacing:.2em}.hz-k::before{width:18px}}
@media (min-width:600px) and (max-width:1023px){
 .hz-hero-g{grid-template-columns:minmax(0,1fr) 60%;padding:52px 40px 64px}
 .hz-h1a{font-size:96px}
 .hz-h1b{font-size:44px}
 .hz-out{font-size:26px}
 .hz-lede{font-size:15px}
}

/* ---------- colour rhythm after the reorder: "Sound familiar" goes light (Khaki), "What does your business need?" goes dark (Cacao) ---------- */
.hz.hz-pain{background:var(--kh);color:var(--le)}
.hz.hz-pain .hz-pain-h{color:var(--le)}
.hz.hz-pain .hz-pain-h .hz-scr{color:var(--ca)}
.hz.hz-pain .hz-pain-l li{color:var(--le);border-top-color:rgb(77 64 58 / .16)}
.hz.hz-pain .hz-on-dark{color:var(--le)}
.hz.hz-pain .hz-fit-h,.hz.hz-pain .hz-fit-l li{color:var(--ca)}
@media (max-width:1023px){
 .hz.hz-pain .hz-pain-ph{background:var(--kh)}
 .hz.hz-pain .hz-pain-ph img{opacity:.5}
 .hz.hz-pain .hz-pain-l li::before{background:rgb(77 64 58 / .45)}
}
.hz.hz-where{background:var(--ca);color:var(--pe)}
.hz.hz-where .hz-where-ph{background:#3b312c}
.hz.hz-where .hz-where-h{color:var(--pe)}
.hz.hz-where .hz-where-h .hz-scr{color:var(--kh)}
.hz.hz-where .hz-opt + .hz-opt{border-top-color:rgb(250 248 245 / .18)}
.hz.hz-where .hz-opt-q{color:var(--pe)}
.hz.hz-where .hz-opt-d{color:var(--kh)}
.hz.hz-where .hz-opt-pv{color:var(--pe)}
.hz.hz-where .hz-opt-pv small,.hz.hz-where .hz-opt-p4{color:var(--kh);opacity:.78}
.hz.hz-where .hz-more{color:var(--pe)}
.hz.hz-where .hz-where-n{color:var(--kh)}
.hz.hz-where .hz-where-n a{color:var(--pe);text-decoration-color:rgb(250 248 245 / .5)}
/* ---------- phones and tablets: the About photo's layering (a colour block behind, a fine Taupe frame offset) on the other photos ---------- */
@media (max-width:1023px){
 .hz.hz-where,.hz.hz-diy,.hz.hz-glow{overflow-x:clip}
 .hz.hz-where .hz-where-ph,.hz.hz-diy .hz-diy-ph,.hz.hz-glow .hz-ph-d{position:relative;isolation:isolate;background:none}
 .hz.hz-where .hz-where-ph img,.hz.hz-diy .hz-diy-ph img,.hz.hz-glow .hz-ph-d img{position:relative;z-index:2}
 .hz.hz-where .hz-where-ph::before,.hz.hz-diy .hz-diy-ph::before,.hz.hz-glow .hz-ph-d::before{content:"";position:absolute;z-index:0;top:50%;bottom:-18px}
 .hz.hz-where .hz-where-ph::after,.hz.hz-diy .hz-diy-ph::after,.hz.hz-glow .hz-ph-d::after{content:"";position:absolute;z-index:1;border:1px solid var(--ta)}
 /* what does your business need: the chair photo set to the right edge, a Leather block and the frame falling to the left */
 .hz.hz-where .hz-where-top{padding-top:44px}
 .hz.hz-where .hz-where-ph{width:84%;margin:0 0 0 auto}
 .hz.hz-where .hz-where-ph img{background:#3b312c}
 .hz.hz-where .hz-where-ph::before{right:62%;left:-100vw;background:var(--le)}
 .hz.hz-where .hz-where-ph::after{inset:16px 16px -16px -16px}
 .hz.hz-where .hz-where-h{margin-top:50px}
 /* why not diy: the studio photo off the left edge, a Cacao block and the frame to the right, as in About */
 .hz.hz-diy .hz-diy-ph{width:86%;margin:30px 0 34px calc(-1 * var(--gut))}
 .hz.hz-diy .hz-diy-ph img{background:#d8d3cb}
 .hz.hz-diy .hz-diy-ph::before{left:62%;right:-100vw;background:var(--ca)}
 .hz.hz-diy .hz-diy-ph::after{inset:16px -16px -16px 16px}
 /* glow up: the phone photo off the right edge, a Cacao block and the frame to the left */
 .hz.hz-glow .hz-ph-d{margin-bottom:52px}
 .hz.hz-glow .hz-ph-d::before{top:33.4%;right:62%;left:-100vw;background:var(--ca)}
 .hz.hz-glow .hz-ph-d::after{inset:16px 16px -16px -16px}
}
@media (min-width:600px) and (max-width:1023px){
 .hz.hz-where .hz-where-ph{width:78%}
 .hz.hz-diy .hz-diy-ph{width:88%;margin-left:-40px}
 .hz.hz-where .hz-where-ph::after,.hz.hz-glow .hz-ph-d::after{inset:22px 22px -22px -22px}
 .hz.hz-diy .hz-diy-ph::after{inset:22px -22px -22px 22px}
 .hz.hz-where .hz-where-ph::before,.hz.hz-diy .hz-diy-ph::before,.hz.hz-glow .hz-ph-d::before{bottom:-40px}
 .hz.hz-where .hz-where-h{margin-top:72px}
 .hz.hz-diy .hz-diy-ph{margin-bottom:56px}
 .hz.hz-glow .hz-ph-d{margin-bottom:70px}
}
/* ---------- phones and tablets: the "why not DIY" benefits get the glow-up step lines (a hairline down the side, a tick to each) ---------- */
@media (max-width:1023px){
 .hz.hz-diy .hz-diy-l{position:relative;padding-left:24px}
 .hz.hz-diy .hz-diy-l::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(163 150 141 / .7)}
 .hz.hz-diy .hz-diy-l li{position:relative;margin-left:var(--in,0px)}
 .hz.hz-diy .hz-diy-l li:nth-child(2){--in:clamp(28px,10vw,60px);margin-top:36px}
 .hz.hz-diy .hz-diy-l li:nth-child(3){--in:clamp(10px,3vw,20px);margin-top:34px}
 .hz.hz-diy .hz-diy-l li::before{content:"";position:absolute;top:15px;left:calc(-1 * (var(--in,0px) + 24px));width:calc(var(--in,0px) + 14px);height:1px;background:var(--ta)}
}
/* ---------- phones and tablets: "See prices" sits closer to the copy, set to the right ---------- */
@media (max-width:1023px){
 .hz.hz-does .hz-does-b{margin-top:34px}
 .hz.hz-does .hz-does-b .hz-does-p:first-child{margin-top:0}
 .hz.hz-does .hz-does-b .hz-more{display:flex;width:max-content;margin:14px 0 0 auto}
}
/* ---------- scroll reveals: text and links rise into place as they come on screen; the framed photos slide in from their own side.
   Nothing is hidden by CSS alone: the starting state only applies once the script has added html.hz-motion. ---------- */
.hz.hz-where,.hz.hz-diy,.hz.hz-glow,.hz.hz-about{overflow-x:clip}
html.hz-motion{--hz-ease:cubic-bezier(.16,1,.3,1)}
html.hz-motion .hz-in,html.hz-motion ul.hz-in > li{opacity:0;transform:translate3d(0,16px,0);will-change:opacity,transform;transition:opacity .75s ease-out var(--hz-d,0s),transform 1s var(--hz-ease) var(--hz-d,0s)}
/* a list comes in as one unit, its items following each other down */
html.hz-motion ul.hz-in{opacity:1;transform:none;will-change:auto;transition:none}
html.hz-motion ul.hz-in > li{transition-delay:calc(var(--hz-d,0s) + var(--hz-i,0) * .07s)}
html.hz-motion .hz-in.hz-from-l{transform:translate3d(-64px,0,0);transition-duration:.9s,1.25s}
html.hz-motion .hz-in.hz-from-r{transform:translate3d(64px,0,0);transition-duration:.9s,1.25s}
html.hz-motion .hz-in.hz-shown,html.hz-motion ul.hz-in.hz-shown > li{opacity:1;transform:none}
html.hz-motion .hz-in.hz-done,html.hz-motion ul.hz-in.hz-done > li{will-change:auto}
@media (prefers-reduced-motion:reduce){html.hz-motion .hz-in,html.hz-motion ul.hz-in > li{opacity:1;transform:none;transition:none}}
/* ==========================================================================
   ART DIRECTION PASS: one system for depth and detail across the page
   - layering: the About block (Khaki/Cacao) carried into the hero
   - fine lines: dashes off the page edge, ticks off a hairline, column rules
   - small labels: the italic serif used for "step one" numbers the service menu
   ========================================================================== */
/* hero: a Khaki block sits behind the cut-out, running off the right edge, so she sits in the composition rather than on blank paper */
.hz-hero-p{position:relative;isolation:isolate}
.hz-hero-p img{position:relative;z-index:1}


/* sound familiar, desktop: each line starts with a dash drawn from the photo's edge */
@media (min-width:1024px){
 .hz.hz-pain .hz-pain-l li{position:relative;padding-left:30px}
 .hz.hz-pain .hz-pain-l li::before{content:"";position:absolute;top:.66em;left:-76px;width:94px;height:1px;background:rgb(77 64 58 / .4)}
}
/* service menu: a small italic number above each option; on desktop, fine rules between the columns */
.hz-opts{counter-reset:opt}
.hz-opt{counter-increment:opt}
.hz.hz-where .hz-opt-q::before{content:"no. " counter(opt);display:block;margin-bottom:8px;font:italic 400 15px/1.2 var(--serif);color:var(--kh);opacity:.8}
@media (min-width:1024px){
 .hz.hz-where .hz-opt + .hz-opt{border-left:1px solid rgb(250 248 245 / .16);padding-left:clamp(28px,2.8vw,44px);margin-left:calc(-1 * clamp(14px,1.4vw,22px))}
 .hz.hz-where .hz-opt-q::before{margin-bottom:12px;font-size:16px}
}
/* why not DIY, desktop: the benefits hang off a hairline, like the glow-up steps */
@media (min-width:1024px){
 .hz.hz-diy .hz-diy-l{position:relative;padding-left:28px}
 .hz.hz-diy .hz-diy-l::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(163 150 141 / .7)}
 .hz.hz-diy .hz-diy-l li{position:relative;margin-left:var(--in,0px)}
 .hz.hz-diy .hz-diy-l li:nth-child(2){--in:clamp(60px,7vw,110px);margin-top:54px}
 .hz.hz-diy .hz-diy-l li:nth-child(3){--in:clamp(20px,2.4vw,36px);margin-top:54px}
 .hz.hz-diy .hz-diy-l li::before{content:"";position:absolute;top:.95em;left:calc(-1 * (var(--in,0px) + 28px));width:calc(var(--in,0px) + 16px);height:1px;background:var(--ta)}
}
/* kind words: an oversized opening mark in soft Khaki, tucked behind the first words */
.hz-rv-f{position:relative;isolation:isolate}
.hz .hz-rv-lead{position:relative}
/* the mark sits top right, level with "kind words", so it opens the quote without touching the heading */
.hz .hz-rv-lead::before{content:"\201C";position:absolute;z-index:-1;right:0;top:-.62em;font:400 4.4em/.8 var(--serif);color:var(--kh);pointer-events:none}
/* desktop: the mark moves to the head of the review column, opening the full review */
@media (min-width:1024px){
 .hz .hz-rv-lead::before{content:none}
 .hz .hz-rv-body{position:relative}
 .hz .hz-rv-body::before{content:"\201C";position:absolute;z-index:-1;left:-8px;top:-96px;font:400 176px/.8 var(--serif);color:var(--kh);pointer-events:none}
}
/* ---------- phones and tablets: a quieter "Sound familiar", fine dashes off the page edge, roomier options ---------- */
@media (max-width:1023px){
 .hz-pain .hz-pain-l li{position:relative;padding-left:30px}
 .hz-pain .hz-pain-l li::before{content:"";position:absolute;top:.68em;left:calc(-1 * var(--gut));width:calc(var(--gut) + 18px);height:1px;background:rgb(250 248 245 / .5)}
 .hz-opt{padding:38px 0 36px}
 .hz-opt:first-child{padding-top:22px}
 .hz-opt:last-child{padding-bottom:8px}
 /* the glow-up photo now rises into "Why not DIY" instead: leave Khaki room under its closing panel */
 .hz.hz-diy{padding-bottom:calc(min(64vw,330px) * 1.25 / 3 + 40px)}
}
@media (min-width:600px) and (max-width:1023px){.hz.hz-diy{padding-bottom:calc(340px * .8 / 3 + 44px)}}
@media (min-width:1024px){.hz.hz-diy{padding-bottom:156px}}
/* ---------- sound familiar: the black-and-white photo, then a Cacao text column ---------- */
.hz-pain{position:relative;isolation:isolate;background:var(--ca);color:var(--pe)}
/* phones: the photograph sits under the chocolate, showing through at the top and settling into solid Cacao */
.hz-pain-ph{position:absolute;top:0;left:0;right:0;z-index:-1;height:min(100%,640px);margin:0;overflow:hidden}
.hz-pain-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 18%;opacity:.9}
.hz-pain-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(77 64 58 / .7) 0%,rgb(77 64 58 / .8) 34%,rgb(77 64 58 / .93) 62%,#4D403A 100%)}
.hz-pain-g{position:relative;display:flex;flex-direction:column;max-width:1240px;margin:0 auto;padding:150px var(--gutr) 44px var(--gut)}
.hz-pain-side{display:contents}
.hz-pain-h{order:1;font:400 clamp(44px,13vw,54px)/1 var(--serif);letter-spacing:-.015em;color:var(--pe)}
.hz-pain-h .hz-scr{font:400 1.12em/1 var(--script);color:var(--kh)}
.hz-pain-l{order:2;list-style:none;padding:0;margin-top:20px}
.hz-pain-l li{padding:12px 0 13px;border-top:1px solid rgb(223 218 207 / .16);font:400 19px/1.3 var(--serif);color:var(--pe);text-wrap:pretty}
.hz-pain-side > .hz-more{order:3;align-self:flex-start;margin-top:14px}
.hz-on-dark{color:var(--pe)}
.hz-fit{order:4;margin-top:30px}
.hz-fit-h{font:italic 400 21px/1.2 var(--serif);color:var(--kh)}
.hz-fit-l{list-style:none;padding:0;margin-top:8px}
.hz-fit-l li{position:relative;padding:4px 0 4px 20px;font:400 13px/1.6 var(--sans);color:var(--kh)}
.hz-fit-l li::before{content:"";position:absolute;left:0;top:.95em;width:10px;height:1px;background:var(--ta)}

/* ---------- where are you at: a wide black-and-white photograph with the heading set close beneath it,
   then the three ways in as an editorial list (no boxes, icons or price cards) ---------- */
.hz-where{background:var(--pe)}
.hz-where-top{position:relative}
.hz-where-ph{margin:0;background:#cfd0d1}
.hz-where-ph img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:50% 47%}
.hz-where-g{position:relative;padding-top:0;padding-bottom:50px}
/* phones: the heading sits just under the photograph (the dark jeans at the lower right would swallow an overlap) */
.hz-where-h{position:relative;z-index:1;margin-top:26px;font:400 clamp(44px,13vw,52px)/1 var(--serif);letter-spacing:-.015em;color:var(--le)}
.hz-where-h .hz-scr{font:400 1.12em/1 var(--script);color:var(--ca);letter-spacing:0}
.hz-opts{list-style:none;padding:0;margin-top:2px}
.hz-opt:first-child{padding-top:16px}
.hz-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q q" "d d" "pr go";column-gap:16px;padding:22px 0 20px}
.hz-opt + .hz-opt{border-top:1px solid rgb(163 150 141 / .22)}
.hz .hz-opt-q{grid-area:q;max-width:15em;font:italic 400 23px/1.18 var(--serif);letter-spacing:-.005em;color:var(--le);text-wrap:balance}
.hz .hz-opt-d{grid-area:d;margin-top:8px;max-width:31em;font:400 13px/1.7 var(--sans);color:var(--ca);text-wrap:pretty}
.hz .hz-opt-pr{grid-area:pr;align-self:start;margin-top:14px}
.hz-opt-pv{display:block;font:400 30px/1 var(--serif);letter-spacing:-.01em;color:var(--le);white-space:nowrap}
.hz-opt-pv small{font:italic 400 15px/1 var(--serif);color:var(--dt);margin-right:4px;letter-spacing:0}
.hz-opt-p4{display:block;margin-top:6px;font:400 11px/1.4 var(--sans);letter-spacing:.02em;color:var(--dt)}
.hz-opt .hz-more{grid-area:go;align-self:start;justify-self:end;margin-top:7px;margin-right:6px;font-size:16.5px}
.hz .hz-where-n{margin-top:4px;max-width:30em;font:400 12.5px/1.65 var(--sans);color:var(--dt)}
.hz-where-n a{color:var(--ca);text-decoration:underline;text-decoration-color:var(--ta);text-underline-offset:3px;text-decoration-thickness:1px}
/* tablets: a shallower crop */
@media (min-width:600px) and (max-width:1023px){.hz-where-ph img{aspect-ratio:16/9;object-position:50% 47%}.hz-where-g{max-width:680px;padding-left:40px;padding-right:40px;margin:0}}
@media (min-width:1024px){
 /* photograph: wide and shallow, inside the page margins */
 .hz-where-top{max-width:1240px;margin:0 auto;padding:72px 56px 0}
 .hz-where-ph img{aspect-ratio:auto;height:clamp(340px,32vw,420px);object-position:50% 47%}
 /* heading directly under the photograph; "not sure?" answers it from the right, on the same line */
 .hz-where-g{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h n" "o o";align-items:end;column-gap:48px;padding:0 56px 108px}
 .hz-where-h{grid-area:h;margin:34px 0 0;font-size:clamp(68px,6vw,86px)}
 .hz .hz-where-n{grid-area:n;justify-self:end;max-width:21em;margin:0 0 12px;text-align:right;font-size:14px;line-height:1.7}
 /* three connected columns: line, description, then price and link held together under it */
 .hz-opts{grid-area:o;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:clamp(40px,4.4vw,64px);max-width:1040px;margin-top:60px}
 .hz-opt{grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "d" "pr" "go";row-gap:0;padding:0}
 .hz-opt + .hz-opt{border-top:0}
 .hz-opt:first-child{padding-top:0}
 .hz .hz-opt-q{font-size:clamp(26px,2.3vw,30px);line-height:1.16;max-width:11.5em}
 .hz .hz-opt-d{margin-top:14px;max-width:23em;font-size:14px}
 .hz .hz-opt-pr{margin-top:26px}
 .hz-opt-pv{font-size:40px}
 .hz-opt-pv small{font-size:17px}
 .hz-opt-p4{margin-top:7px;font-size:11.5px}
 .hz-opt .hz-more{justify-self:start;margin:12px 0 0;font-size:17px}
}

/* ---------- why not just do it yourself: soft stone band; three promises set as serif lines with a gentle,
   irregular offset; the closing line gets its own chocolate band that bleeds off the right edge ---------- */
.hz-diy{background:var(--kh);padding-bottom:56px}
.hz-diy-g{padding-top:56px;padding-bottom:0}
.hz-diy-h{display:flex;flex-direction:column;align-items:flex-start;font:400 clamp(38px,11.4vw,46px)/1 var(--serif);letter-spacing:-.015em;color:var(--le)}
.hz-diy-h .hz-scr{margin:.02em 0 0 .55em;font:400 1.14em/1.05 var(--script);color:var(--ca);letter-spacing:0;white-space:nowrap}
.hz .hz-diy-p{margin-top:20px;max-width:30em;font:400 14px/1.7 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-diy-ph{margin:26px 0 0;background:#d8d3cb}
.hz-diy-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 52%}
.hz .hz-diy-lead{margin-top:26px;font:italic 400 20px/1.3 var(--serif);color:var(--le)}
.hz-diy-l{list-style:none;padding:0;margin-top:26px}
.hz-diy-l li{margin-top:22px;max-width:21em}
.hz-diy-l li:first-child{margin-top:0}
.hz-diy-l li:nth-child(2){margin-left:7%;margin-top:24px}
.hz-diy-l li:nth-child(3){margin-top:26px}
.hz-diy-l b{display:block;font:400 26px/1.12 var(--serif);letter-spacing:-.012em;color:var(--le)}
.hz-diy-l span{display:block;margin-top:7px;font:400 13px/1.7 var(--sans);color:var(--ca);text-wrap:pretty}
/* the closing line: cream italic on Cacao, set in from the left and running off the right edge */
.hz-diy-qw{max-width:1240px;margin:40px auto 0;padding-left:var(--gut);padding-right:var(--gutr)}
.hz .hz-diy-close{margin-left:8%;padding:30px 24px 32px;background:var(--ca);
 font:italic 400 clamp(19px,5.6vw,22px)/1.34 var(--serif);color:var(--pe);text-wrap:pretty}
@media (min-width:600px) and (max-width:1023px){.hz-diy-ph img{aspect-ratio:16/10;object-position:50% 48%}.hz-diy-g{max-width:680px;padding-left:40px;padding-right:40px;margin:0}.hz-diy-qw{max-width:680px;margin-left:0;padding-left:40px;padding-right:40px}.hz .hz-diy-close{margin-left:16%;padding:34px 36px 36px}}
@media (min-width:1024px){
 .hz-diy{padding-bottom:110px}
 .hz-diy-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(56px,7vw,112px);align-items:start;padding:112px 56px 0}
 .hz-diy-h{font-size:clamp(60px,5.2vw,74px)}
 .hz .hz-diy-p{margin-top:28px;font-size:15px;max-width:26em}
 .hz-diy-in{display:flex;flex-direction:column}
 .hz .hz-diy-lead{margin-top:28px;font-size:23px}
 .hz-diy-ph{order:3;margin-top:40px;width:min(100%,460px)}
 .hz-diy-ph img{aspect-ratio:4/3;object-position:40% 46%}
 .hz-diy-body{padding-top:18px}
 .hz-diy-l{margin-top:0}
 .hz-diy-l li{max-width:19em}
 .hz-diy-l li:nth-child(2){margin:58px 0 0 22%}
 .hz-diy-l li:nth-child(3){margin:58px 0 0 6%}
 .hz-diy-l b{font-size:clamp(32px,2.8vw,38px)}
 .hz-diy-l span{margin-top:10px;font-size:14.5px;max-width:24em}
 /* the panel rises to overlap the photograph's lower-right corner, tying the left image to the right-hand promises */
 .hz-diy-qw{position:relative;z-index:1;margin-top:-56px;padding-left:56px;padding-right:56px}
 .hz .hz-diy-close{margin-left:30%;margin-right:0;max-width:calc(14.6em + 2 * clamp(56px,6vw,88px));padding:56px clamp(56px,6vw,88px) 60px;text-wrap:wrap;font-size:clamp(30px,2.7vw,38px);line-height:1.28}
}

/* ---------- December availability, moved into the enquiry section ---------- */
html body p.enq-avail{margin:14px 0 0 !important;font:600 10px/1.5 Montserrat,Arial,sans-serif !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:#DFDACF !important;opacity:.9}

/* ---------- what monalux does ----------
   Leather band. The blurred portrait is a backdrop (aria-hidden): toned down and faded out so it sits only
   behind the heading. Phones/tablets: one column, portrait above the heading. Desktop (1024+): two columns,
   portrait behind the left, fading out before the text column. Sizes are fluid; three breakpoints in all. */
.hz-does{position:relative;isolation:isolate;overflow:hidden;background:var(--le);color:var(--pe)}
.hz .hz-does-ph{position:absolute;inset:0 0 auto 0;z-index:-1;height:clamp(440px,118vw,620px);margin:0;
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 90%)}
.hz-does-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 24%;opacity:.3}
.hz-does-g{display:flex;flex-direction:column;padding-top:clamp(190px,52vw,260px);padding-bottom:72px}
.hz-does-h{font:400 clamp(40px,11.6vw,50px)/1 var(--serif);letter-spacing:-.015em;color:var(--pe)}
.hz-does-h .hz-scr{font:400 1.14em/1 var(--script);color:var(--kh);letter-spacing:0}
.hz .hz-does-st{margin-top:28px;max-width:17em;font:400 clamp(23px,6.4vw,28px)/1.24 var(--serif);letter-spacing:-.005em;color:var(--pe);text-wrap:pretty}
.hz .hz-does-p{max-width:31em;font:400 14px/1.75 var(--sans);color:var(--kh);text-wrap:pretty}
.hz-does-a .hz-does-p{margin-top:18px}
/* the pause: a short italic line with the script phrase under it */
.hz .hz-does-sub{margin-top:52px;max-width:15em;font:italic 400 clamp(21px,5.8vw,25px)/1.25 var(--serif);color:var(--kh);text-wrap:balance}
.hz-does-sub em{font-style:italic;color:var(--pe)}
.hz-does-b{margin-top:48px}
.hz .hz-does-hh{font:400 clamp(25px,7vw,30px)/1.12 var(--serif);letter-spacing:-.01em;color:var(--pe)}
.hz-does-hh i{display:block;font-style:italic}
.hz-does-b .hz-does-p{margin-top:14px}
.hz-does-b .hz-does-p + .hz-does-p{margin-top:8px}
.hz-does-b .hz-more{margin-top:26px}
@media (min-width:600px) and (max-width:1023px){
 .hz .hz-does-ph{height:600px}
 .hz-does-g{max-width:640px;margin:0;padding:250px 40px 88px}
}
@media (min-width:1024px){
 .hz .hz-does-ph{inset:0 auto 0 0;width:52%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 100%),linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 100%),linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-composite:intersect}
 .hz-does-ph img{object-position:40% 30%;opacity:.34}
 .hz-does-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"h a" "s b";align-items:start;column-gap:clamp(48px,6vw,104px);row-gap:clamp(52px,4.6vw,76px);padding:clamp(96px,9vw,128px) 56px clamp(100px,9vw,128px)}
 .hz-does-h{grid-area:h;font-size:clamp(56px,5.2vw,78px)}
 .hz-does-a{grid-area:a;padding-top:.4em}
 .hz .hz-does-st{margin-top:0;max-width:20em;font-size:clamp(28px,2.55vw,37px);line-height:1.2}
 .hz .hz-does-p{font-size:15px;max-width:33em}
 .hz-does-a .hz-does-p{margin-top:24px}
 .hz .hz-does-sub{grid-area:s;margin-top:.2em;font-size:clamp(24px,2.1vw,30px)}
 .hz-does-b{grid-area:b;margin-top:0}
 .hz .hz-does-hh{font-size:clamp(30px,2.6vw,38px)}
 .hz-does-b .hz-does-p{margin-top:18px}
 .hz-does-b .hz-more{margin-top:30px}
}

/* ---------- your online glow up ----------
   One design at every width, on Pearl: italic "step" label, serif heading, small description.
   Phones/tablets: the four steps flow down the page, each set at a slightly different indent.
   Desktop (1024px+): four columns under one fine Taupe rule, rows shared across the columns. */
.hz-glow{position:relative;z-index:1;background:var(--pe)}
.hz-glow-g{padding-top:64px;padding-bottom:60px}
.hz-glow-h{font:400 clamp(40px,11.6vw,50px)/1 var(--serif);letter-spacing:-.015em;color:var(--le)}
.hz-glow-h .hz-scr{font:400 1.16em/1 var(--script);color:var(--ca);letter-spacing:0}
.hz .hz-glow-sub{margin-top:12px;font:italic 400 clamp(18px,5vw,21px)/1.3 var(--serif);color:var(--ca)}
.hz-flow{position:relative;margin-top:44px}
.hz-glow-ph{margin:0}
.hz-glow-ph img{display:block;width:100%;height:auto}
.hz-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:34px}
.hz-step{max-width:17em;font-size:clamp(23px,6.4vw,27px)}
@media (max-width:1023px){
 /* one continuous hairline runs the full height of the steps; each step hangs off it on a short marker,
    set at alternating distances with a slightly uneven rhythm */
 .hz-steps{position:relative;padding-left:24px;gap:0}
 .hz-steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(163 150 141 / .7)}
 .hz-step{position:relative;margin-left:var(--in,0px)}
 .hz-step:nth-child(2){--in:clamp(44px,15vw,90px);margin-top:46px}
 .hz-step:nth-child(3){--in:clamp(12px,3.5vw,24px);margin-top:36px}
 .hz-step:nth-child(4){--in:clamp(28px,9vw,54px);margin-top:48px}
 .hz-step:nth-child(2) .hz-step-h{font-size:.9em}
 .hz-step::before{content:"";position:absolute;top:9px;left:calc(-1 * (var(--in,0px) + 24px));width:calc(var(--in,0px) + 14px);height:1px;background:var(--ta)}
 /* the photograph comes first, set to the right and running off the screen; its upper third sits over
    the dark section above, the rest in the ivory, with the heading set beneath it */
 .hz-glow-top{display:flex;flex-direction:column}
 .hz-ph-d{order:-1;align-self:flex-end;width:min(64%,330px);margin:calc(-64px - min(64vw,330px) * 1.25 / 3) calc(-1 * var(--gutr)) 30px 0}
 .hz-ph-d img{aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
 /* payment: a compact Cacao note with cream type, kept to a comfortable measure */
 .hz .hz-glow-end .hz-glow-pay{max-width:none;padding:24px 24px 26px;background:var(--ca);color:var(--pe);font-size:13.5px;line-height:1.65;letter-spacing:.005em;text-wrap:balance}
 .hz-glow-end{margin-top:46px;align-items:stretch}
 .hz-glow-end .hz-cta{align-self:flex-start}
}
.hz-step-n{display:block;font:italic 400 15px/1.2 var(--serif);color:var(--ca);opacity:.8}
.hz .hz-step-h{margin:6px 0 0;font:400 1em/1.15 var(--serif);letter-spacing:-.01em;color:var(--le);text-wrap:balance}
.hz .hz-step-p{margin-top:8px;max-width:21em;font:400 13.5px/1.7 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-glow-end{margin-top:56px;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hz .hz-glow-pay{max-width:30em;font:400 13px/1.7 var(--sans);color:var(--ca);text-wrap:pretty}
@media (min-width:600px) and (max-width:1023px){
 .hz-glow-g{max-width:680px;margin:0;padding:80px 40px 72px}
 .hz-ph-d{width:340px;margin:calc(-80px - 340px * .8 / 3) -40px 34px 0}
 .hz-ph-d img{aspect-ratio:5/4}
 .hz-step{font-size:28px}
 .hz .hz-glow-pay{font-size:14px}
}
@media (min-width:1024px){
 .hz-glow-g{padding:clamp(100px,9vw,128px) 56px clamp(100px,9vw,124px)}
 .hz-ph-d{order:0;align-self:start;margin-right:0;margin-bottom:0}
 .hz-glow-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h ph" "s ph";grid-template-rows:1fr auto;column-gap:56px;align-items:end}
 .hz-glow-top .hz-glow-h{grid-area:h}
 .hz-glow{position:relative;z-index:1}
 /* the photograph rises out of the heading area into the band above, straddling the edge between the two sections */
 .hz-ph-d{grid-area:ph;align-self:start;display:block;width:clamp(360px,33vw,470px);margin-top:calc(-1 * clamp(100px,9vw,128px) - clamp(360px,33vw,470px) * .75 / 3)}
 .hz-ph-d img{aspect-ratio:4/3;object-fit:cover;object-position:50% 20%}
 .hz-glow-h{font-size:clamp(58px,5.2vw,76px)}
 .hz .hz-glow-sub{grid-area:s;margin:14px 0 0;font-size:clamp(20px,1.7vw,24px)}
 .hz-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:clamp(32px,3.6vw,56px);row-gap:0;margin-top:clamp(56px,5vw,76px);padding-top:28px;border-top:1px solid var(--ta)}
 .hz-step,.hz-step:nth-child(2),.hz-step:nth-child(3){display:grid;grid-row:span 3;grid-template-rows:subgrid;align-items:start;max-width:none;margin:0;font-size:clamp(25px,2.2vw,31px)}
 .hz-step-n{margin-bottom:14px;font-size:16px}
 .hz-steps::before{content:none}
 .hz-step{position:relative}
 .hz-step::before{content:"";position:absolute;left:0;top:-28px;width:1px;height:20px;background:var(--ta)}
 .hz .hz-step-h{margin:0;max-width:9em}
 .hz .hz-step-p{margin-top:12px;font-size:14px;max-width:17em;text-wrap:balance}
 .hz-glow-end{margin-top:clamp(56px,5vw,72px);flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}
 .hz .hz-glow-end .hz-glow-pay{width:auto;max-width:calc(25em + 88px);padding:32px 44px 34px;background:var(--ca);color:var(--pe);font-size:15px;line-height:1.7;text-wrap:pretty}
}

/* ---------- the girl behind monalux: an editorial profile ----------
   Khaki page; a Cacao block set behind the portrait (bleeding off the screen edge) and a fine Taupe frame offset
   from it give the photograph depth. "behind" in script cuts across the serif lines. The opening paragraph is the
   profile's lead; the rest, signature and link sit indented beneath it. */
.hz-about{position:relative;overflow:hidden;background:var(--kh)}
.hz-about-g{display:flex;flex-direction:column;padding-top:60px;padding-bottom:68px}
.hz-about-h{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;font:400 clamp(48px,14vw,60px)/.92 var(--serif);letter-spacing:-.02em;color:var(--le)}
.hz-about-h .hz-scr{margin:-.24em 0 -.32em .62em;font:400 1.14em/1.05 var(--script);color:var(--ca);letter-spacing:0}
/* portrait: bleeds off the left edge; the Cacao block sits behind it to the right and below, the frame offset over it */
.hz-about-ph{position:relative;isolation:isolate;align-self:flex-start;width:80%;max-width:380px;margin:18px 0 0 calc(-1 * var(--gut))}
.hz-about-ph img{position:relative;z-index:2;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%}
.hz-about-ph::before{content:"";position:absolute;z-index:0;top:50%;bottom:-18px;left:62%;right:-100vw;background:var(--ca)}
.hz-about-ph::after{content:"";position:absolute;z-index:1;inset:16px -16px -16px 16px;border:1px solid var(--ta)}
.hz-about-t{position:relative;z-index:2;margin-top:68px}
.hz .hz-about-lead{max-width:18.5em;font:400 clamp(22px,6.2vw,26px)/1.42 var(--serif);letter-spacing:-.008em;color:var(--le);text-wrap:pretty}
.hz-about-more{margin:30px 0 0 12%;padding:2px 0 2px 18px;border-left:1px solid rgb(163 150 141 / .7)}
.hz .hz-about-p{max-width:27em;font:400 13.5px/1.8 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-about-sig{display:block;width:118px;height:auto;margin:26px 0 -2px}
/* phones and tablets: the heading is set like a masthead against the right edge, "behind" swinging back to the left
   across it; the portrait bleeds off the left edge directly beneath, so the two read as one diagonal composition */
@media (max-width:1023px){
 .hz-about-g{padding-top:52px}
 .hz-about-h{align-self:flex-end;align-items:flex-end;text-align:right;margin-right:clamp(10px,3vw,20px);font-size:clamp(54px,15.4vw,66px)}
 .hz-about-h .hz-scr{margin:-.12em .5em -.3em 0;align-self:flex-start}
 .hz-about-ph{width:86%;max-width:400px;margin-top:calc(-.42 * clamp(54px,15.4vw,66px))}
 .hz-about-ph::before{top:30%;left:46%;bottom:-42px}
 .hz-about-ph::after{inset:24px -22px -22px 24px}
 .hz-about-t{margin-top:76px}
 .hz .hz-about-lead{font-size:clamp(23px,6.4vw,27px);line-height:1.38}
}
@media (min-width:600px) and (max-width:1023px){
 .hz-about-g{max-width:680px;margin:0;padding:84px 40px 92px}
 .hz-about-ph{width:520px;max-width:none;margin-left:-40px;margin-top:-28px}
 .hz .hz-about-lead{font-size:27px}
}
@media (min-width:1024px){
 .hz-about-g{display:grid;grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);grid-template-areas:"ph h" "ph t";grid-template-rows:auto 1fr;column-gap:clamp(64px,8vw,128px);padding:clamp(110px,10vw,150px) 56px clamp(110px,10vw,150px)}
 .hz-about-ph{grid-area:ph;align-self:start;width:100%;max-width:580px;margin:0}
 /* desktop: the block sits up and to the left of the portrait, running off the left edge */
 .hz-about-ph::before{top:-84px;bottom:10%;left:-100vw;right:16%}
 .hz-about-ph::after{inset:30px -30px -30px 30px}
 /* the heading reaches back across the gap onto the portrait's light upper edge; "Monalux" steps back off it */
 .hz-about-h{grid-area:h;position:relative;z-index:3;margin-top:clamp(8px,2vw,32px);margin-left:calc(-1 * clamp(64px,8vw,128px) - 26px);font-size:clamp(72px,6.8vw,104px)}
 .hz-about-m{margin-left:40px}
 .hz-about-t{grid-area:t;margin-top:48px;max-width:34em}
 .hz .hz-about-lead{font-size:clamp(26px,2.3vw,32px);line-height:1.38;max-width:18.5em}
 .hz-about-more{margin:34px 0 0 16%;padding-left:22px}
 .hz .hz-about-p{font-size:14.5px}
 .hz-about-sig{width:140px;margin-top:30px}
}

/* ---------- kind words: the review as an editorial quote on Pearl (as on the links page) ----------
   The opening sentence is set large over three lines with the stars closing it; the rest of the review,
   the reviewer and the Google link sit in a narrower, offset column. */
/* reviews: the "kind words" quote from the links page: statement large and flush left, stars closing it on the right,
   the testimonial set in a narrower column from the left like a magazine caption */
.hz-rv{background:var(--pe)}
.hz-rv-g{--kw-col:clamp(36px,13%,60px);padding-top:60px;padding-bottom:68px}
.hz-rv-h{margin:0 0 16px;font:400 32px/1 var(--script);color:var(--ca)}
.hz-rv-f{margin:0}
.hz-rv-q{margin:0}
/* the strongest line of the review, set large; "stress-free" in the italic serif */
.hz .hz-rv-lead{max-width:13em;font:400 clamp(30px,8.6vw,36px)/1.1 var(--serif);letter-spacing:-.015em;color:var(--le);text-wrap:pretty}
.hz-rv-lead em{font-style:italic;color:var(--ca)}
/* the rest of the review, the stars and who said it, set in from the left like a caption */
.hz .hz-rv-body{max-width:31em;margin:26px 0 0 var(--kw-col);font:400 13.5px/1.75 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-rv-by{margin:22px 0 0 var(--kw-col);font:500 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ca)}
.hz-rv-stars{display:block;margin-bottom:9px;font:400 11px/1 var(--sans);letter-spacing:.34em;color:var(--ca)}
.hz-rv-by b{font-weight:600;color:var(--le)}
.hz-rv-src{margin-left:0;color:var(--ca)}
.hz-rv .hz-more{margin:8px 0 0 var(--kw-col);font-size:17px}
@media (min-width:600px) and (max-width:1023px){
 .hz-rv-g{--kw-col:96px;max-width:680px;margin:0;padding:92px 40px 100px}
 .hz-rv-h{font-size:38px}
 .hz .hz-rv-lead{font-size:46px}
 .hz .hz-rv-body{font-size:15px}
}
@media (min-width:1024px){
 /* the line on the left, the rest of the review and its attribution on the right, settling at its foot */
 .hz-rv-g{padding:clamp(108px,9vw,136px) 56px clamp(112px,9.6vw,144px)}
 .hz-rv-h{font-size:clamp(40px,3.4vw,48px);margin-bottom:22px}
 .hz-rv-f{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1fr auto auto;column-gap:clamp(64px,8vw,128px)}
 .hz-rv-q{display:contents}
 .hz .hz-rv-lead{grid-column:1;grid-row:1 / 4;align-self:start;max-width:12.5em;font-size:clamp(44px,4vw,60px);line-height:1.08}
 .hz .hz-rv-body{grid-column:2;grid-row:1;align-self:end;margin:0;max-width:28em;font-size:15.5px;line-height:1.8}
 .hz-rv-by{grid-column:2;grid-row:2;margin:28px 0 0}
 .hz-rv .hz-more{grid-column:2;grid-row:3;justify-self:start;margin:10px 0 0;font-size:18px}
}

/* ---------- enquiry: one Khaki section, the "glow up" photo beside the heading and form, then "rather just chat?" on Taupe ---------- */
.hz-enq{background:var(--kh)}
.hz span#enquire.hz-anchor{display:block!important;position:absolute!important;top:0!important;left:0!important;width:0!important;height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;overflow:hidden!important}
.hz-enq-g{display:flex;flex-direction:column;padding:62px var(--gutr) 64px var(--gut)}
.hz-enq-main{display:contents}
.hz-enq-head{order:1;display:flex;flex-direction:column;align-items:flex-start}
.hz-enq-ph{order:2;margin:38px calc(-1*var(--gutr)) 0 clamp(36px,13%,60px);aspect-ratio:5/4;overflow:hidden;background:#f3f2f0}
.hz-enq-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:18% 62%}
.hz-ef{order:3}
.hz .hz-enq-h{font:400 clamp(44px,12.4vw,54px)/.98 var(--serif);letter-spacing:-.02em;color:var(--le);text-wrap:balance}
.hz-enq-scr{display:inline-block;font:400 1.14em/1 var(--script);letter-spacing:0;color:var(--ca);margin-top:.04em}
.hz .hz-enq-sub{margin-top:20px;max-width:27em;font:400 14px/1.75 var(--sans);color:var(--ca);text-wrap:pretty}
.hz .hz-enq-avail{margin-top:18px;font:600 10px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--le)}
.hz-enq-head .hz-more{margin-top:6px;font-size:17px}
/* the form: hairline fields, a square Leather button */
.hz .hz-ef{display:block;gap:0;width:auto;max-width:none;margin:44px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.hz .hz-ef-hi{font:400 42px/1 var(--script);color:var(--ca)}
.hz .hz-ef-lede{margin-top:12px;max-width:30em;font:400 14px/1.75 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-ef-pair{display:contents}
.hz-ef .hz-ef-f{display:block;margin:24px 0 0}
.hz-ef .hz-ef-l{display:block;font:600 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--le)}
.hz-ef .hz-ef-f input{display:block;width:100%;height:46px;margin:0;padding:10px 0 8px;border:0;border-bottom:1px solid var(--ta);border-radius:0;background:transparent;box-shadow:none;font:400 16px/1.2 var(--sans);color:var(--le);-webkit-appearance:none;appearance:none;transition:border-color .3s ease}
.hz-ef .hz-ef-f input:focus{outline:0;border-bottom-color:var(--le);box-shadow:0 1px 0 var(--le)}
.hz-ef .hz-ef-send{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;margin:34px 0 0;padding:0 24px;border:0;border-radius:0;background:var(--le);box-shadow:none;color:var(--pe);font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:background-color .3s ease;-webkit-tap-highlight-color:transparent}
.hz-ef .hz-ef-send img{width:14px;height:auto}
.hz-ef .hz-ef-send:active{background:var(--ca)}
@media (hover:hover){.hz-ef .hz-ef-send:hover{background:var(--ca)}}
.hz-ef .hz-ef-send:focus-visible{outline:1px solid var(--le);outline-offset:3px}
/* rather just chat: the links-page contact directory on Taupe */
.hz-chat{background:var(--ta);color:var(--pe)}
.hz-chat-g{display:flex;flex-direction:column;max-width:460px;padding-top:56px;padding-bottom:52px;text-align:center}
.hz-chat-intro{display:flex;flex-direction:column;align-items:center}
.hz .hz-chat-h{font:400 44px/1 var(--serif);letter-spacing:-.015em;color:var(--pe)}
.hz-chat-scr{font:400 1.14em/1 var(--script);letter-spacing:0;color:var(--pe)}
.hz .hz-chat-sub{margin-top:16px;max-width:27em;font:400 14px/1.75 var(--sans);color:var(--le);text-wrap:balance}
.hz-chat .hz-cta{order:5;margin-top:26px;font-size:24px;color:var(--le);border-bottom-color:var(--le)}
.hz-dir{list-style:none;margin:30px 0 0;padding:0;border-bottom:1px solid rgb(250 248 245 / .45)}
.hz-dir li{border-top:1px solid rgb(250 248 245 / .45)}
.hz-dr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-height:58px;padding:15px 0 14px;text-decoration:none;color:var(--pe);transition:background-color .3s ease;-webkit-tap-highlight-color:transparent}
.hz-dn{flex:none;font:400 26px/1.1 var(--serif);letter-spacing:-.01em;color:var(--pe);transition:transform .35s var(--ease)}
.hz-dv{min-width:0;text-align:right;font:600 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--le);margin-right:-.2em;overflow-wrap:anywhere;transition:opacity .3s ease}
.hz-dr:active{background:rgb(250 248 245 / .07)}
@media (hover:hover){.hz-dr:hover .hz-dn{transform:translateX(3px)}.hz-dr:hover .hz-dv{opacity:.72}}
.hz-dr:focus-visible{outline:1px solid var(--pe);outline-offset:-3px}
.hz .hz-chat-based{margin-top:26px;font:500 9.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--le);text-wrap:balance}
@media (max-width:360px){.hz-dn{font-size:23px}.hz-dv{font-size:9.5px;letter-spacing:.13em}}
@media (prefers-reduced-motion:reduce){.hz-dr,.hz-dn,.hz-dv{transition:none}.hz-dr:hover .hz-dn{transform:none}}
/* phones and tablets: the photo sits behind the heading, toned down with Leather so the type reads in Pearl */
@media (max-width:1023px){
 .hz-enq-g{display:grid;grid-template-columns:minmax(0,1fr);padding:0}
 .hz-enq-ph{grid-area:1 / 1;position:relative;margin:0;aspect-ratio:auto;height:100%;background:var(--le)}
 /* the sign sits in the top half, clear of the heading; the type sits over the darker lower half */
 .hz-enq-ph img{position:absolute;left:0;bottom:0;width:100%;height:150%;object-fit:cover;object-position:18% 100%}
 .hz-enq-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(38 38 38 / .34) 0%,rgb(38 38 38 / .5) 38%,rgb(38 38 38 / .74) 56%,rgb(38 38 38 / .8) 100%)}
 .hz-enq-head{grid-area:1 / 1;position:relative;z-index:1;align-self:end;padding:clamp(270px,74vw,330px) var(--gutr) 46px var(--gut)}
 .hz .hz-enq-h{color:var(--pe)}
 .hz-enq-scr{color:var(--kh)}
 .hz .hz-enq-sub{color:var(--kh)}
 .hz .hz-enq-avail{color:var(--pe)}
 .hz-enq-head .hz-more{color:var(--pe)}
 .hz .hz-ef{grid-row:2;margin:0;padding:52px var(--gutr) 64px var(--gut)}
}
@media (min-width:600px) and (max-width:1023px){
 .hz-enq-head{padding:440px 40px 64px}
 .hz-enq-ph img{height:135%;object-position:24% 100%}
 .hz .hz-enq-h{font-size:64px}
 .hz .hz-ef{max-width:720px;margin:0 auto;padding:72px 40px 92px}
 .hz-ef-pair{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
 .hz-chat-g{max-width:560px;padding-top:76px;padding-bottom:72px}
}
@media (min-width:1024px){
 /* photo column bleeding to the left edge; heading and form beside it */
 .hz-enq-g{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);padding:0}
 .hz-enq-ph{order:0;grid-column:1;margin:0;aspect-ratio:auto;height:100%;min-height:100%}
 .hz-enq-ph img{object-position:22% 60%}
 .hz-enq-main{display:block;grid-column:2;max-width:640px;padding:clamp(100px,8.4vw,128px) 56px clamp(100px,8.4vw,124px) clamp(64px,6.4vw,104px)}
 .hz .hz-enq-h{font-size:clamp(56px,4.8vw,72px)}
 .hz .hz-enq-sub{font-size:15px}
 .hz-enq-head .hz-more{font-size:18px}
 .hz .hz-ef{margin-top:52px;padding-top:44px;border-top:1px solid rgb(77 64 58 / .25)}
 .hz-ef-pair{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
 .hz-ef .hz-ef-send{width:auto;min-width:300px}
 /* chat: intro left, directory right */
 .hz-chat-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(64px,8vw,136px);align-items:center;max-width:1240px;padding:clamp(96px,8vw,120px) 56px clamp(92px,7.6vw,112px);text-align:left}
 .hz-chat-intro{align-items:flex-start}
 .hz .hz-chat-h{font-size:clamp(52px,4.4vw,64px)}
 .hz .hz-chat-sub{font-size:15px;text-wrap:pretty}
 .hz-chat .hz-cta{margin-top:30px;font-size:28px}
 .hz-dir{grid-column:2;grid-row:1 / 3;margin:0}
 .hz-dn{font-size:30px}
 .hz-dr{min-height:72px;padding:22px 0 20px}
 .hz .hz-chat-based{grid-column:1;margin-top:28px}
}
/* ---------- footer: Leather; tagline, two link columns, legal line, the wordmark set into the bottom edge ---------- */
.hz.hz-foot{display:block;margin:0;padding:0;border:0;background:var(--le);color:var(--pe);overflow:hidden;text-align:left}
.hz-foot-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;padding-top:60px;padding-bottom:28px}
.hz-foot-intro{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start}
.hz .hz-foot-tag{font:400 clamp(42px,12vw,50px)/1 var(--serif);letter-spacing:-.02em;color:var(--pe)}
.hz-foot-scr{font:400 1.16em/1 var(--script);letter-spacing:0;color:var(--kh);margin-left:.04em}
.hz .hz-foot-sub{margin-top:16px;max-width:24em;font:400 14px/1.7 var(--sans);color:var(--kh);opacity:.86;text-wrap:pretty}
.hz-foot .hz-more{margin-top:10px;font-size:17px;color:var(--pe)}
.hz-foot-col{display:flex;flex-direction:column;align-items:flex-start;margin-top:38px;padding-top:28px;border-top:1px solid rgb(250 248 245 / .16)}
.hz .hz-foot-cap{margin-bottom:6px;font:600 10px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ta)}
.hz-foot .hz-foot-col a{padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-transform:none;display:inline-flex;align-items:center;min-height:40px;font:400 20px/1.2 var(--serif);letter-spacing:-.005em;color:var(--pe);text-decoration:none;overflow-wrap:anywhere;transition:opacity .3s ease}
.hz-foot-col a:active{opacity:.7}
@media (hover:hover){.hz-foot-col a:hover{opacity:.7}}
.hz-foot-col a:focus-visible,.hz-foot-legal a:focus-visible{outline:1px solid var(--pe);outline-offset:3px}
.hz-foot-legal{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;margin-top:34px;padding-top:24px;border-top:1px solid rgb(250 248 245 / .16);font:500 9.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ta)}
.hz-foot-legal a{color:inherit;text-decoration:none}
.hz-foot-mast{padding:0 var(--gutr) 0 var(--gut);max-width:1240px;margin:0 auto;line-height:0}
.hz-foot .hz-foot-mast img{display:block;max-width:none;width:100%;margin-left:0;margin-right:0;height:auto;margin-bottom:-9%;opacity:.96}
@media (max-width:360px){.hz-foot-col a{font-size:18px}}
@media (min-width:600px) and (max-width:1023px){
 .hz-foot-g{padding:80px 40px 32px;column-gap:40px}
 .hz-foot-legal{flex-direction:row;justify-content:space-between}
 .hz-foot-mast{padding:0 40px}
}
@media (min-width:1024px){
 .hz-foot-g{grid-template-columns:minmax(0,1.3fr) minmax(0,.55fr) minmax(0,.75fr);column-gap:clamp(48px,6vw,96px);padding:clamp(88px,7.4vw,110px) 56px 34px}
 .hz-foot-intro{grid-column:1}
 .hz .hz-foot-tag{font-size:clamp(56px,4.6vw,68px)}
 .hz .hz-foot-sub{font-size:15px;margin-top:20px}
 .hz-foot .hz-more{margin-top:auto;padding-top:28px;font-size:19px}
 .hz-foot-col{margin:0;padding:0;border:0}
 .hz-foot-col a{font-size:22px;min-height:44px}
 .hz-foot-legal{flex-direction:row;justify-content:space-between;margin-top:72px;padding-top:26px}
 .hz-foot-mast{padding:0 56px}
}
/* ---------- sound familiar, phones: the photograph toned into the Cacao, dissolving into solid chocolate ----------
   The image takes its light and shade from the photo and its colour from the Cacao (luminosity blend),
   so it reads as a chocolate-toned print rather than a grey photo behind a gradient. Its lower edge is
   masked away, so it melts into the band instead of being covered. */
@media (max-width:1023px){
 .hz-pain-ph{position:absolute;top:0;left:0;right:0;z-index:-1;height:600px;margin:0;overflow:hidden;background:var(--ca);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgb(0 0 0 / .4) 58%,transparent 86%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgb(0 0 0 / .4) 58%,transparent 86%)}
 .hz-pain-ph::after{content:none}
 .hz-pain-ph img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:70% 22%;mix-blend-mode:luminosity;opacity:.36}
 .hz-pain-g{padding:136px var(--gutr) 48px var(--gut)}
 .hz-pain-h{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(44px,13.4vw,54px);line-height:.95;letter-spacing:-.02em}
 .hz-pain-h .hz-scr{margin:-.06em 0 0 1.05em;font-size:1.08em;line-height:1.1;letter-spacing:0}
 .hz-pain-l{margin-top:30px}
 .hz-pain-l li{border:0;padding:0;margin-top:15px;font-size:18px;line-height:1.32;max-width:19em}
 .hz-pain-l li:first-child{margin-top:0}
 .hz-pain-l li:nth-child(4),.hz-pain-l li:nth-child(7){margin-top:30px}
 .hz-pain-side > .hz-more{margin-top:30px;font-size:clamp(18px,5.4vw,21px);gap:12px;white-space:nowrap}
 .hz-pain-side > .hz-more i{width:26px}
 .hz-fit{margin-top:22px;max-width:30em}
 .hz-fit-h{font:italic 400 13.5px/1.3 var(--serif);color:var(--kh);opacity:.72}
 .hz-fit-l{margin-top:6px}
 .hz-fit-l li{display:inline;padding:0;font:400 11px/1.75 var(--sans);color:var(--kh);opacity:.74}
 .hz-fit-l li::before{content:none}
 .hz-fit-l li:not(:last-child)::after{content:"\00a0· "}
}

/* ---------- desktop ---------- */
@media (min-width:1024px){
 .hz-hero-g{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"t ph" "out ph" "lede ph" "acts ph";grid-template-rows:auto auto auto 1fr;column-gap:64px;padding-top:56px;padding-bottom:72px;padding-left:56px;padding-right:56px;align-items:start}
 .hz-k{font-size:10.5px;margin-bottom:22px;max-width:none}
 .hz-h1a{font-size:clamp(84px,8.6vw,120px)}
 .hz-h1b{margin-top:12px;font-size:clamp(38px,3.8vw,52px)}
 .hz-out{align-self:start;margin-top:30px;font-size:27px;max-width:15em;text-wrap:balance}
 .hz-lede{margin-top:16px;font-size:15.5px;max-width:34em}
 .hz-acts{justify-content:flex-start;gap:40px;margin-top:34px}
 .hz-hero-p{align-self:end;justify-self:end;width:min(100%,560px);margin:0}
 .hz-cta{font-size:30px}
 .hz-pain{display:grid;grid-template-columns:42% minmax(0,1fr)}
 .hz-pain-ph{position:relative;top:auto;left:auto;right:auto;z-index:auto;height:auto;min-height:100%;overflow:visible}
 .hz-pain-ph::after{content:none}
 .hz-pain-ph img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:72% 50%;opacity:1}
 .hz-pain-g{max-width:none;margin:0;padding:96px 72px 92px 76px}
 .hz-pain-g > *{max-width:620px}
 .hz-pain-h{font-size:clamp(64px,5.6vw,80px)}
 .hz-pain-l{margin-top:34px}
 /* as on phones: no rules, one left edge, rhythm from spacing (statements grouped in threes) */
 .hz-pain-l li{border:0;padding:0;margin-top:14px;font-size:21px;line-height:1.32}
 .hz-pain-l li:first-child{margin-top:0}
 .hz-pain-l li:nth-child(4),.hz-pain-l li:nth-child(7){margin-top:30px}
 .hz-pain-side > .hz-more{margin-top:36px;font-size:21px}
 .hz-fit{margin-top:26px;max-width:34em}
 .hz-fit-h{font:italic 400 15px/1.3 var(--serif);color:var(--kh);opacity:.72}
 .hz-fit-l{margin-top:6px}
 .hz-fit-l li{display:inline;padding:0;font:400 12px/1.75 var(--sans);color:var(--kh);opacity:.74}
 .hz-fit-l li::before{content:none}
 .hz-fit-l li:not(:last-child)::after{content:"\00a0· "}
}
@media (prefers-reduced-motion:reduce){.hz-more,.hz-cta,.hz-more i,.hz-cta i{transition:none}}


/* ==========================================================================
   OTHER PAGES: chapters of the homepage's design language
   page head · legal prose · FAQs · tick lists · closing band · simple message pages
   ========================================================================== */
/* page head: the homepage hero's label, a serif headline with one script word, a short lede */
.hz-ph{background:var(--kh);overflow:hidden}
.hz-ph-g{position:relative;padding-top:52px;padding-bottom:56px}
.hz .hz-ph-h{font:400 clamp(46px,13.4vw,58px)/.98 var(--serif);letter-spacing:-.02em;color:var(--le);text-wrap:balance}
.hz-ph-h .hz-scr{font:400 1.14em/1 var(--script);letter-spacing:0;color:var(--ca)}
.hz .hz-ph-p{margin-top:20px;max-width:30em;font:400 14.5px/1.75 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-ph .hz-k{margin-bottom:22px}
.hz-ph-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.hz-ph-note{margin-top:16px;font:400 12.5px/1.6 var(--sans);color:var(--dt)}
/* the solid Leather button, as in the hero */
.hz .hz-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 26px;border:0;border-radius:0;background:var(--le);color:var(--pe);font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;transition:background-color .3s ease;-webkit-tap-highlight-color:transparent}
.hz .hz-btn i{position:relative;display:block;flex:none;width:20px;height:9px;transition:width .45s var(--ease)}
.hz .hz-btn i::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor}
.hz .hz-btn i::after{content:"";position:absolute;right:.5px;top:1px;width:6.5px;height:6.5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.hz .hz-btn:active{background:var(--ca)}
@media (hover:hover){.hz .hz-btn:hover{background:var(--ca)}.hz .hz-btn:hover i{width:30px}}
.hz .hz-btn:focus-visible{outline:1px solid var(--le);outline-offset:3px}
@media (max-width:359px){.hz .hz-btn{padding:0 20px;letter-spacing:.2em}}
@media (min-width:600px) and (max-width:1023px){.hz-ph-g{max-width:720px;margin:0;padding:84px 40px 80px}.hz .hz-ph-h{font-size:72px}.hz .hz-ph-p{font-size:15.5px}}
@media (min-width:1024px){
 .hz-ph-g{padding:clamp(104px,8.6vw,132px) 56px clamp(92px,7.6vw,116px)}
 .hz .hz-ph-h{font-size:clamp(76px,6.6vw,96px);max-width:11em}
 .hz .hz-ph-p{margin-top:26px;font-size:16px;max-width:32em}
 .hz-ph .hz-k{font-size:10.5px;margin-bottom:28px}
}

/* legal prose: each part opens on a fine rule; on desktop the heading sits in its own column, like a magazine contents page */
.hz-legal{background:var(--pe)}
.hz-legal-g{padding-top:44px;padding-bottom:76px}
.hz .hz-legal-upd{display:flex;align-items:center;gap:12px;font:600 9.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--dt)}
.hz-legal-upd::before{content:"";width:26px;height:1px;background:var(--ta)}
.hz-legal-s{margin-top:36px;padding-top:26px;border-top:1px solid rgb(163 150 141 / .4)}
.hz .hz-legal-s h2{font:400 28px/1.1 var(--serif);letter-spacing:-.01em;color:var(--le)}
.hz .hz-legal-s p,.hz .hz-legal-s li{font:400 14px/1.8 var(--sans);color:var(--ca);text-wrap:pretty}
.hz .hz-legal-s p{margin-top:14px;max-width:38em}
.hz-legal-s ul{list-style:none;padding:0;margin-top:12px}
.hz .hz-legal-s li{position:relative;padding-left:26px;margin-top:6px}
.hz-legal-s li::before{content:"";position:absolute;left:0;top:.9em;width:14px;height:1px;background:var(--ta)}
.hz-legal-s a{color:var(--le);text-decoration:underline;text-decoration-color:var(--ta);text-underline-offset:3px;text-decoration-thickness:1px}
@media (min-width:600px) and (max-width:1023px){.hz-legal-g{max-width:720px;margin:0;padding:64px 40px 96px}}
@media (min-width:1024px){
 .hz-legal-g{padding:88px 56px 128px}
 .hz-legal-s{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);margin-top:44px;padding-top:34px}
 .hz .hz-legal-s h2{grid-column:1;grid-row:1 / 99;font-size:32px}
 .hz-legal-s > :not(h2){grid-column:2}
 .hz .hz-legal-s > h2 + *{margin-top:4px}
 .hz .hz-legal-s p,.hz .hz-legal-s li{font-size:15px}
}

/* FAQs: questions in serif, a drawn plus that turns to a minus, answers in the body sans */
.hz-faq{list-style:none;margin:0;padding:0;border-bottom:1px solid rgb(163 150 141 / .45)}
.hz-faq details{border-top:1px solid rgb(163 150 141 / .45)}
.hz-faq summary{position:relative;display:block;padding:20px 44px 20px 0;cursor:pointer;list-style:none;font:400 21px/1.25 var(--serif);letter-spacing:-.005em;color:var(--le);-webkit-tap-highlight-color:transparent}
.hz-faq summary::-webkit-details-marker{display:none}
.hz-faq summary::before,.hz-faq summary::after{content:"";position:absolute;right:4px;top:50%;width:15px;height:1px;background:var(--ca);transition:transform .35s var(--ease)}
.hz-faq summary::after{transform:rotate(90deg)}
.hz-faq details[open] summary::after{transform:rotate(0)}
.hz-faq summary:focus-visible{outline:1px solid var(--le);outline-offset:4px}
.hz-faq-a{padding:0 0 24px}
.hz .hz-faq-a p,.hz .hz-faq-a li{font:400 14px/1.8 var(--sans);color:var(--ca);text-wrap:pretty}
.hz .hz-faq-a p + p{margin-top:10px}
.hz-faq-a ul{list-style:none;padding:0;margin-top:8px}
.hz .hz-faq-a li{position:relative;padding-left:24px;margin-top:4px}
.hz-faq-a li::before{content:"";position:absolute;left:0;top:.9em;width:13px;height:1px;background:var(--ta)}
.hz-faq-a a{color:var(--le);text-decoration:underline;text-decoration-color:var(--ta);text-underline-offset:3px}
@media (min-width:1024px){.hz-faq summary{padding:26px 56px 26px 0;font-size:25px}.hz .hz-faq-a p,.hz .hz-faq-a li{font-size:15px;max-width:40em}.hz-faq-a{padding-bottom:30px}}
@media (prefers-reduced-motion:reduce){.hz-faq summary::before,.hz-faq summary::after{transition:none}}

/* tick list: points hanging off a hairline, as in "why not DIY" and the glow-up steps */
.hz-ticks{position:relative;list-style:none;margin:0;padding:0 0 0 24px}
.hz-ticks::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(163 150 141 / .7)}
.hz-ticks > li{position:relative;margin-top:24px}
.hz-ticks > li:first-child{margin-top:0}
.hz-ticks > li::before{content:"";position:absolute;top:.72em;left:-24px;width:14px;height:1px;background:var(--ta)}
.hz .hz-ticks b{display:block;font:400 22px/1.2 var(--serif);letter-spacing:-.01em;color:var(--le)}
.hz .hz-ticks span{display:block;margin-top:6px;font:400 13.5px/1.7 var(--sans);color:var(--ca);text-wrap:pretty}
@media (min-width:1024px){.hz-ticks{padding-left:28px}.hz-ticks > li{margin-top:30px}.hz-ticks > li::before{left:-28px;width:18px}.hz .hz-ticks b{font-size:26px}.hz .hz-ticks span{font-size:14.5px;max-width:30em}}

/* closing band: Cacao, centred, the last word before the contact list */
.hz-band{background:var(--ca);color:var(--pe);text-align:center}
.hz-band-g{display:flex;flex-direction:column;align-items:center;max-width:620px;padding-top:68px;padding-bottom:72px}
.hz .hz-band-h{font:400 clamp(44px,12.6vw,54px)/1 var(--serif);letter-spacing:-.015em;color:var(--pe)}
.hz-band-h .hz-scr{font:400 1.14em/1 var(--script);letter-spacing:0;color:var(--kh)}
.hz .hz-band-p{margin-top:18px;max-width:30em;font:400 14px/1.75 var(--sans);color:var(--kh);text-wrap:balance}
.hz-band .hz-btn{margin-top:28px;background:var(--pe);color:var(--le)}
@media (hover:hover){.hz-band .hz-btn:hover{background:var(--kh)}}
.hz .hz-band-n{margin-top:18px;font:400 12.5px/1.6 var(--sans);color:var(--kh);text-wrap:balance}
.hz-band-n a{color:var(--pe);text-decoration:underline;text-decoration-color:rgb(250 248 245 / .5);text-underline-offset:3px}
@media (min-width:1024px){.hz-band-g{padding-top:112px;padding-bottom:116px}.hz .hz-band-h{font-size:clamp(60px,5vw,72px)}.hz .hz-band-p{font-size:15.5px}}

/* the framed photo (block behind, fine frame offset), usable anywhere */
.hz-fr{position:relative;isolation:isolate;margin:0}
.hz-fr img{position:relative;z-index:2;display:block;width:100%;height:auto}
.hz-fr::before{content:"";position:absolute;z-index:0;top:50%;bottom:-18px;left:62%;right:-100vw;background:var(--ca)}
.hz-fr::after{content:"";position:absolute;z-index:1;inset:16px -16px -16px 16px;border:1px solid var(--ta)}
.hz-fr.hz-fr-r::before{left:-100vw;right:62%}
.hz-fr.hz-fr-r::after{inset:16px 16px -16px -16px}
@media (min-width:1024px){.hz-fr::after{inset:26px -26px -26px 26px}.hz-fr.hz-fr-r::after{inset:26px 26px -26px -26px}.hz-fr::before{bottom:-40px}}

/* 404: the message beside her framed photo */
.hz-404-g{display:flex;flex-direction:column}
.hz .hz-404-s{margin-top:4px;font:400 clamp(30px,8.6vw,36px)/1.1 var(--script);color:var(--ca)}
.hz-404-ph{width:78%;max-width:340px;margin:48px 0 34px calc(-1 * var(--gut))}
.hz-404-ph img{aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
@media (min-width:1024px){.hz-404-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:96px;align-items:center}.hz-404-ph{width:100%;max-width:440px;margin:0 0 40px auto}}
/* the 404 page has its own small header */
body > header.top{padding:18px max(16px,env(safe-area-inset-left,0px));background:var(--kh,#DFDACF)}

/* about page: the homepage profile, opened with a label and a script hello */
.hz .hz-about-k{display:flex;align-items:center;gap:12px;margin-bottom:18px;font:600 9.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ca)}
.hz-about-k::before{content:"";width:26px;height:1px;background:var(--ta)}
@media (max-width:1023px){.hz-about-pg .hz-about-k{align-self:flex-end}}
.hz .hz-about-hi{font:400 clamp(34px,9.6vw,42px)/1 var(--script);color:var(--ca);margin-bottom:10px}
.hz-about-pg .hz-about-p + .hz-about-p{margin-top:14px}
.hz-about-pg .hz-about-more .hz-more{margin-top:4px}
@media (min-width:1024px){.hz .hz-about-hi{font-size:52px}}
/* what to expect: the standing cut-out beside the heading, the promises on a hairline */
.hz-expect{background:var(--pe)}
.hz-expect-g{display:grid;grid-template-columns:minmax(0,1fr) 34%;grid-template-areas:"h ph" "l l";column-gap:12px;padding-top:64px;padding-bottom:72px}
.hz .hz-expect-h{grid-area:h;align-self:center;font:400 clamp(40px,11.4vw,48px)/1 var(--serif);letter-spacing:-.015em;color:var(--le)}
.hz-expect-h .hz-scr{display:block;margin:.04em 0 0 .4em;font:400 1.1em/1.05 var(--script);letter-spacing:0;color:var(--ca)}
.hz-expect-ph{grid-area:ph;margin:0}
.hz-expect-ph img{display:block;width:100%;height:auto}
.hz-expect-l{grid-area:l;margin-top:36px}
@media (min-width:600px) and (max-width:1023px){.hz-expect-g{max-width:720px;margin:0;padding:88px 40px 96px;grid-template-columns:minmax(0,1fr) 30%}}
@media (min-width:1024px){
 .hz-expect-g{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"ph h" "ph l";grid-template-rows:auto 1fr;column-gap:clamp(64px,8vw,128px);padding:clamp(104px,9vw,136px) 56px clamp(110px,9.6vw,140px)}
 .hz-expect-ph{align-self:end;max-width:300px;justify-self:center}
 .hz .hz-expect-h{align-self:end;font-size:clamp(60px,5vw,76px)}
 .hz-expect-l{margin-top:48px}
}
/* closing band label */
.hz-band .hz-k.hz-band-k{justify-content:center;margin-bottom:22px;font-size:9.5px;letter-spacing:.26em;color:var(--kh)}
.hz-band .hz-k.hz-band-k::before{background:var(--kh);opacity:.6}
/* enquire page: the form's reassurance line and the Instagram nudge */
.hz .hz-ef-calm{margin-top:14px;text-align:center;font:italic 400 17px/1.3 var(--serif);color:var(--ca)}
.hz .hz-chat-ig{margin-top:16px;max-width:26em;font:400 12.5px/1.6 var(--sans);color:var(--le);text-wrap:balance}
.hz-chat-ig a{color:var(--le);text-decoration:underline;text-decoration-color:rgb(38 38 38 / .4);text-underline-offset:3px}
.hz-chat .hz-chat-intro .hz-cta{order:0}
@media (min-width:1024px){.hz .hz-ef-calm{text-align:left}}

/* FAQ page: each group heading in serif with its script word; on desktop the heading sits beside its questions */
.hz-faqs{background:var(--pe)}
.hz-faqs-g{padding-top:56px;padding-bottom:80px}
.hz-faq-grp + .hz-faq-grp{margin-top:56px}
.hz .hz-faq-h{margin-bottom:18px;font:400 clamp(34px,9.6vw,40px)/1.02 var(--serif);letter-spacing:-.015em;color:var(--le)}
.hz-faq-h .hz-scr{font:400 1.12em/1 var(--script);letter-spacing:0;color:var(--ca)}
@media (min-width:600px) and (max-width:1023px){.hz-faqs-g{max-width:720px;margin:0;padding:80px 40px 100px}}
@media (min-width:1024px){
 .hz-faqs-g{padding:clamp(100px,8.6vw,128px) 56px clamp(110px,9.6vw,140px)}
 .hz-faq-grp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:start}
 .hz-faq-grp + .hz-faq-grp{margin-top:88px}
 .hz .hz-faq-h{position:sticky;top:120px;margin:22px 0 0;font-size:clamp(44px,3.8vw,56px)}
}

/* service pages: hero, intro text, "why get set up" columns */
.hz-svh-out{margin-top:16px;font:italic 400 clamp(20px,5.6vw,23px)/1.25 var(--serif);color:var(--ca)}
.hz-ph-p2{display:block;margin-top:.9em}
.hz-svh-ph img{aspect-ratio:4/5;object-fit:cover}
.hz-intro{background:var(--pe)}
.hz-intro-g{padding-top:60px;padding-bottom:40px}
.hz .hz-intro-h{font:400 clamp(38px,10.8vw,46px)/1.02 var(--serif);letter-spacing:-.015em;color:var(--le);text-wrap:balance}
.hz-intro-h .hz-scr{font:400 1.12em/1 var(--script);letter-spacing:0;color:var(--ca)}
.hz .hz-intro-p{margin-top:18px;max-width:34em;font:400 14.5px/1.8 var(--sans);color:var(--ca);text-wrap:pretty}
.hz-why{background:var(--pe)}
.hz-why-g{padding-top:64px;padding-bottom:64px}
.hz-why .hz-k{margin-bottom:20px}
.hz-why-cols{position:relative;margin-top:36px;padding-left:24px}
.hz-why-cols::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(163 150 141 / .7)}
.hz-why-c{position:relative}
.hz-why-c + .hz-why-c{margin-top:34px}
.hz-why-c::before{content:"";position:absolute;top:.7em;left:-24px;width:14px;height:1px;background:var(--ta)}
.hz .hz-why-n{font:400 24px/1.15 var(--serif);color:var(--le)}
.hz .hz-why-c p{margin-top:10px;max-width:32em;font:400 13.5px/1.75 var(--sans);color:var(--ca)}
.hz .hz-why-c p.hz-why-k{font:italic 400 18px/1.35 var(--serif);color:var(--le)}
.hz .hz-why-close{margin-top:36px;max-width:22em;font:400 clamp(22px,6.2vw,26px)/1.3 var(--serif);color:var(--le)}
.hz-why .hz-more{margin-top:10px}
.hz-cards-intro{max-width:44em;margin:0 auto 28px;font:400 14px/1.75 Montserrat,Arial,sans-serif;color:#4D403A;text-align:center}
.hz-faqs-more{margin-top:28px}
.hz.hz-diy.hz-diy-pg{padding-bottom:64px}
.hz .hz-diy-note{margin-top:28px;max-width:30em;font:400 13px/1.7 var(--sans);color:var(--ca)}
.hz .hz-diy-cta{margin-top:22px;max-width:30em;font:italic 400 19px/1.35 var(--serif);color:var(--le)}
.hz-diy-cta .hz-more{display:flex;width:max-content;margin-top:8px;font-style:italic}
.hz-glow-pg .hz-glow-top{display:block}
@media (min-width:1024px){
 .hz-intro-g{padding:clamp(100px,8.6vw,128px) 56px 40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(56px,7vw,112px);align-items:end}
 .hz .hz-intro-h{font-size:clamp(52px,4.4vw,64px)}
 .hz .hz-intro-p{font-size:16px;margin:0}
 .hz-why-g{padding:clamp(100px,8.6vw,128px) 56px}
 .hz-why-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(40px,4vw,64px);padding:28px 0 0;border-top:1px solid var(--ta)}
 .hz-why-cols::before{content:none}
 .hz-why-c + .hz-why-c{margin-top:0}
 .hz-why-c::before{left:0;top:-28px;width:1px;height:20px}
 .hz .hz-why-n{font-size:28px}
 .hz .hz-why-close{margin-top:56px;font-size:32px;max-width:24em}
 .hz.hz-diy.hz-diy-pg{padding-bottom:120px}
}

/* service cards: long package names wrap instead of running off the card */

.hz-intro-after .hz-intro-g{padding-top:56px;padding-bottom:64px}
.hz-intro-more{margin-top:26px}
.hz .hz-intro-note{margin-top:14px;max-width:34em;font:400 13.5px/1.75 var(--sans);color:var(--ca)}
.hz-intro-note b{font:italic 400 18px/1.3 var(--serif);color:var(--le)}
.hz-intro-note a{color:var(--le);text-decoration:underline;text-decoration-color:var(--ta);text-underline-offset:3px}
@media (min-width:1024px){.hz-intro-after .hz-intro-g{padding:clamp(100px,8.6vw,128px) 56px}.hz-intro-more{grid-column:2}}

/* service-page heroes: the original photos, as they were */
.hz-svh-pe{background:var(--pe)}
.hz-svh-cut{margin:36px auto 0;max-width:420px}
.hz-svh-cut img{display:block;width:100%;height:auto}
@media (min-width:1024px){.hz-svh-cut{margin:0 0 0 auto;max-width:560px;width:100%}}
/* link-in-bio: the soft sofa photo behind the heading, washed in white */
.hz-svh-bg{background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url("img/lib-sofa-m.webp") center 55%/cover no-repeat}
@media (min-width:768px){.hz-svh-bg{background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url("img/lib-sofa.webp") center 55%/cover no-repeat}}
@media (min-width:1024px){.hz-svh-bg .hz-404-g{display:block}.hz-svh-bg .hz-404-t{max-width:620px}}

/* websites + get set up, phones and tablets: heading, then the photo, then the words */
@media (max-width:1023px){
 .hz-svh-pe .hz-404-t{display:contents}
 .hz-svh-pe .hz-404-g > *,.hz-svh-pe .hz-404-t > *{order:3}
 .hz-svh-pe .hz-k{order:1}
 .hz-svh-pe .hz-ph-h{order:1}
 .hz-svh-pe .hz-svh-cut{order:2;margin:28px auto 10px}
 .hz-svh-pe .hz-svh-out{margin-top:20px}
}

/* ---------- colour rhythm: no two neighbouring sections share a colour ---------- */
.hz.hz-bg-pe{background:var(--pe)}
.hz.hz-bg-kh{background:var(--kh)}
/* a Cacao band, with the type reversed */
.hz.hz-dark{background:var(--ca);color:var(--pe)}
.hz.hz-dark .hz-intro-h,.hz.hz-dark .hz-why-n,.hz.hz-dark .hz-why-close,.hz.hz-dark .hz-why-c p.hz-why-k,.hz.hz-dark .hz-more,.hz.hz-dark .hz-intro-note b,.hz.hz-dark .hz-intro-note a{color:var(--pe)}
.hz.hz-dark .hz-intro-h .hz-scr,.hz.hz-dark .hz-intro-p,.hz.hz-dark .hz-why-c p,.hz.hz-dark .hz-intro-note,.hz.hz-dark .hz-k{color:var(--kh)}
.hz.hz-dark .hz-k::before{background:var(--kh);opacity:.6}
.hz.hz-dark .hz-why-cols::before{background:rgb(223 218 207 / .45)}
.hz.hz-dark .hz-why-c::before{background:var(--kh)}
@media (min-width:1024px){.hz.hz-dark .hz-why-cols{border-top-color:rgb(223 218 207 / .5)}}
/* review on Khaki: the quotation mark in Pearl so it still shows */
.hz.hz-rv.hz-bg-kh .hz-rv-lead::before,.hz.hz-rv.hz-bg-kh .hz-rv-body::before{color:var(--pe)}
.hz.hz-rv.hz-bg-kh .hz-rv-src{color:var(--ca)}
/* 404's own small header sits on Pearl above the Khaki message */
body > header.top{background:var(--pe,#FAF8F5)}
.hz-steps::before,.hz-diy-l::before,.hz-ticks::before,.hz-why-cols::before,.hz.hz-diy .hz-diy-l::before{top:var(--ls,0px)!important;bottom:var(--le,0px)!important}

/* ---------- service cards and their "what's included" pop-up: no lines between points ---------- */
html body .pkx .pkx-inc,html body .pkx .pkx-inc .pkx-i{border-top:0 !important;border-bottom:0 !important}
html:not(.zz-a):is(*,#zq#zq#zq#zq) body:not(.zz-x):not(.zz-y):not(.zz-z):not(.zz-w):not(.zz-v):not(.zz-u):not(.zz-t) .pk2-c ul,html:not(.zz-a):is(*,#zq#zq#zq#zq) body:not(.zz-x):not(.zz-y):not(.zz-z):not(.zz-w):not(.zz-v):not(.zz-u):not(.zz-t) .pk2-c li{border-top:0 !important;border-bottom:0 !important}
html:not(.zz-a):is(*,#zq#zq#zq#zq) body:not(.zz-x):not(.zz-y):not(.zz-z):not(.zz-w):not(.zz-v):not(.zz-u):not(.zz-t) .pk2-c li{padding-top:6px !important;padding-bottom:6px !important}
/* phones: each point's dash runs in from the left edge of the screen */
@media (max-width:1023px){
 html body .pkx .pkx-inc .pkx-i::before{flex:none !important;width:36px !important;margin-left:-24px !important}
 html body .pkx.pkx-aux .pkx-inc .pkx-i::before{width:32px !important}
 html:not(.zz-a):is(*,#zq#zq#zq#zq) body:not(.zz-x):not(.zz-y):not(.zz-z):not(.zz-w):not(.zz-v):not(.zz-u):not(.zz-t) .pk2-c li::before{left:-24px !important;width:38px !important}
 .hz .hz-legal-s li::before{left:calc(-1 * var(--gut)) !important;width:calc(var(--gut) + 14px) !important}
 .hz-faq-a li::before{left:calc(-1 * var(--gut)) !important;width:calc(var(--gut) + 13px) !important}
}

/* service menu: no numbers; the dividers are half-length and staggered */
.hz.hz-where .hz-opt-q::before{content:none}
.hz.hz-where .hz-opts .hz-opt{position:relative}
.hz.hz-where .hz-opts .hz-opt + .hz-opt{border-top:0;border-left:0}
.hz.hz-where .hz-opts .hz-opt + .hz-opt::before{content:"";position:absolute;top:0;height:1px;width:50%;background:rgb(250 248 245 / .22)}
.hz.hz-where .hz-opts .hz-opt:nth-child(2)::before{left:0}
.hz.hz-where .hz-opts .hz-opt:nth-child(3)::before{right:0}
@media (min-width:1024px){
 .hz.hz-where .hz-opts .hz-opt + .hz-opt::before{width:1px;height:50%;left:0;right:auto}
 .hz.hz-where .hz-opts .hz-opt:nth-child(2)::before{top:0}
 .hz.hz-where .hz-opts .hz-opt:nth-child(3)::before{top:auto;bottom:0}
}

/* every button the same shape as the homepage's: square corners */
html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .pill.h-chat,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .btn,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) a.btn,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) button.btn,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .pk2-more,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .pk2-enq,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .pk2-go,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .ty-book,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .lk-q,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .ty-wa,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .ef-send,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .lk-chat,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .sticky-chat,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .enq-start,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) .enq-go{border-radius:0 !important}

html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) #enquiry-form-pop button.ef-send,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) #enquiry-form button.ef-send,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) #lk-pop .btn,html body:not(.zq-a):not(.zq-b):not(.zq-c):not(.zq-d):not(.zq-e):not(.zq-f):not(.zq-g):not(.zq-h) #ty-pop .btn{border-radius:0 !important}

/* ---------- phones and tablets: "Why not DIY" opens with its photo, rising into the section above;
   the photo sections clip sideways only, so photos that rise into the section above are never cut off ---------- */
@media (max-width:1023px){
 .hz.hz-where,.hz.hz-diy,.hz.hz-glow{overflow:visible;clip-path:inset(-2000px 0 -2000px 0)}
 .hz.hz-diy{position:relative;z-index:1}
 .hz.hz-glow{position:relative;z-index:2}
 .hz.hz-diy .hz-diy-in{display:flex;flex-direction:column}
 .hz.hz-diy .hz-diy-ph{order:-1;margin-top:calc(-56px - 21vw);margin-bottom:46px}
 .hz.hz-diy .hz-diy-h{margin-top:0}
}
@media (min-width:600px) and (max-width:1023px){.hz.hz-diy .hz-diy-ph{margin-top:calc(-84px - 150px);margin-bottom:64px}}
/* the glow-up photo: laptop and hand */
.hz-glow .hz-ph-d img{object-position:50% 42%}

@media (max-width:1023px){
 .hz.hz-where .hz-where-g{padding-bottom:calc(64px + 21vw)}
 html body section.svc-page.hz-cards{padding-bottom:calc(40px + 21vw) !important}
}
@media (min-width:600px) and (max-width:1023px){.hz.hz-where .hz-where-g{padding-bottom:240px}html body section.svc-page.hz-cards{padding-bottom:220px !important}}

/* enquire page: the mirror selfie behind the heading on phones, framed by the photo column on desktop */
.hz-enq-mirror .hz-enq-ph img{object-position:50% 22%}
@media (max-width:1023px){.hz-enq-mirror .hz-enq-ph img{height:115%;object-position:50% 0}}
@media (min-width:1024px){.hz-enq-mirror .hz-enq-ph img{object-position:50% 30%}}

/* ---------- mobile fixes ---------- */
/* the package cards section never paints over a photo rising out of the section below */
html body section.svc-page.hz-cards{position:relative;z-index:0 !important}
html body section.svc-page.hz-cards .ww{background:transparent !important}
@media (max-width:1023px){
 html body section.svc-page.hz-cards{padding-top:0 !important}
 html body section.svc-page.hz-cards .cat-sec,html body section.svc-page.hz-cards .cat-sec > .wrap{padding-top:0 !important;margin-top:0 !important}
 /* the Signature reads from the right, so its dashes run off the right-hand edge */
 html body .pkx.pkx-v2 .pkx-inc .pkx-i{flex-direction:row-reverse !important;text-align:right !important}
 html body .pkx.pkx-v2 .pkx-inc .pkx-i::before{margin-left:0 !important;margin-right:-24px !important}
}
@media (max-width:1023px){html body section.svc-page.hz-cards .cat-sec > .wrap > .grp{padding-top:0 !important}}

/* ---------- link-in-bio, phones: hero photo under the heading, add-ons in their own colour bands ---------- */
.hz-svh-bg .hz-svh-ph{display:none}
@media (max-width:1023px){
 .hz.hz-svh-bg{background:var(--pe)}
 .hz-svh-bg .hz-404-t{display:contents}
 .hz-svh-bg .hz-404-g > *,.hz-svh-bg .hz-404-t > *{order:3}
 .hz-svh-bg .hz-k,.hz-svh-bg .hz-ph-h{order:1}
 .hz-svh-bg .hz-svh-ph{display:block;order:2;margin:28px 0 14px;aspect-ratio:4/5;overflow:hidden}
 .hz-svh-bg .hz-svh-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
 /* no Khaki strip between the add-ons and "Why not just use Linktree?" */
 html body section.svc-page.hz-cards:has(+ .hz-intro-after){padding-bottom:0 !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body section.svc-page.hz-cards:has(+ .hz-intro-after) .cat-sec{padding-bottom:0 !important}
 /* each add-on sits on its own colour, running edge to edge */
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body .pkx-aux-row{margin-bottom:0 !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body .pkx-aux-row::after{display:none !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body .pkx-aux-row details.opt{position:relative;border:0 !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;padding-left:calc(50vw - 50%) !important;padding-right:calc(50vw - 50%) !important;background:var(--ab) !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body .pkx-aux-row details.opt .pkx-aux{padding:44px 4px 44px !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body .pkx-aux-row details.opt:first-of-type .pkx-aux{padding-top:30px !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #update-plan{--ab:#B7ADA2}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #written-for-you{--ab:#DFDACF}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #extra-services{--ab:#4D403A}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #extra-services .pkx-aux{padding-bottom:64px !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #extra-services *{color:#FAF8F5 !important;-webkit-text-fill-color:#FAF8F5 !important;border-color:rgb(250 248 245 / .45) !important}
 html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #extra-services .pkx-lead,html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #extra-services *::before,html:is(*,#zq#zq#zq#zq#zq#zq#zq#zq#zq#zq) body #extra-services *::after{background-color:rgb(250 248 245 / .8) !important;opacity:1 !important}
}