/* Hilary Edwards — concept 1, "The Practice".

   She has no website, no logo and no brand colours of her own, so nothing here
   was sampled from an existing asset. This palette is a PROPOSAL, and the picker
   page says so in as many words. It is built to read as a clinician's rooms
   rather than as a wellness brand: a deep petrol that carries the type, an oat
   paper ground, and a single clay accent.

   Colour discipline is borrowed from the SDT "Zero dependencies" reference:
   colour carries a verdict, not decoration. Clay appears on exactly two things,
   the primary call to action and the confirmed state. Structure is carried by
   ink, rules and space, so when the accent does land it means something.

     #12383A  petrol, the ink
     #F2ECE1  oat, the ground
     #FBF7F0  paper, raised surfaces
     #A9553B  clay, 5.09:1 on oat, the accent and the button
     #5C7F6B  sage, decorative only
*/

:root{
  --ink:#12383A;
  --ink-soft:#4A6365;
  --oat:#F2ECE1;
  --paper:#FBF7F0;
  --tint:#E8E0D2;
  --clay:#A9553B;          /* 5.09:1 on oat, 5.44:1 on paper — safe as text AND fill */
  --clay-deep:#8A422C;     /* 7.05:1 — hover and headings */
  --sage:#5C7F6B;
  --sage-txt:#3F6151;      /* 5.31:1 on oat */
  --line:rgba(18,56,58,.16);
  --line-soft:rgba(18,56,58,.09);
  --accent:#A9553B;        /* the shared hero quiz bundle reads this */
  --r:6px;                 /* deliberately tight. soft radius everywhere is a vibecoded tell */
  --wrapw:1180px;
  --hd:74px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--oat); color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.66; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* width/height attributes on an <img> map to a presentational height hint, which
   silently kills aspect-ratio unless the author CSS also sets height */
img{max-width:100%; display:block; height:auto}
a{color:var(--clay-deep)}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:500; line-height:1.1; margin:0 0 .5em; letter-spacing:-.012em}
h1{font-size:clamp(38px,6.4vw,72px); font-weight:400}
h2{font-size:clamp(29px,4.2vw,46px)}
h3{font-size:clamp(19px,2.1vw,23px); font-weight:600; letter-spacing:0}
h4{font-size:17px; font-weight:600; letter-spacing:0}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,var(--wrapw)); margin-inline:auto}
/* anchor links clear the sticky header on their own, because the only other
   scroll offset lives in Lenis and Lenis is desktop only */
section[id]{scroll-margin-top:calc(var(--hd) + 12px)}
[hidden]{display:none !important}
.tiny{font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0}
.mock{color:var(--clay-deep); font-weight:600}

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sage-txt); margin:0 0 14px;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; border-radius:var(--r); border:1px solid transparent;
  font-family:'Karla',sans-serif; font-size:16px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-pri{background:var(--clay); color:#fff}
.btn-pri:hover{background:var(--clay-deep)}
.btn-gho{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-gho:hover{border-color:var(--ink)}
.btn-sm{min-height:44px; padding:0 18px; font-size:15px}
.btn-full{width:100%}
.btn:disabled{background:#CFC6B6; color:#4A4238; cursor:not-allowed}

/* ---------------------------------------------------------------- header */
.prog{position:fixed; top:0; left:0; height:2px; width:0; background:var(--clay); z-index:80}
.hd{
  position:sticky; top:0; z-index:60; background:rgba(242,236,225,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft);
}
.hd-in{display:flex; align-items:center; gap:22px; min-height:var(--hd)}
.brand{display:flex; align-items:center; min-height:44px; flex:0 0 auto}
.brand img{height:38px; width:auto}
.nav{display:flex; gap:26px; margin-left:auto}
.nav a{
  color:var(--ink); text-decoration:none; font-size:15px; font-weight:500;
  padding:13px 0; border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--clay)}
.hd-cta{flex:0 0 auto}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line); background:transparent; border-radius:var(--r); cursor:pointer; position:relative}
.burger span,.burger::before,.burger::after{content:''; position:absolute; left:12px; right:12px; height:2px; background:var(--ink); transition:transform .2s ease,opacity .2s ease}
.burger span{top:21px}
.burger::before{top:14px}
.burger::after{top:28px}
.mnav{display:none}

/* ---------------------------------------------------------------- hero */
.hero{position:relative; padding:clamp(46px,7vw,92px) 0 clamp(52px,7vw,96px); overflow:hidden}
.hero-rule{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px);
  background-size:100% 42px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 78%);
}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,60px); align-items:center}
.hero-copy{max-width:620px}
/* the headline names the service and carries the weight, because a visitor who
   has just been diagnosed should not have to read a clever line to work out
   what this page is. The old line keeps its job as the promise underneath. */
.hero h1{font-weight:600; margin-bottom:.16em}
.hero-sub{
  font-family:'Fraunces',Georgia,'Times New Roman',serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,3vw,34px); line-height:1.18; letter-spacing:-.012em;
  color:var(--clay-deep); margin:0 0 18px;
}
h1 .em{color:var(--clay-deep); font-style:italic}
h1 span{display:inline-block; opacity:0; transform:translateY(16px); filter:blur(5px); transition:opacity .6s ease,transform .6s ease,filter .6s ease}
h1.in span{opacity:1; transform:none; filter:none}
.lede{font-size:clamp(17px,1.8vw,20px); color:var(--ink-soft); max-width:56ch; margin-top:6px}
.creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.creds span{
  font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 13px;
}
/* the shared quiz takes the right hand visual's grid slot; once the hero stacks
   the quiz falls back to its own placement and this placeholder is dead space */
.hero-fig{min-height:420px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper)}

/* ---------------------------------------------------------------- strip */
.strip{background:var(--ink); color:var(--oat); padding:20px 0}
.strip-in{display:flex; flex-wrap:wrap; gap:6px 26px; align-items:baseline}
.strip p{margin:0; font-size:15.5px}
.strip p:first-child{font-weight:700}
.strip a{color:#F0C8B6; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:11px 0}

/* ---------------------------------------------------------------- photography
   Every photo here is illustrative, so it is framed as evidence of the WORK
   (a desk, a meter, a pill box, a room) and never of Hilary herself. Only the
   about portrait is really her.
     - object-position sits high on purpose, per the standing no cropped heads
       rule. These frames have no faces, but the band ratios are aggressive and
       the subject always lives in the upper half.
     - the band is full bleed and locked to the source 21:9, so the crop never
       eats the meter on the desk no matter how wide the viewport gets. */
.band{margin:0; position:relative}
.band img{
  display:block; width:100%; height:clamp(200px,26vw,340px);
  /* the subject in this frame is the desk, which sits in the lower half, so a
     centred crop cuts the meter in half at every band height */
  object-fit:cover; object-position:50% 76%;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.band figcaption{
  position:absolute; right:0; bottom:0; padding:7px 14px;
  background:rgba(251,247,240,.92); border-top-left-radius:var(--r);
  font-size:12px !important;
}

.fig{margin:26px 0 0}
.fig img{display:block; width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line)}
.fig figcaption{margin-top:8px; font-size:12.5px !important}
/* full wrap width, so the native 16:9 would run over 600px tall and hand the
   section a wall of empty paint. Cropped to a letterbox and pushed down onto
   the chairs, the table and the plant, which is the part that says "a room you
   can sit down in". */
.fig-wide{margin:0 0 clamp(26px,3vw,40px)}
.fig-wide img{height:clamp(220px,24vw,320px); object-fit:cover; object-position:50% 88%}

/* the photo takes the narrow column and the note moves under the copy. Putting
   the tall 4:5 frame opposite a short aside left a visible hole in the left
   column, and the note reads better directly after the service copy anyway. */
.rev-fig{margin:0}
.rev-note{margin-top:26px}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(52px,7vw,96px) 0}
.sec-tint{background:var(--tint)}
.head{max-width:60ch; margin-bottom:clamp(26px,3vw,42px)}
[data-rev]{opacity:0; transform:translateY(18px); filter:blur(4px); transition:opacity .7s ease,transform .7s ease,filter .7s ease}
[data-rev].in{opacity:1; transform:none; filter:none}

/* ------- service one */
.svc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start}
.svc-lede .pull{
  font-family:'Fraunces',Georgia,serif; font-size:clamp(19px,2.2vw,25px); line-height:1.34;
  color:var(--ink); border-left:2px solid var(--clay); padding-left:20px; margin-top:26px;
}
.svc-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.svc-list li{padding:22px 0; border-bottom:1px solid var(--line)}
.svc-list h3{margin:0 0 6px}
.svc-list p{margin:0; color:var(--ink-soft); font-size:15.5px}

/* ------- service two */
.rev{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:start}
.ticks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.ticks li{position:relative; padding-left:26px; font-weight:600; font-size:15.5px}
.ticks li::before{
  content:''; position:absolute; left:0; top:.62em; width:10px; height:2px; background:var(--clay);
}
.rev-note{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px}
.rev-note h3{margin-top:0}
.rev-note p{font-size:15.5px; color:var(--ink-soft)}

/* ------- about */
.abt{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,60px); align-items:start}
.abt-fig{margin:0}
.abt-fig img{border-radius:var(--r); border:1px solid var(--line); width:100%}
.tl{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line)}
.tl li{display:grid; grid-template-columns:88px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline}
.tl b{font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; color:var(--clay-deep)}
.tl span{color:var(--ink-soft); font-size:15.5px}

/* ------- places */
.places{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.place{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; gap:4px}
.place h3{margin:0 0 4px}
.place .addr{font-weight:600; font-size:15px; color:var(--ink); margin:0 0 8px}
.place p{color:var(--ink-soft); font-size:15.5px; margin:0 0 8px}
.place-mock{background:transparent; border-style:dashed}

/* ------- questions */
.qa .acc{max-width:860px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:'Fraunces',Georgia,serif; font-size:clamp(18px,2vw,21px); font-weight:600; line-height:1.3;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:''; position:absolute; right:8px; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
details div{padding:0 0 20px}
details p{margin:0; color:var(--ink-soft)}

/* ------- ask */
.sec-ask{background:var(--ink); color:var(--oat)}
.sec-ask .eyebrow{color:#9FBDAE}
.sec-ask h2{color:var(--paper)}
.sec-ask p{color:#CBD8D4}
.ask{display:grid; grid-template-columns:1fr .9fr; gap:clamp(28px,4vw,60px); align-items:center}
.card{
  background:var(--paper); border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:26px; color:var(--ink);
}
/* a white card dropped into a dark section inherits the section's light headings */
.sec-ask .card h3,.sec-ask .card p{color:var(--ink)}
.sec-ask .card .tiny{color:var(--ink-soft)}
.card-brand{
  margin:-26px -26px 22px; padding:20px 26px 18px; text-align:center;
  background:linear-gradient(180deg,rgba(169,85,59,.10),rgba(169,85,59,0));
  border-bottom:1px solid var(--line-soft);
}
.card-brand img{height:52px; width:auto; margin:0 auto}

/* floating label fields, 56px targets — SDT @zanderwhitehurst */
.fld{position:relative; margin-bottom:14px}
.fld input,.fld select{
  width:100%; height:56px; padding:20px 14px 6px; font-family:'Karla',sans-serif; font-size:16px;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--r);
  appearance:none; transition:border-color .16s ease,box-shadow .16s ease;
}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px; background-size:6px 6px,6px 6px; background-repeat:no-repeat}
.fld label{
  position:absolute; left:15px; top:17px; font-size:16px; color:var(--ink-soft);
  pointer-events:none; transition:transform .16s ease,font-size .16s ease,color .16s ease;
  transform-origin:0 0;
}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(169,85,59,.16)}
.fld input:focus + label,
.fld input:not(:placeholder-shown) + label,
.fld select:focus + label,
.fld select.has + label{transform:translateY(-11px) scale(.72); color:var(--clay-deep)}
.card .tiny{margin-top:12px}

/* the verdict state — the only other place clay is allowed */
.ok{display:none; align-items:flex-start; gap:12px; margin-top:16px; padding:16px; border:1px solid var(--clay); border-radius:var(--r); background:rgba(169,85,59,.07)}
.ok[data-on]{display:flex}
.ok p{margin:0; font-size:15px}
.ok-mark{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--clay); margin-top:2px;
  position:relative;
}
/* two keyframes, transform-origin does the arc — SDT "Zero dependencies" */
.ok-mark::after{
  content:''; position:absolute; left:6px; top:10px; width:5px; height:9px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(0); transform-origin:50% 50%;
  animation:tick .42s cubic-bezier(.2,.9,.3,1.3) .08s forwards;
}
@keyframes tick{from{transform:rotate(-90deg) scale(0)} to{transform:rotate(45deg) scale(1)}}

/* ---------------------------------------------------------------- footer */
.ft{background:var(--ink); color:#CBD8D4; padding:clamp(44px,6vw,72px) 0 26px; border-top:1px solid rgba(255,255,255,.08)}
.ft-in{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px}
.flogo{height:40px; width:auto; margin-bottom:16px}
.ft p{font-size:15px; margin:0}
.ft h4{color:var(--paper); margin:0 0 12px}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.ft a{color:#CBD8D4; text-decoration:none; font-size:15px; display:inline-block; padding:10px 0}
.ft a:hover{color:#fff; text-decoration:underline}
.ft-bar{
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center;
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10);
}
.ft-bar p{font-size:13.5px}
/* the attribution takes the site's own footer font and muted colour, with the
   name in this site's accent — never a fixed Scalus coloured chip */
.by{font-size:13.5px; color:#CBD8D4; text-decoration:none; padding:12px 0; display:inline-block}
.by b{color:#E4A188; font-weight:700}
.by:hover{text-decoration:underline}
.disc{margin-top:20px !important; font-size:12.5px !important; line-height:1.6; color:#93A7A4 !important; max-width:none}

/* ---------------------------------------------------------------- bottom dock
   The idea comes from the scalus.app liquid glass dock, the finish does not.
   That one is iOS chrome on a dark product site. This one is the same material
   as this page's own header: a light blurred sheet, a hairline rim, the tight
   6px radius, Karla labels, and exactly one clay tile so the row has a focal
   point and the accent still means "this is the thing to press".
   Replaces the old .pinbar, which owned the same strip of screen. */
.dk{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; justify-content:center;
  padding:0 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;
  transform:translateY(150%); transition:transform .34s cubic-bezier(.2,.9,.3,1);
}
.dk.in{transform:none}
.dk-in{
  position:relative; display:flex; align-items:center; gap:2px; padding:5px;
  background:rgba(251,247,240,.88); backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 34px rgba(18,56,58,.16);
  pointer-events:auto; max-width:100%;
}
.dk-i{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:46px; padding:0 16px; border:0; background:transparent; cursor:pointer;
  font-family:'Karla',sans-serif; font-size:14px; font-weight:600; letter-spacing:.005em;
  color:var(--ink-soft); text-decoration:none; border-radius:4px; white-space:nowrap;
  transition:color .18s ease;
}
.dk-i:hover{color:var(--ink)}
.dk-i.on{color:var(--ink)}
.dk-i:focus-visible{outline:2px solid var(--clay); outline-offset:2px}
/* the one action, and the only clay in the row */
.dk-cta{background:var(--clay); color:#fff}
.dk-cta:hover,.dk-cta.on{background:var(--clay-deep); color:#fff}
/* the pill sits INSIDE the sheet rather than on top of it, which is what stops
   the dock reading as a row of buttons on a tray */
.dk-pill{
  position:absolute; left:0; top:5px; height:46px; width:0; opacity:0;
  background:var(--tint); border-radius:4px; z-index:0;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),width .3s cubic-bezier(.2,.9,.3,1),opacity .2s ease;
}
.dk-dot{
  width:7px; height:7px; border-radius:50%; background:var(--clay);
  box-shadow:0 0 0 0 rgba(169,85,59,.45); animation:dkdot 2.4s ease-out infinite;
}
@keyframes dkdot{
  0%{box-shadow:0 0 0 0 rgba(169,85,59,.45)}
  70%{box-shadow:0 0 0 7px rgba(169,85,59,0)}
  100%{box-shadow:0 0 0 0 rgba(169,85,59,0)}
}
/* exactly one chat entry point at any width: the floating pill invites on
   desktop, the dock carries it on a phone */
.dk-chat{display:none}
body.has-dock{padding-bottom:86px}
/* the panel and the dock own the same strip of screen */
html.hec-open .dk{transform:translateY(150%)}

/* ---------------------------------------------------------------- chat
   Same tokens as the rest of the page. The header takes the petrol block the
   strip and the enquiry section already use, so the widget reads as part of
   the site rather than a bolted on product. */
.hec-fab{
  position:fixed; right:22px; bottom:22px; z-index:72;
  display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 20px;
  background:var(--ink); color:var(--oat); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); cursor:pointer;
  font-family:'Karla',sans-serif; font-size:15px; font-weight:600;
  box-shadow:0 14px 34px rgba(18,56,58,.26);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hec-fab svg{width:19px; height:19px}
.hec-fab:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(18,56,58,.32)}
.hec-fab:focus-visible{outline:2px solid var(--clay); outline-offset:3px}
.hec-fab.on span{display:none}
.hec-fab.on{padding:0 16px}

.hec{
  position:fixed; right:22px; bottom:86px; z-index:73;
  width:min(384px,calc(100vw - 32px)); height:min(560px,72vh);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 26px 60px rgba(18,56,58,.24);
}
.hec[hidden]{display:none}
.hec-hd{
  display:flex; align-items:center; gap:12px; padding:15px 16px;
  background:var(--ink); color:var(--oat);
}
.hec-hd-b{display:grid; flex:1 1 auto; min-width:0}
.hec-hd-b b{font-family:'Fraunces',Georgia,serif; font-size:17px; font-weight:600; letter-spacing:-.01em}
.hec-hd-b span{font-size:12.5px; color:#9FBDAE}
.hec-x{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:4px;
  color:var(--oat); cursor:pointer;
}
.hec-x svg{width:15px; height:15px}
.hec-x:hover{background:rgba(255,255,255,.09)}

.hec-log{flex:1 1 auto; overflow-y:auto; padding:16px; display:grid; gap:10px; align-content:start}
.hec-m{max-width:86%; padding:11px 14px; border-radius:var(--r); font-size:15px; line-height:1.5}
.hec-bot{background:var(--oat); border:1px solid var(--line-soft); color:var(--ink); justify-self:start}
.hec-you{background:var(--ink); color:var(--paper); justify-self:end}
.hec-go{
  display:block; margin-top:10px; width:100%; min-height:44px; padding:0 16px;
  background:var(--clay); color:#fff; border:0; border-radius:4px; cursor:pointer;
  font-family:'Karla',sans-serif; font-size:14.5px; font-weight:700;
}
.hec-go:hover{background:var(--clay-deep)}
.hec-dots{display:inline-flex; gap:4px; padding:3px 0}
.hec-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--ink-soft);
  animation:hecd 1.1s ease-in-out infinite;
}
.hec-dots span:nth-child(2){animation-delay:.15s}
.hec-dots span:nth-child(3){animation-delay:.3s}
@keyframes hecd{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

.hec-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 4px}
.hec-chips:empty{display:none}
.hec-chip{
  min-height:38px; padding:0 12px; background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:4px; color:var(--ink);
  font-family:'Karla',sans-serif; font-size:13.5px; font-weight:600;
}
.hec-chip:hover{border-color:var(--clay); color:var(--clay-deep)}

.hec-f{display:flex; gap:8px; padding:12px 16px 0}
.hec-f input{
  flex:1 1 auto; min-width:0; height:48px; padding:0 14px;
  font-family:'Karla',sans-serif; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:4px;
}
.hec-f input:focus{outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(169,85,59,.16)}
.hec-f button{
  flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center;
  background:var(--clay); color:#fff; border:0; border-radius:4px; cursor:pointer;
}
.hec-f button:hover{background:var(--clay-deep)}
.hec-f button svg{width:19px; height:19px}
.hec-note{padding:9px 16px 14px; margin:0; font-size:12px; color:var(--ink-soft)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr}
  .hero-fig{display:none}
  .svc,.rev,.abt,.ask{grid-template-columns:1fr}
  .places{grid-template-columns:1fr 1fr}
  .abt-fig{max-width:360px}
  /* the stacked single column would otherwise give the 4:5 pill box photo a
     full width portrait crop taller than the phone itself */
  .rev-fig{max-width:420px; margin-top:26px}
}
@media (max-width:900px){
  .nav{display:none}
  .hd-cta{display:none}          /* the drawer already carries it; three items do not fit */
  .burger{display:block; margin-left:auto}
  .mnav{
    display:block; position:fixed; left:0; right:0; top:var(--hd); z-index:59;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 20px 16px; transform:translateY(-130%); transition:transform .26s ease;
    max-height:calc(100vh - var(--hd)); overflow-y:auto;
  }
  .mnav.open{transform:none}
  .mnav a{display:block; padding:15px 0; min-height:52px; color:var(--ink); text-decoration:none; font-size:17px; font-weight:600; border-bottom:1px solid var(--line-soft)}
  .mnav a:last-child{border-bottom:0}
}
@media (max-width:1023px){
  /* the floating pill hands chat over to the dock, so there is still exactly
     one way in and nothing sits on top of anything else */
  .hec-fab{display:none}
  .dk-wide{display:none}
  .dk-chat{display:inline-flex}
  .dk-in{width:100%}
  .dk-i{flex:1 1 0; min-width:0; padding:0 8px; font-size:13.5px}
  .hec{
    right:0; left:0; bottom:0; width:100%;
    height:min(78vh,600px); border-radius:var(--r) var(--r) 0 0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
}
@media (max-width:640px){
  :root{--hd:66px}
  body{font-size:16.5px}
  .brand img{height:32px}
  .places{grid-template-columns:1fr}
  .tl li{grid-template-columns:70px 1fr; gap:12px}
  .ft-in{grid-template-columns:1fr; gap:26px}
  .strip-in{display:block}
  .strip p:first-child{margin-bottom:2px}
  .creds span{font-size:12.5px; padding:8px 11px}
  .card{padding:22px}
  .card-brand{margin:-22px -22px 18px; padding:16px 22px 14px}
  .card-brand img{height:44px}
  /* body.has-dock carries the clearance now, so the old pinned bar allowance
     here would just double it up */
}

/* honour the OS setting, and the ?noanim screenshot switch */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
html.noanim [data-rev]{opacity:1 !important; transform:none !important; filter:none !important}
html.noanim h1 span{opacity:1 !important; transform:none !important; filter:none !important}
html.noanim .ok-mark::after{animation:none !important; transform:rotate(45deg) scale(1) !important}