@charset "UTF-8";

/* ==========================================================================
   City Life Properties - Обявата / The Notice
   Self-hosted faces. No third-party request is made by this stylesheet.
   ========================================================================== */

@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fira-sans-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fira-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fira-sans-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fira-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fira-sans-condensed-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fira-sans-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------- tokens -- */

:root{
  --paper:#fff;
  --paper-2:#f6f5f2;
  --ink:#16181c;
  --ink-2:#53585f;
  --ink-3:#6b7178;
  --rule:#dcdad5;
  --rule-strong:#b3afa7;
  --accent:#195357;        /* the logo's mid teal, 8.7:1 on white  */
  --accent-deep:#193e43;   /* the logo's dark teal, for hover      */
  --accent-wash:#e9f1f1;
  --on-accent:#fff;
  --locked:#8a8f98;

  --sans:'Fira Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --cond:'Fira Sans Condensed','Fira Sans',system-ui,sans-serif;

  --t-hero:clamp(2.05rem,1.15rem + 4vw,3.9rem);
  --t-h2:clamp(1.45rem,1.08rem + 1.65vw,2.2rem);
  --t-h3:1.0625rem;
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:6.5rem;

  --spine:1.75rem;          /* distance from container edge to the spine   */
  --shell:min(100% - 2.5rem,72rem);
  --ease:cubic-bezier(.16,1,.3,1);   /* exponential ease-out               */
  --dur:.42s;
}

/* ------------------------------------------------------------- reset/base */

*,*::before,*::after{box-sizing:border-box}
/* An author `display` on a class outranks the UA stylesheet's [hidden] rule,
   so state this once rather than per component. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-body)/1.62 var(--sans);
  font-feature-settings:"kern","liga";
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}
/* Cyrillic Д, Ц, Щ and Latin g/p/y all descend below the baseline, and the
   browser default (skip-ink:auto) breaks the underline around every one of
   them - on a word ending in Д the line stops short of the last letter. On a
   Bulgarian page the underline has to be continuous, so the offset makes room
   for the descenders instead of the line dodging them. */
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.24em;
  text-decoration-skip-ink:none}
a:hover{text-decoration-thickness:2px}

/* Browser surfaces - these ship with defaults that belong to no design system. */
::selection{background:var(--accent);color:var(--on-accent)}
:root{accent-color:var(--accent);caret-color:var(--accent);color-scheme:light}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
@supports (scrollbar-color:auto){html{scrollbar-color:var(--rule-strong) var(--paper);scrollbar-width:thin}}

.u-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-4rem;z-index:60;background:var(--accent);color:var(--on-accent);
  padding:var(--s3) var(--s4);font:600 var(--t-sm)/1 var(--cond);transition:top .2s var(--ease)}
.skip:focus{top:var(--s4)}

/* ------------------------------------------------------------------ shell */

.shell{width:var(--shell);margin-inline:auto}

/* Everything on the sheet is inset past the spine. Content never crosses its
   own axis, so this is stated once rather than per section. */
.masthead__in,
.sheet > section > .shell,
.foot > .shell{padding-left:calc(var(--spine) + .9rem)}
@media (max-width:56rem){
  .masthead__in,
  .sheet > section > .shell,
  .foot > .shell{padding-left:0}
}

/* The spine: one continuous axis the whole sheet hangs off, carrying read
   progress. Functional wayfinding, not ornament. */
.spine{position:fixed;inset-block:0;left:max(1.25rem,calc(50vw - 36rem + var(--spine)));
  width:1px;background:var(--rule);z-index:5;pointer-events:none}
.spine__fill{position:absolute;inset-inline:0;top:0;height:0;background:var(--accent);
  transform-origin:top;will-change:height}
@media (max-width:56rem){.spine{left:.75rem}}
@media (max-width:34rem){.spine{display:none}}

.sheet > section{position:relative;padding-block:var(--s8)}
.sheet > section + section{border-top:1px solid var(--rule)}
@media (max-width:34rem){.sheet > section{padding-block:var(--s7)}}

/* ----------------------------------------------------------------- typography */

.h2{font:600 var(--t-h2)/1.12 var(--cond);letter-spacing:-.02em;text-wrap:balance;margin-bottom:var(--s5)}
.h3{font:600 var(--t-h3)/1.3 var(--cond);letter-spacing:-.005em}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:44ch}
.prose{max-width:68ch}
.prose p + p{margin-top:var(--s4)}
.muted{color:var(--ink-2)}

/* A source marker: shows where a stated fact came from. */
.src{font:400 var(--t-xs)/1.4 var(--sans);color:var(--ink-3);display:block;margin-top:var(--s1)}
.src::before{content:"";display:inline-block;width:.55rem;height:1px;background:var(--rule-strong);
  vertical-align:.28em;margin-right:.4rem}

/* --------------------------------------------------------------- controls */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:600 1rem/1 var(--cond);letter-spacing:.005em;
  padding:.95rem 1.5rem;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  cursor:pointer;text-decoration:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform .16s var(--ease);
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--accent)}
.btn--ghost:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep)}
.btn--onaccent{background:var(--paper);color:var(--accent);border-color:var(--paper)}
.btn--onaccent:hover{background:var(--accent-wash);border-color:var(--accent-wash);color:var(--accent-deep)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[disabled]:active{transform:none}

/* ---------------------------------------------------------------- header */

.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead__in{display:flex;align-items:center;gap:var(--s6);padding-block:var(--s5)}
@media (max-width:56rem){.masthead__in{gap:var(--s5)}}
@media (max-width:34rem){.masthead__in{gap:var(--s4);padding-block:var(--s4)}}

/* The client supplied a real mark, so the stamp box that stood in for one is
   gone: emblem plus wordmark, set as one lockup. Uppercase needs positive
   tracking to stay readable, which lowercase did not. */
.mark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.mark:hover{text-decoration:none;color:var(--accent)}
.mark__logo{height:2.5rem;width:auto;flex:none}
.mark__t{font:600 clamp(1.05rem,.92rem + .55vw,1.5rem)/1.05 var(--cond);
  letter-spacing:.055em;text-transform:uppercase;max-width:7.5em}
@media (max-width:34rem){
  .mark__logo{height:2.1rem}
  .mark__t{letter-spacing:.04em}
}

/* Two pages, shown as one segmented control rather than two separate outlined
   buttons: it reads as a pair, and it spends one border on the header instead
   of two in a design already carrying a lot of rules. */
.masthead__nav{margin-left:auto;display:flex;align-items:stretch;
  border:1px solid var(--rule-strong)}
.masthead__nav a{display:flex;align-items:center;
  font:600 var(--t-sm)/1 var(--cond);color:var(--ink-2);text-decoration:none;
  white-space:nowrap;padding:.72rem 1.05rem;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.masthead__nav a + a{border-left:1px solid var(--rule-strong)}
.masthead__nav a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}
.masthead__nav a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.masthead__nav a[aria-current="page"]:hover{background:var(--accent-deep);color:var(--on-accent)}

/* Header controls sit a size below the page's primary buttons. */
.masthead .btn{padding:.72rem 1.15rem}

.masthead__sp{margin-left:auto}
.masthead__tel{font:600 var(--t-sm)/1 var(--cond);color:var(--ink);text-decoration:none;white-space:nowrap}
.masthead__tel:hover{color:var(--accent);text-decoration:none}
@media (max-width:52rem){.masthead__tel{display:none}}
/* Below ~26rem the wordmark and the nav cannot share a row, so the nav takes
   its own and splits the width evenly rather than overflowing the viewport. */
@media (max-width:26rem){
  .masthead__in{flex-wrap:wrap;row-gap:var(--s3)}
  .masthead__nav{margin-left:0;width:100%}
  .masthead__nav a{flex:1;justify-content:center}
}
@media (max-width:44rem){
  .masthead__nav a{padding:.72rem .8rem}
  /* The tear-off bar at the foot already carries this action on a phone, and a
     second copy up here is what pushes the header past the viewport. */
  .masthead .btn--ghost{display:none}
}

/* ------------------------------------------------------------------ hero */

.hero{padding-top:var(--s7)}
.hero__grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:60rem){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s7);align-items:center}
}
.hero h1{font:600 var(--t-hero)/1.03 var(--cond);letter-spacing:-.028em;text-wrap:balance;margin-bottom:var(--s4)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.hero__tel{font:600 var(--t-sm)/1 var(--cond);color:var(--ink-2);text-decoration:none}
.hero__tel:hover{color:var(--accent)}
.hero__fig{margin:0}
.hero__fig img{width:100%;background:var(--paper-2)}
.hero__cap{font:400 var(--t-xs)/1.45 var(--sans);color:var(--ink-3);margin-top:var(--s2)}

/* ------------------------------------------------------------- trust row */

.trust{margin-top:var(--s7);border-top:1px solid var(--rule);padding-top:var(--s5)}
.trust__list{display:grid;gap:var(--s4) var(--s6);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.trust__k{font:600 var(--t-sm)/1.3 var(--cond)}
.trust__v{font-size:var(--t-sm);color:var(--ink-2)}

/* --------------------------------------------------------- ruled listing */
/* The notice's own structure: itemised rows divided by hairlines. */

.ruled{border-top:1px solid var(--rule)}
.ruled > div{display:grid;gap:var(--s1) var(--s5);padding-block:var(--s4);
  border-bottom:1px solid var(--rule)}
@media (min-width:44rem){
  .ruled > div{grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);align-items:baseline}
}
.ruled dt,.ruled__k{font:600 var(--t-h3)/1.35 var(--cond)}
.ruled dd,.ruled__v{margin:0;color:var(--ink-2);max-width:58ch}

/* ------------------------------------------------------------------ plan */
/* The disclosure section IS the drawing. Facts hang off the spaces. */

.plan{display:grid;gap:var(--s6)}
@media (min-width:62rem){.plan{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s7);align-items:start}}
.plan__fig{margin:0}
.plan__svg{width:100%;height:auto;display:block;overflow:visible}
.plan__note{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3);margin-top:var(--s3)}

.plan__key{border-top:1px solid var(--rule)}
.plan__key > li{padding-block:var(--s4);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s3)}
.plan__swatch{width:.85rem;height:.85rem;margin-top:.42rem;border:1px solid var(--ink);grid-row:span 2}
.plan__swatch--yours{background:var(--accent);border-color:var(--accent)}
.plan__swatch--shared{background:var(--accent-wash);border-color:var(--rule-strong)}
.plan__swatch--locked{background:var(--paper);border-color:var(--locked)}
.plan__k{font:600 var(--t-h3)/1.35 var(--cond)}
.plan__v{color:var(--ink-2);grid-column:2}

/* SVG plan internals */
.pl-room{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.pl-room--yours{fill:var(--accent);stroke:var(--accent)}
.pl-room--shared{fill:var(--accent-wash);stroke:var(--ink)}
.pl-room--locked{fill:var(--paper);stroke:var(--locked)}
.pl-label{font:600 13px/1 var(--cond);fill:var(--ink);letter-spacing:.01em}
.pl-label--on{fill:var(--on-accent)}
.pl-label--dim{fill:var(--ink-3)}
.pl-sub{font:400 11px/1 var(--sans);fill:var(--ink-2)}
.pl-sub--on{fill:#d5e9e9}
.pl-link{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-dasharray:4 3}

/* On a phone the drawing is ~340px wide, so 11px user units land near 6px.
   Drop the detail lines, enlarge the names, and let the key below carry every
   fact. The drawing keeps the structure; the key keeps the words. */
@media (max-width:48rem){
  .pl-sub{display:none}
  .pl-label{font-size:27px}
  .pl-label--room{transform:translateY(52px)}
  .pl-label--bath{transform:translateY(18px)}
  .pl-label--hall{transform:translateY(36px)}
}

/* ---------------------------------------------------------- doc banner -- */

.doc-banner{margin:var(--s7) 0 0}
.doc-banner img{width:100%;background:var(--paper-2)}


/* ------------------------------------------------------- markup helpers -- */
/* These exist because the production CSP is `style-src 'self'` with no
   'unsafe-inline': any style="" attribute is silently dropped once the site is
   behind that header. A local dev server sends no CSP, so inline styles appear
   to work right up until they reach production. Everything the markup needs
   lives here instead. */
.svg-defs{position:absolute}
.i-inline{vertical-align:-2px;margin-right:.3rem}
.mt-4{margin-top:var(--s4)}
.mt-7{margin-top:var(--s7)}
.mb-6{margin-bottom:var(--s6)}
.mw-18{max-width:18ch}
.mw-60{max-width:60ch}
.nw{white-space:nowrap}
.on-accent-link{color:var(--on-accent)}
.on-accent-link--quiet{color:#cbe2e2}
.f-done .h3{font-size:1.3rem}

/* Per-shape draw timing for the apartment plan. --len is each rectangle's own
   perimeter; without these the animation falls back to 600 for every shape. */
.pl-o{--len:2064;--d:0s}
.pl-1{--len:684;--d:.18s}
.pl-2{--len:684;--d:.30s}
.pl-3{--len:684;--d:.42s}
.pl-4{--len:536;--d:.54s}
.pl-5{--len:536;--d:.66s}
.pl-6{--len:1432;--d:.78s}
.pll{--d:1.15s}
.plg-1{--d:1s}
.plg-2{--d:1.08s}
.plg-3{--d:1.16s}
.plg-4{--d:1.24s}
.plg-5{--d:1.32s}
.plg-6{--d:1.4s}

/* -------------------------------------------------------------- location */

.loc{max-width:62ch}
.loc__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s5)}

/* ------------------------------------------------------------- gallery */

.shots{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:44rem){.shots{grid-template-columns:1fr 1fr}}
.shots img{width:100%;background:var(--paper-2)}
.shots figcaption{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3);margin-top:var(--s2)}

/* ------------------------------------------------------------------- faq */

.faq{border-top:1px solid var(--rule);max-width:72ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;
  padding-block:var(--s4);cursor:pointer;list-style:none;
  font:600 1.0625rem/1.4 var(--cond)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq__sign{flex:none;width:.95rem;height:.95rem;margin-top:.32rem;position:relative}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.faq__sign::before{inset-inline:0;top:50%;height:1.5px;transform:translateY(-50%)}
.faq__sign::after{inset-block:0;left:50%;width:1.5px;transform:translateX(-50%)}
.faq details[open] .faq__sign::after{transform:translateX(-50%) scaleY(0)}
.faq__a{padding-bottom:var(--s5);color:var(--ink-2);max-width:62ch}

/* ------------------------------------------------------------------ form */
/* The accent owns this whole region - the one thing the visitor must do. */

.enq{background:var(--accent);color:var(--on-accent);border-top:0}
.sheet > section.enq + section{border-top:0}
.enq .h2{color:var(--on-accent)}
.enq__lede{color:#cbe2e2;max-width:46ch;font-size:clamp(1rem,.96rem + .3vw,1.15rem);line-height:1.55}
.enq__grid{display:grid;gap:var(--s6)}
@media (min-width:62rem){.enq__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7)}}

/* The three facts a visitor re-checks with the form already in front of them. */
.enq__facts{margin-top:var(--s6);border-top:1px solid #487a7c}
.enq__facts > div{display:grid;gap:.15rem var(--s4);padding-block:var(--s3);border-bottom:1px solid #487a7c}
@media (min-width:26rem){.enq__facts > div{grid-template-columns:minmax(8rem,10rem) minmax(0,1fr);align-items:baseline}}
.enq__facts dt{font:600 var(--t-sm)/1.35 var(--cond);color:#e4f0f0}
.enq__facts dd{margin:0;color:#cbe2e2;font-size:var(--t-sm)}

.f-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:38rem){.f-grid{grid-template-columns:1fr 1fr}}
.f-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.f-field--wide{grid-column:1/-1}
.f-label{font:600 var(--t-sm)/1.3 var(--cond);color:#e4f0f0}
.f-opt{color:#a9cbcb;font-weight:400;font-family:var(--sans);font-size:var(--t-xs)}
.f-ctl{
  font:400 1rem/1.4 var(--sans);color:var(--on-accent);
  /* #87b3b4 on the accent is 3.1:1 - the floor for a UI component boundary. */
  background:transparent;border:1px solid #87b3b4;border-radius:0;
  padding:.8rem .85rem;width:100%;min-width:0;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.f-ctl::placeholder{color:#aecfcf}
/* Same failure as the option list: Chrome repaints an autofilled field on its
   own pale surface but keeps the author's white ink. Hold the field to the
   design instead, so an autofilled name stays readable. */
.f-ctl:-webkit-autofill,.f-ctl:-webkit-autofill:hover,.f-ctl:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--on-accent);caret-color:var(--on-accent);
  -webkit-box-shadow:0 0 0 100px var(--accent-deep) inset;
  transition:background-color 9999s ease-in-out 0s;
}
.f-ctl:hover{border-color:#c4dede}
/* The native date/time picker icon ships dark; invert it onto the dark field. */
.f-ctl::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);opacity:.85;cursor:pointer}
.f-ctl::-webkit-calendar-picker-indicator:hover{opacity:1}
/* iOS sizes input[type=date] from its internal date-edit, which ignores the
   min-width:0 on the host, so the field overhangs the panel on a phone. Reset
   the native appearance and let the inner parts shrink with the field. */
input[type="date"].f-ctl{-webkit-appearance:none;appearance:none;max-width:100%}
input[type="date"].f-ctl::-webkit-date-and-time-value{text-align:left;margin:0;min-width:0}
input[type="date"].f-ctl::-webkit-datetime-edit{padding:0;min-width:0;overflow:visible}
input[type="date"].f-ctl::-webkit-datetime-edit-fields-wrapper{padding:0}
.f-ctl:focus{outline:none;border-color:var(--paper);background:rgba(255,255,255,.07)}
.f-ctl:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
select.f-ctl{appearance:none;background-image:none;padding-right:2.2rem}
/* The option list is drawn by the OS on a light surface, so it must not
   inherit the field's white-on-teal ink. Light background plus dark ink is
   the safe pairing: a browser that ignores the background still renders
   readable text, where teal-on-teal would vanish. */
select.f-ctl option{background-color:var(--paper);color:var(--ink)}
.f-sel{position:relative}
.f-sel__chev{position:absolute;right:.85rem;bottom:1.05rem;pointer-events:none}
textarea.f-ctl{resize:vertical;min-height:5.5rem}
.f-ctl[aria-invalid="true"]{border-color:#ffd2cc;background:rgba(255,120,100,.12)}
.f-err{font:400 var(--t-xs)/1.4 var(--sans);color:#ffd2cc;min-height:0}
.f-err:empty{display:none}
.f-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s2)}
.f-fine{font:400 var(--t-xs)/1.5 var(--sans);color:#a9cbcb;max-width:46ch}
.f-pot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* form status */
.f-status{grid-column:1/-1;font-size:var(--t-sm);line-height:1.5}
.f-status--err{color:#ffd2cc}

/* Inline thank-you - replaces the form in place, never a new page. */
.f-done{display:grid;gap:var(--s4);justify-items:start}
.f-tick{width:2.75rem;height:2.75rem;flex:none}
.f-tick circle{fill:none;stroke:var(--paper);stroke-width:1.5;opacity:.45}
.f-tick path{fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}

/* spinner on the submit button */
.btn__spin{width:1rem;height:1rem;flex:none;display:none}
.btn.is-busy .btn__spin{display:block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- footer */

.foot{border-top:1px solid var(--rule);padding-block:var(--s6);font-size:var(--t-sm);color:var(--ink-2)}
.foot__grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.foot__h{font:600 var(--t-xs)/1.4 var(--cond);color:var(--ink);letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:var(--s2)}
/* The footer's links stay ink on hover: accent-coloured text at 13px renders
   fringed and reads lighter than the type around it. The state lives in the
   underline instead, which stays crisp at any size. */
.foot a{color:var(--ink);text-decoration-color:var(--ink-3)}
.foot a:hover{color:var(--ink);text-decoration-color:var(--accent)}
.foot__legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- tear-offs */
/* The lamp-post notice's own device: detachable tabs carrying the number.
   On small screens it is the sticky action bar. */

.tabs{position:fixed;inset-inline:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--paper);border-top:1px dashed var(--rule-strong);
  transform:translateY(105%);transition:transform .5s var(--ease);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs.is-in{transform:translateY(0)}
.tabs__t{display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.95rem .75rem;text-decoration:none;
  font:600 .9375rem/1 var(--cond);white-space:nowrap}
.tabs__t + .tabs__t{border-left:1px dashed var(--rule-strong)}
.tabs__t--call{color:var(--ink);background:var(--paper)}
.tabs__t--call:hover{color:var(--accent);text-decoration:none}
.tabs__t--enq{background:var(--accent);color:var(--on-accent)}
.tabs__t--enq:hover{background:var(--accent-deep);text-decoration:none}
@media (min-width:56rem){.tabs{display:none}}
@media (max-width:56rem){body{padding-bottom:3.4rem}}

/* ----------------------------------------------------------------- motion */
/* Content is visible by default. Motion is added only once JS confirms it
   can run, and is removed entirely under reduced-motion. */

.js .rise{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}

/* The one authored moment: the plan draws itself, once. */
.js .pl-ink{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.js .pl-fade{opacity:0}
.js .plan__fig.is-in .pl-ink{animation:draw 1.05s var(--ease) forwards;animation-delay:var(--d,0s)}
.js .plan__fig.is-in .pl-fade{animation:fade .5s var(--ease) forwards;animation-delay:var(--d,.5s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rise{opacity:1;transform:none}
  .js .pl-ink{stroke-dashoffset:0}
  .js .pl-fade{opacity:1}
  .tabs{transition:none}
}

@media print{
  .tabs,.spine,.skip{display:none}
  body{color:#000}
  .enq{background:#fff;color:#000}
}