/* ============================================================
   DOMUS — INTEREST PAGE
   The same tokens as the main site, one page, one job:
   collect the contacts of people who want this in their town.

   The form is the centre of gravity. Everything above the fold
   either promises something or removes an objection; everything
   below it is there for the person who did not sign up yet.
   ============================================================ */

:root{
  --paper:#F5F1E8;
  --paper-2:#EDE7DA;
  --white:#FFFFFF;

  --ink:#15120C;
  --ink-soft:#39332A;
  --muted:#665E52;
  --muted-2:#6A6154;

  --line:#DCD3C1;
  --line-2:#E7E0D1;
  --line-strong:#C9BEA8;

  --clay:#A94E2B;
  --clay-d:#8B3E20;
  --clay-l:#C46A45;
  --clay-soft:#F3E3DA;

  --pine:#1E3A31;
  --pine-soft:#DDE8E2;
  --gold-soft:#F1E6CB;

  --r-s:8px;
  --r:13px;
  --r-l:20px;

  --sh:0 10px 30px -14px rgba(21,18,12,.22);
  --sh-l:0 34px 70px -30px rgba(21,18,12,.38);

  --maxw:1140px;
  --gut:clamp(18px,4.4vw,40px);
  --bar:58px;
  --ease-out:cubic-bezier(.16,1,.3,1);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* the page is light only: without this, a phone in dark mode renders the
   inputs and the select in dark colours on a paper background */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.62;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--clay-d);text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.1;letter-spacing:-.015em;font-weight:500}
ul,ol{list-style:none}
svg{width:20px;height:20px;flex:none}
/* an anchor must not land under the bar */
section[id],[id]{scroll-margin-top:calc(var(--bar) + 12px)}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}
.narrow{max-width:780px}

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(245,241,232,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--bar)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-width:0}
.brand b{font-family:var(--serif);font-size:1.2rem;font-weight:500;letter-spacing:-.01em}
.brand img{border-radius:9px;width:30px;height:30px}
.lang{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;flex:none}
.lang button{
  min-height:36px;padding:7px 12px;font:inherit;font-size:.76rem;font-weight:600;color:var(--muted);
  background:transparent;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:color .2s,background .2s;
}
.lang button+button{border-left:1px solid var(--line-2)}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(30px,4.6vw,64px) 0 clamp(38px,5.4vw,70px);
}
.hero::before{
  content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;
  background:radial-gradient(circle at 50% 50%,rgba(185,138,46,.15),rgba(185,138,46,0) 68%);
  pointer-events:none;
}
.hero-in{display:grid;gap:clamp(24px,3vw,40px)}
.hero-c{grid-area:a}
.hero-b{grid-area:b;display:grid;gap:18px;align-content:start}
.hero-f{grid-area:c}
@media(min-width:920px){
  .hero-in{
    /* the form gets the wider half: it holds three tags on one line, and a
       tag that has to wrap onto two looks like a mistake */
    grid-template-columns:1fr 1.03fr;
    grid-template-areas:"a c" "b c";
    grid-template-rows:auto 1fr;
    column-gap:clamp(30px,4vw,56px);
    align-items:start;
  }
}
@media(max-width:919px){
  .hero-in{grid-template-areas:"a" "c" "b"}
}

.kicker{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-d);margin-bottom:15px}
h1{font-size:clamp(2rem,1.5rem + 2.1vw,3.15rem);max-width:17ch}
h1 .u{position:relative;white-space:nowrap}
h1 .u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.32em;background:var(--clay-soft);z-index:-1;border-radius:2px}
.lead{margin-top:18px;font-size:clamp(1.02rem,.98rem + .28vw,1.16rem);max-width:54ch;color:var(--ink-soft)}

/* the three things that make it real */
.proof{display:grid;gap:11px}
.proof li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--muted);line-height:1.45}
.proof svg{width:18px;height:18px;color:var(--clay);margin-top:2px}

/* and the three things it will never be — the cheapest trust there is */
.trust{
  border-left:2px solid var(--clay-soft);padding:2px 0 2px 14px;
}
.trust>b{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:7px;
}
.trust ul{display:grid;gap:5px}
.trust li{position:relative;padding-left:17px;font-size:.88rem;color:var(--muted);line-height:1.45}
.trust li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;background:var(--clay-l);
}

.area-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.area-line svg{width:16px;height:16px;color:var(--clay)}
.area-line a{font-size:.84rem;font-weight:600;color:var(--clay-d);text-decoration:underline;text-underline-offset:3px}

/* ---------- the form card ---------- */
.card{
  background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-l);
  box-shadow:var(--sh-l);padding:clamp(19px,2.8vw,28px);
}
.signup h2{font-size:clamp(1.35rem,1.18rem + .7vw,1.65rem);margin-bottom:5px}
.card-flag{
  display:inline-block;margin-bottom:11px;padding:5px 11px;border-radius:999px;
  background:var(--gold-soft);color:#6b4e12;
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.card-sub{font-size:.92rem;color:var(--muted);margin-bottom:16px}

.field{margin-bottom:13px}
.field>label,.picks legend{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:6px;
}
.field em{font-style:normal;font-weight:400;color:var(--muted-2);letter-spacing:0}
.field i{font-style:normal;color:var(--clay-d)}
input[type=text],select{
  width:100%;min-height:48px;padding:11px 14px;
  /* 16px keeps a phone from zooming in when the field gets focus */
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s;
  appearance:none;-webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23665E52' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:42px;
}
input[type=text]:focus,select:focus{outline:0;border-color:var(--clay);box-shadow:0 0 0 3px rgba(169,78,43,.14)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--clay-d);background:#FDF3EF}
.hint{font-size:.78rem;color:var(--muted-2);margin-top:5px}

/* What they need: three tags you tap, not three boxes. On a screen with
   room they are one row of three equal tags; on a phone they become a short
   list. Either way nothing is left stranded on a row of its own. */
.picks{border:0;padding:0;margin:0 0 15px;min-width:0}
.picks legend{
  display:block;padding:0;margin-bottom:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink);
}
.picks legend i{font-style:normal;color:var(--clay-d)}
.pick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.pick{
  display:flex;align-items:center;gap:7px;min-height:44px;
  padding:9px 12px 9px 10px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);
  font-size:.82rem;line-height:1.2;color:var(--ink-soft);text-wrap:balance;
  cursor:pointer;user-select:none;
  transition:border-color .18s,background .18s,color .18s;
  -webkit-tap-highlight-color:transparent;
}
.pick:hover{border-color:var(--clay-l);color:var(--ink)}
/* the native box is replaced by the drawn one, but it stays in the tab order
   and stays the thing a click and a screen reader act on */
.pick input{
  position:absolute;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;
}
.mk{
  width:18px;height:18px;flex:none;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--white);
  display:grid;place-items:center;
  transition:border-color .18s,background .18s;
}
.mk::after{
  content:"";width:8px;height:4.5px;margin-top:-2px;
  border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  border-radius:1px;transform:rotate(-45deg) scale(.4);opacity:0;
  transition:transform .18s var(--ease-out),opacity .18s;
}
.pick.on,.pick:has(input:checked){border-color:var(--clay);background:var(--clay-soft);color:var(--ink);font-weight:500}
.pick.on .mk,.pick:has(input:checked) .mk{border-color:var(--clay);background:var(--clay)}
.pick.on .mk::after,.pick:has(input:checked) .mk::after{transform:rotate(-45deg) scale(1);opacity:1}
.pick:has(input:focus-visible){outline:2px solid var(--clay);outline-offset:2px}

.consent{
  display:flex;align-items:flex-start;gap:11px;font-size:.8rem;line-height:1.5;
  color:var(--muted);margin-bottom:15px;cursor:pointer;
}
.consent input{width:19px;height:19px;accent-color:var(--clay);flex:none;margin-top:1px;cursor:pointer}
.consent.on{color:var(--ink-soft)}

/* the field a bot fills and a person never sees */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:14px 22px;border:1px solid transparent;border-radius:var(--r);
  font:inherit;font-size:1rem;font-weight:600;line-height:1;text-align:center;
  text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--ease-out),background .2s,box-shadow .2s;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 12px 24px -14px rgba(169,78,43,.9)}
.btn-primary:hover{background:var(--clay-d);transform:translateY(-1px)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.62;pointer-events:none}

.micro{font-size:.78rem;color:var(--muted-2);text-align:center;margin-top:9px}
.sg-status{font-size:.86rem;font-weight:500;margin-top:10px;text-align:center}
.sg-status:empty{margin-top:0}
.sg-status.err{color:var(--clay-d)}
.sg-status.ok{color:var(--pine)}
.sg-note{font-size:.8rem;color:var(--muted-2);text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.nojs{margin-top:12px;padding:12px 14px;border-radius:var(--r-s);background:var(--clay-soft);color:var(--clay-d);font-size:.84rem}
.linkish{background:none;border:0;font:inherit;font-size:.86rem;color:var(--muted);text-decoration:underline;cursor:pointer;padding:10px 0 0}

/* what happens after the click, next to the button that was clicked */
.after{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.after>b{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:9px;
}
.after ol{counter-reset:a;display:grid;gap:7px}
.after li{position:relative;padding-left:26px;font-size:.85rem;color:var(--muted);line-height:1.45;counter-increment:a}
.after li::before{
  content:counter(a);position:absolute;left:0;top:.05em;
  display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--pine-soft);color:var(--pine);
  font-size:.66rem;font-weight:700;
}

/* ---------- thank you ---------- */
.done{text-align:center}
.done-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--pine-soft);color:var(--pine)}
.done-mark svg{width:28px;height:28px;stroke-width:2.2}
.done h2{font-size:clamp(1.35rem,1.18rem + .7vw,1.65rem);margin-bottom:8px}
.done p{color:var(--muted);font-size:.94rem}
.done-what{font-size:.86rem;color:var(--muted-2);margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.done .btn{margin-top:18px}

/* ---------- bands ---------- */
.band{padding:clamp(38px,5.4vw,70px) 0;background:var(--white);border-top:1px solid var(--line-2)}
.band-2{background:var(--paper)}
.eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-d);margin-bottom:16px}
.band h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2rem);max-width:24ch}
.band-note{margin-top:20px;font-size:.86rem;color:var(--muted-2);max-width:70ch}

.grid3{display:grid;gap:2px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
@media(min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--white);padding:clamp(19px,2.4vw,26px);display:flex;flex-direction:column;gap:9px}
.tile h3{font-size:1.16rem}
.tile p{font-size:.9rem;color:var(--muted)}
.tile .price{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2)}
.tile .price b{display:block;font-family:var(--serif);font-size:1.95rem;font-weight:500;color:var(--clay-d);line-height:1;letter-spacing:-.02em}
.tile .price small{font-size:.74rem;color:var(--muted-2)}

/* "where" and "why" in one band */
.split{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:900px){.split{grid-template-columns:1fr 1.06fr;align-items:start}}
.split-p{margin:12px 0 18px;font-size:.94rem;color:var(--muted);max-width:50ch}

.area-list{display:flex;flex-wrap:wrap;gap:7px}
.area-list li{
  padding:7px 13px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--white);font-size:.85rem;color:var(--ink-soft);
}

.qa{border-top:1px solid var(--line-strong)}
.qa:last-of-type{border-bottom:1px solid var(--line-strong)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 2px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.04rem,1rem + .35vw,1.16rem);color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{color:var(--muted);transition:transform .25s var(--ease-out)}
.qa[open] summary svg{transform:rotate(90deg)}
.qa p{padding:0 2px 17px;color:var(--muted);max-width:60ch}

/* ---------- last call ---------- */
.cta{background:var(--ink);color:#fff;padding:clamp(42px,6vw,80px) 0;text-align:center}
.cta h2{color:#fff;font-size:clamp(1.6rem,1.3rem + 1.6vw,2.4rem);max-width:20ch;margin-inline:auto}
.cta p{margin:14px auto 24px;color:rgba(245,241,232,.76);max-width:52ch}
.cta .btn{color:var(--ink)}

/* ---------- footer ---------- */
.foot{padding:clamp(30px,4.4vw,48px) 0;background:var(--ink);color:rgba(245,241,232,.72);border-top:1px solid rgba(255,255,255,.1)}
.foot-in{display:grid;gap:16px}
.foot-brand{display:flex;align-items:center;gap:10px;color:#fff;flex-wrap:wrap}
.foot-brand b{font-family:var(--serif);font-size:1.1rem;font-weight:500}
.foot-brand img{border-radius:8px}
.foot-brand span{font-size:.82rem;color:rgba(245,241,232,.6)}
.foot-contact{display:flex;flex-wrap:wrap;gap:18px}
.foot-contact a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:.9rem}
.foot-contact a:hover{text-decoration:underline}
.foot-contact svg{width:17px;height:17px;color:var(--gold-soft)}
.foot-privacy{font-size:.8rem;color:rgba(245,241,232,.55);max-width:70ch;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}

/* ---------- phones ---------- */
@media(max-width:480px){
  .pick-row{grid-template-columns:1fr;gap:7px}
  .pick{font-size:.88rem;padding:11px 14px 11px 12px}
}
@media(max-width:420px){
  :root{--bar:52px}
  .card{padding:17px}
  h1{font-size:1.92rem}
  .lang button{padding:7px 10px}
  .band{padding:34px 0}
}
@media(max-width:340px){
  h1{font-size:1.8rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .btn:hover{transform:none}
}

@media print{
  .top,.cta,.hero-f,.after,.nojs{display:none}
  body{background:#fff;color:#000}
}