/* storchak.eu repaint: calm and editorial rather than SaaS. One layer over the existing
   styles, loaded last. Warm paper, near-black ink, one accent colour, and a serif italic
   for emphasis in headlines. Nothing here glows, tilts or animates on its own. */

:root{--rp-accent:#141414;--rp-on:#f4f2ed;--serif:'Instrument Serif',Georgia,'Times New Roman',serif}

html.light{
  --bg:#f4f2ed;--bg2:#ece9e1;--surface:#faf9f6;--surface2:#f1eee7;
  --line:#e0dcd2;--line2:#cbc6ba;
  --ink:#141414;--soft:#33312d;--muted:#6b6862;--faint:#9a968d;
  --accent:var(--rp-accent);--accent-dim:var(--rp-accent);
  --lime:var(--rp-accent);--lime-deep:var(--rp-accent);--cyan:var(--rp-accent);
  --green:var(--rp-accent);--amber:#6b6862;--magenta:#6b6862;--coral:#9a968d;
  --glow:transparent;
  --shadow-md:0 1px 2px rgba(20,20,20,.05);--shadow-lg:0 1px 3px rgba(20,20,20,.06);
}

/* backgrounds: no grid, no glow, just paper with a faint grain */
html.light body::before{display:none}
html.light body::after{opacity:.025}
html.light .hero::before,html.light .hero::after{display:none}
html.light header{background:rgba(244,242,237,.88);box-shadow:none}
html.light header.scrolled .nav{background:rgba(250,249,246,.94);box-shadow:none;border-color:var(--line)}
html.light section.block.alt{background:var(--bg2)}
html.light section.block.alt::before{display:none}

/* type: lighter headings, serif italic for the emphasised words */
h1,h2,h3{font-weight:500}
.hero h1{font-weight:500;letter-spacing:-.045em;color:var(--ink)}
.hero h1 .u,.sec-head h2 em,h2 em,h2 .u,.cta-band h2 em{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit;
  text-shadow:none!important;animation:none!important}
.hero h1 .u{padding-right:.04em}
html.light .eyebrow{color:var(--muted)}
html.light .hero p.lead{color:var(--muted)}
html.light .hero p.lead b{color:var(--ink)}

/* buttons: flat, small radius, one colour */
html.light .btn-primary{background:var(--rp-accent)!important;background-image:none!important;color:var(--rp-on)!important;
  border:1px solid var(--rp-accent)!important;box-shadow:none!important;border-radius:6px}
html.light .btn-primary:hover{filter:brightness(1.12)}
html.light .btn-ghost{border-radius:6px;box-shadow:none;border-color:var(--line2);color:var(--ink)}
html.light .btn-ghost:hover{background:rgba(20,20,20,.04)}
.btn-chevron{background:transparent!important}

/* quick nav: plain words, no pill, no icons, no glow */
html.light .tube-shell{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.light .tube-link,html.light .tube-link:hover,html.light .tube-link.active{background:transparent;box-shadow:none}
.tube-glow{display:none!important}
@media(min-width:861px){.tube-link svg{display:none}}

/* cards and panels: flat surfaces, hairline borders */
html.light .svc-featured{background-image:none!important;background:var(--surface);border-color:var(--ink)}
html.light .svc-badge{box-shadow:none;background:var(--rp-accent);color:var(--rp-on)}
html.light .cta-band .cta-inner{background:var(--surface);box-shadow:none;border-color:var(--line2)}
html.light .cta-band .cta-inner::before{display:none}
.skl-card::after{display:none}
.skl-tag i{box-shadow:none}
html.light .skl-card:hover{box-shadow:none}

/* icons that sat on the accent colour: keep them readable on ink */
html.light .t2.v{background:transparent;color:var(--ink)}
html.light .t2.v svg{stroke:var(--ink)}
html.light .sf-score{background:transparent;color:var(--ink);border:1px solid var(--line2)}
html.light .radar-live{background:var(--ink);box-shadow:none}

/* the mid-page call to action shares a class with the booking box; it is not a box */
html.light #cta-mid.cta-band{background:none;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
html.light .cta-band .bar{display:none}

/* FAQ search: a plain field, no glow */
.faq-search .gs-glow{display:none!important}
html.light #faqSearch{background:var(--surface);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
html.light #faqSearch::placeholder{color:var(--faint)}

/* signal radar in ink, not mint */
html.light .radar-scope{background:none}
html.light .radar-sweep{background:conic-gradient(rgba(20,20,20,.12),rgba(20,20,20,.03) 46deg,rgba(0,0,0,0) 90deg)}
html.light .radar-blip{background:var(--ink);box-shadow:none}

/* client logos: printed in grey on the paper, no white chips */
html.light .m-logo{background:transparent;box-shadow:none;border:0}
html.light .m-logo img{filter:none;mix-blend-mode:normal;opacity:.72}
html.light .m-logo img[src$='.svg']{filter:grayscale(1)}

/* the globe is drawn dark in WebGL; invert it so it reads as ink dots on a pale sphere */
html.light .globe-canvas,html.light .globe-arcs{filter:invert(.94) grayscale(1)}

/* the last hard-coded mint: selection, dividers, the comparison column, the signal plays */
html.light ::selection{background:rgba(20,20,20,.12)}
html.light section.block::before{background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
html.light .c2-me{background:rgba(20,20,20,.025);box-shadow:inset 1px 0 0 var(--line2),inset -1px 0 0 var(--line2)}
html.light .c2h.c2-me{color:var(--ink);box-shadow:inset 1px 0 0 var(--line2),inset -1px 0 0 var(--line2),inset 0 1px 0 var(--line2)}
html.light .cmp2-grid > .c2-me:last-child{box-shadow:inset 1px 0 0 var(--line2),inset -1px 0 0 var(--line2),inset 0 -1px 0 var(--line2)}
html.light .t2.v.dim{background:rgba(20,20,20,.06);color:var(--ink)}
html.light .sf-step.sig{border-color:var(--line2);background:var(--surface)}
html.light .sf-arrow{color:var(--faint)}
html.light .marquee .m-logo:hover{box-shadow:none}
@keyframes sf-hl{0%,100%{border-color:var(--line);background:var(--surface2);box-shadow:none}8%,18%{border-color:var(--ink);background:var(--surface);box-shadow:none}25%{border-color:var(--line);background:var(--surface2);box-shadow:none}}
@keyframes sf-arrow-flow{0%,100%{color:var(--faint)}45%,55%{color:var(--ink)}}

/* principles: a numbered editorial list, not icon cards */
html.light .principles{counter-reset:pr;gap:0!important;border-top:1px solid var(--line2)}
html.light .principle{counter-increment:pr;display:grid!important;grid-template-columns:52px minmax(0,1fr);gap:0 14px;align-items:baseline;
  background:none!important;border:0!important;border-bottom:1px solid var(--line2)!important;border-radius:0!important;box-shadow:none!important;
  padding:22px 0!important;transform:none!important}
html.light .principle::before{content:counter(pr,decimal-leading-zero);position:static;inset:auto;width:auto;height:auto;opacity:1;filter:none;background:none;
  font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--faint);padding-top:6px}
html.light .principle::after{display:none}
html.light .principle .pico{display:none!important}
html.light .principle b{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.015em;margin-bottom:4px}
html.light .principle .t{font-size:15.5px;color:var(--muted);line-height:1.55}

/* signals: keep the live feed, lose the radar; a ledger of what just happened */
/* invisible but still in the layout: the feed script starts when this scrolls into view */
html.light .radar-scope{display:block!important;visibility:hidden;width:100%!important;height:2px!important;margin:0!important;padding:0!important;overflow:hidden;border:0!important}
html.light .radar-band{display:block!important;max-width:860px;margin-left:auto;margin-right:auto}
html.light .radar-feed{width:100%}
html.light .radar-feed-lbl{font-size:0!important;margin-bottom:10px;padding:0!important;gap:0!important;display:block!important}
html.light .radar-feed-lbl .radar-live{display:none}
html.light .radar-feed-lbl::after{content:"Example signal feed";font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
html.light #radarFeed{border-top:1px solid var(--line2)}
html.light #radarFeed li{display:grid!important;grid-template-columns:60px 104px minmax(0,1fr);gap:0 18px;align-items:baseline;
  padding:16px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:none!important;animation:none!important;font-size:16px;color:var(--ink)}
html.light #radarFeed li .t{font:400 12px/1 var(--mono);color:var(--faint)}
html.light #radarFeed li .sig-type{font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0}

/* how it works: a clean spec beside the steps, no terminal chrome */
html.light .hiw-card{background:none!important;border:0!important;border-top:1px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important;padding:22px 0 0!important}
html.light .hiw-card::before,html.light .hiw-card::after{display:none!important}
html.light .hiw-card-head{display:none!important}
html.light .hiw-mono{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;font-family:var(--sans)!important;font-size:17px;line-height:2.1;color:var(--ink)}
html.light .hiw-mono b{display:inline-block;width:92px;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
html.light .hiw-row{background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:13px 0!important;font-family:var(--sans)}
html.light .hiw-row i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--faint)}
html.light .hiw-foot{color:var(--faint)}
html.light #radarFeed li{opacity:1!important;transform:none!important}

/* footer: short and quiet, on an ink band that closes the page */
.sfoot{position:relative;z-index:1;background:#141414;color:rgba(244,242,237,.62);padding:56px 0 30px;margin-top:40px}
.sfoot a{color:inherit;text-decoration:none;transition:color .16s ease}
.sfoot a:hover{color:#f4f2ed}
.sfoot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px 40px;padding-bottom:36px;border-bottom:1px solid rgba(244,242,237,.14)}
.sfoot-links{display:flex;flex-wrap:wrap;gap:10px 26px;font:500 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.sfoot-social{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:15px;color:#f4f2ed}
.sfoot-social .arr{display:inline-block;margin-left:8px;transition:transform .16s ease}
.sfoot-social a:hover .arr{transform:translate(2px,-2px)}
.sfoot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 24px;padding-top:26px;font-size:13.5px}
.sfoot-bottom p{margin:0}
.sfoot-bottom p:nth-child(2){text-align:center}
.sfoot-bottom a{justify-self:end}
.sfoot-bottom .arr{margin-left:8px}
@media(max-width:720px){.sfoot-bottom{grid-template-columns:1fr}.sfoot-bottom p:nth-child(2){text-align:left}.sfoot-bottom a{justify-self:start}}
.sfoot-time{color:rgba(244,242,237,.42);font-variant-numeric:tabular-nums}

/* ================= accent: ochre =================
   Ochre fills buttons and markers. Ochre is too light to read as text on the paper
   (about 2.6:1), so text in the accent colour uses a deeper ochre. */
:root{--rp-accent:#c9922e;--rp-on:#141414;--rp-accent-text:#8a5f12}
html.light{--accent:var(--rp-accent-text);--accent-dim:var(--rp-accent-text);--lime:var(--rp-accent-text);
  --lime-deep:var(--rp-accent-text);--cyan:var(--rp-accent-text);--green:var(--rp-accent-text)}

/* ================= two ways to work: an editorial spec, not cards ================= */
.offers{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:8px}
.offer{position:relative;display:flex;flex-direction:column;padding:34px 44px 40px 0}
.offer + .offer{padding:34px 0 40px 44px;border-left:1px solid var(--line2)}
.offer-main::before{content:"";position:absolute;left:0;right:44px;top:-2px;height:3px;background:var(--rp-accent)}
.offer-n{font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 22px}
.offer h3{font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.025em;color:var(--ink);margin:0}
.offer-price{margin:14px 0 18px;font:500 clamp(30px,3vw,40px)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.offer-price .from,.offer-price .per{font:400 13px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.offer-lead{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:44ch;margin:0 0 26px}
.offer-spec{margin:0 0 30px;border-top:1px solid var(--line2)}
.offer-spec > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line2)}
.offer-spec dt{font:500 11px/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.offer-spec dd{margin:0;color:var(--ink);font-size:15.5px;line-height:1.55}
.offer-spec ul{list-style:none;margin:0;padding:0}
.offer-spec li + li{margin-top:6px}
.offer .btn{align-self:flex-start;margin-top:auto}
.offer-arr{margin-left:4px;transition:transform .16s ease}
.offer .btn:hover .offer-arr{transform:translateX(3px)}
.offers-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line2);
  font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.offers-note span::before{content:"+ ";color:var(--rp-accent-text)}
.offers-note a{margin-left:auto;font:500 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--rp-accent);text-underline-offset:4px}
@media(max-width:860px){
  .offers{grid-template-columns:1fr}
  .offer,.offer + .offer{padding:30px 0;border-left:0}
  .offer + .offer{border-top:1px solid var(--line2)}
  .offer-main::before{right:0}
  .offers-note a{margin-left:0}
}

/* ================= signal plays: three columns on hairlines, one calm marker ================= */
html.light .signals-grid{gap:0;border-top:1px solid var(--ink)}
html.light .signal-card{background:none;border:0;border-radius:0;box-shadow:none!important;padding:28px 28px 8px 0;gap:20px}
html.light .signal-card + .signal-card{padding-left:28px;border-left:1px solid var(--line2)}
html.light .signal-card-head h3{font-weight:500;font-size:22px}
html.light .signal-card-head p{font-size:15px;line-height:1.6}
html.light .signal-flow{gap:0;border-top:1px solid var(--line2)}
html.light .sf-step,html.light .sf-step.sig{background:none;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:12px 0 12px 14px;box-shadow:none}
html.light .sf-right,html.light .sf-arrow{display:none!important}
html.light .sf-label,html.light .sf-step.sig .sf-label{color:var(--faint)}
html.light .sf-val,html.light .sf-step.sig .sf-val{color:var(--ink);font-size:15px;font-weight:400}
@keyframes sf-hl{0%,100%{box-shadow:inset 0 0 0 transparent;background:transparent}
  6%,20%{box-shadow:inset 2px 0 0 var(--rp-accent);background:rgba(201,146,46,.08)}
  28%{box-shadow:inset 0 0 0 transparent;background:transparent}}
@media(max-width:900px){
  html.light .signals-grid{grid-template-columns:1fr}
  html.light .signal-card,html.light .signal-card + .signal-card{padding:26px 0 8px;border-left:0}
  html.light .signal-card + .signal-card{border-top:1px solid var(--line2)}
}

/* ================= comparison: a plain table with the ochre column ================= */
html.light .cmp2-scroll{border-radius:0}
html.light .cmp2-grid{border:0;border-top:1px solid var(--ink);border-radius:0;background:none}
html.light .c2{color:var(--muted);font-size:15px;border-bottom-color:var(--line2);padding:16px 18px}
html.light .c2-lbl{color:var(--ink);font-weight:500;padding-left:0}
html.light .c2h{font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
html.light .c2-me,html.light .c2h.c2-me,html.light .cmp2-grid > .c2-me:last-child{background:rgba(201,146,46,.09)!important;color:var(--ink)!important;box-shadow:none!important}
html.light .c2h.c2-me{box-shadow:inset 0 3px 0 var(--rp-accent)!important}
html.light .c2-me b{color:var(--ink);font-weight:600}
html.light .t2,html.light .t2.v,html.light .t2.x,html.light .t2.v.dim{background:none!important;border:0!important;width:auto;height:auto}
html.light .t2.v svg{stroke:var(--rp-accent-text)}
html.light .t2.x svg{stroke:var(--faint)}

/* ================= logo: the wordmark with an ochre stop ================= */
.logo{font-family:var(--display)!important;font-weight:500!important;font-size:21px!important;letter-spacing:-.035em!important;gap:0!important;color:var(--ink)}
.logo .logo-dot{color:var(--rp-accent)}

/* ================= trusted by: 30% larger ================= */
.trusted{padding:44px 0 30px}
.trusted-lbl{font-size:11px;margin-bottom:30px}
.m-logo{height:84px;padding:0 42px}
.m-logo img{height:38px;max-width:196px}
.m-logo.tall img{height:55px}

/* ================= signal plays: the tool icons are back, without chips ================= */
html.light .sf-right{display:flex!important;align-items:center;gap:6px}
html.light .sf-logo{width:18px;height:18px;object-fit:contain;border-radius:4px;background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
html.light .sf-score{display:none!important}

/* ================= two ways to work, v3: image led cards ================= */
.offers.v3{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:0;margin-top:8px}
.offers.v3 .offer,.offers.v3 .offer + .offer{padding:0;border:1px solid var(--line);border-radius:8px;background:#faf9f6;overflow:hidden;display:flex;flex-direction:column}
.offers.v3 .offer-main::before{display:none}
.offer-art{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.offer-art img{position:absolute;left:50%;top:4%;height:92%;width:auto;transform:translateX(-50%);-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.offer-body{display:flex;flex-direction:column;flex:1;padding:28px 30px 32px}
.offers.v3 .offer-n{margin:0 0 14px}
.offers.v3 h3{font-size:clamp(24px,2.3vw,30px)}
.offers.v3 .offer-price{margin:14px 0 14px;font:500 44px/1 var(--display);letter-spacing:-.035em}
.offers.v3 .offer-price .from{font:400 13px/1 var(--sans);letter-spacing:0;color:var(--muted);margin-right:8px;vertical-align:.8em}
.offers.v3 .offer-price .per{font:400 15px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.offers.v3 .offer-lead{margin:0 0 20px;max-width:40ch}
.offer-pts{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.offer-pts li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
@media(max-width:860px){.offers.v3{grid-template-columns:1fr}}

/* ================= hero: the harbour, faded in behind the headline =================
   The fades are baked into the image (top, left, bottom), so there is no gradient
   layer here to band. */
html.light .hero{background-image:url(hero-harbour.webp);background-repeat:no-repeat;background-position:right bottom;background-size:min(76vw,1340px) auto}
@media(max-width:860px){html.light .hero{background-size:150vw auto;background-position:55% 100%}}

/* ================= where I work: an engraved map instead of the globe ================= */
.reach-map{margin:30px auto 0;max-width:1120px}
.reach-map img{display:block;width:100%;height:auto}
html.light .globe-cap{color:var(--muted)}
html.light .globe-dot{background:var(--rp-accent);box-shadow:none}
html.light .globe-sec{max-width:var(--maxw)!important;text-align:center}
html.light .globe-sec h2{font-size:clamp(28px,4vw,42px)!important;margin:16px 0 12px!important}
html.light .globe-sec > p{max-width:60ch;margin-left:auto;margin-right:auto;color:var(--muted)}
.reach-map{max-width:1180px}

/* ================= where I work: the globe in paper, ink and ochre =================
   The sphere, land and markers are coloured in the cobe config (index.html); these rules
   undo the old dark-theme inversion and quiet the frame around it. */
html.light .globe-canvas,html.light .globe-arcs{filter:none}
.globe-stage{width:min(540px,86vw);margin:34px auto 18px}
.globe-stage::after{display:none}
html.light .globe-dot{background:var(--rp-accent);box-shadow:none;animation:none}
html.light .globe-cap{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}