/* ===========================================================================
   Ordane. One stylesheet, two pages: the agency page at / and the compliance
   product at /compliance. Pulled out of index.html when the second page landed,
   because a brand kept in two files becomes two brands within a month.
   =========================================================================== */
/* ===========================================================================
   Ordane. Single committed look: warm drafting paper, two ink bands, one ochre
   accent that only ever marks something live. Deliberately not a dark-mode
   site: this is a brand, and a brand that renders two ways is two brands.
   =========================================================================== */
:root{
  --ink:#0d1620; --ink-2:#152532; --prussian:#1c3d5a;
  --paper:#f3f0e9; --paper-2:#e9e4d9; --rule:#cec7b7;
  --graphite:#545e69; --ochre:#a9762f; --ochre-lit:#c8973f;

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* one scale, used everywhere, so nothing is an arbitrary size */
  --t-xs:12px; --t-sm:15px; --t-base:17.5px; --t-lg:21px;
  --pad:clamp(20px,5vw,44px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
/* Sticky header is ~68px, 56px once condensed. Anchor targets clear it. */
section[id],header[id],main[id]{scroll-margin-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;
  overflow-x:hidden;font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
a{color:inherit}
a,button,summary,input[type=range]{touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(169,118,47,.22)}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:1px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ochre-lit);
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:14px;padding:12px 18px}
.skip:focus{left:12px;top:12px}
.narrow{max-width:1080px}
.narrow>*{max-width:720px}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--graphite);margin:0}
h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,66px);
  line-height:1.01;letter-spacing:-.035em;margin:0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(25px,3.4vw,36px);
  line-height:1.1;letter-spacing:-.026em;text-wrap:balance;margin:0}
h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.008em;
  text-wrap:balance;margin:0}
p{margin:0}
.lede{font-size:clamp(18px,2.1vw,var(--t-lg));line-height:1.5;color:var(--graphite)}
.small{font-size:var(--t-sm)}
.soft{color:var(--graphite)}

/* ---- lockup B: the word sits inside the level ---- */
.lock{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;
  white-space:nowrap;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:.42em}
.lock .bar{display:block;width:.13em;height:.95em;background:currentColor;flex:none}
.lock .wm{display:inline-flex;align-items:baseline;letter-spacing:.30em;margin-right:-.30em}
.bub{position:relative;display:inline-block;height:.755em;width:.755em;
  vertical-align:baseline;top:.012em;margin-right:.30em;flex:none}
.bub svg{width:100%;height:100%}
svg .f{fill:currentColor}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:14.5px;
  text-decoration:none;padding:13px 22px;border:1.5px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn-lg{font-size:16px;padding:15px 28px}
.btn-ghost{border-color:#3d5468;color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

/* ---- nav ---- */
/* ---- header ------------------------------------------------------------
   Wayfinding set in mono, uppercase and tightly tracked, so the nav reads as
   the index of an instrument rather than a row of website links. One loud
   element only: the booking CTA, which is the single thing this page is for.
   The phone number sits beside it because a UK firm ringing you is a better
   outcome than a form, and half of them will.
   ------------------------------------------------------------------------ */
nav{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),
  background .25s var(--ease)}
nav.stuck{border-bottom-color:#22394b;background:rgba(13,22,32,.94);
  backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:19px;transition:padding-block .25s var(--ease)}
nav.stuck .nav-in{padding-block:13px}
.nav-in .lock{font-size:15px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}

/* :not(.btn) matters. Without it this rule outranks .btn-solid on specificity
   and repaints the CTA's text pale blue on cream, which is what made the
   button look broken. */
.nav-links a:not(.btn){position:relative;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  color:#8ea3b5;padding-block:4px;transition:color .2s var(--ease)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;
  width:100%;background:var(--ochre);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--paper)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.nav-tel{color:var(--paper)!important;font-variant-numeric:tabular-nums}

/* The one loud thing. Ochre is reserved for whatever is live, and on this page
   the live thing is the booking. Lit ochre against ink clears 6:1 on the label. */
.btn-cta{background:var(--ochre-lit);color:var(--ink);font-weight:700;
  letter-spacing:-.005em;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.btn-cta:hover{background:#d8a94e}
.btn-cta:active{transform:translateY(1px)}

@media(max-width:900px){.nav-links a:not(.btn):not(.nav-tel){display:none}}
@media(max-width:520px){.nav-tel{display:none}}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--ochre);width:0}

/* ---- reveal ---- */
.js .reveal{transform:translateY(14px);
  transition:transform .55s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{transform:none}
.lines .ln{display:block;overflow:hidden}
.js .lines .ln>span{display:block;transform:translateY(105%);
  transition:transform .55s var(--ease);transition-delay:var(--d,0ms)}
.js .lines.in .ln>span{transform:none}
.js .rule{transform:scaleX(0)}

/* ---- the bubble finding level ---- */
@keyframes settle{from{transform:translateX(8px)}to{transform:translateX(0)}}
/* Hero entrance, CSS only. No dependency on script, so the fold is painted as
   soon as styles apply rather than after parse plus a frame. */
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
@keyframes lift{from{transform:translateY(105%)}to{transform:none}}
.hero .reveal{opacity:1;animation:rise .45s var(--ease) both;animation-delay:var(--d,0ms)}
.hero .lines .ln>span{display:block;animation:lift .48s var(--ease) both;
  animation-delay:var(--d,0ms)}
@media(prefers-reduced-motion:reduce){
  .hero .reveal,.hero .lines .ln>span{animation:none}}
/* One mark on the page, in the nav. Repeating it large in the hero put the same
   logo twice within 100px and knocked the hero column out of rhythm. */
nav .bub .bubble{will-change:transform;
  animation:settle 1.25s cubic-bezier(.22,1.14,.36,1) .3s both}

/* ---- hero ---- */
.hero{background:var(--ink);color:var(--paper);padding-block:clamp(44px,6vw,76px) clamp(52px,8vw,96px)}
.hero-grid{display:grid;gap:clamp(34px,5vw,58px);grid-template-columns:1.22fr .95fr;align-items:start}
.hero h1{color:var(--paper)}
.hero .lede{color:#b9c8d6;max-width:44ch}
.hero .eyebrow{color:#8ea3b5}
.hero-copy{display:grid;gap:22px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  color:#7f93a5;text-transform:uppercase}
.datum{height:1px;background:#2b3f51;border:0;margin:0}
.hero-panel{border:1px solid #2b3f51;padding:26px;display:grid;gap:19px;background:#101d28}
.hero-panel .eyebrow{color:#7f93a5}
.stat{display:grid;gap:2px}
.stat b{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--paper)}
.stat span{font-size:13.5px;color:#8ea3b5}
.stat-row{display:grid;gap:14px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ---- sections ---- */
section{padding-block:clamp(48px,6.4vw,80px)}
.sec-head{display:grid;gap:13px;max-width:48ch}
.sec-no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ochre)}
.rule{height:1px;background:var(--rule);border:0;margin:0;
  transform-origin:left;transition:transform 1.1s var(--ease)}
.rule.in{transform:scaleX(1)}

/* The hairlines are the container background showing through 1px gaps, which is
   why the column count must always divide the cell count exactly. auto-fit left
   orphan slots that rendered as a solid slab. Explicit counts instead: 4 cells
   go 4/2/1, 6 cells go 3/2/1, and every row is full at every width. */
.cells{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.g4,.g6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.g4,.g6{grid-template-columns:1fr}}
/* A cell carries its own ink. It sets a light background, so inheriting the
   text colour from whichever band it sits in leaves pale text on a pale card
   the moment one is used inside a dark section. */
.cell{background:#fbf9f5;color:var(--ink);padding:26px;display:grid;gap:10px;align-content:start;
  transition:background .25s var(--ease)}
.cell:hover{background:var(--paper-2)}
.cell .q{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.cell p{font-size:14.5px;color:var(--graphite)}
.cell .idx{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--graphite)}
.cell.entry{background:var(--paper-2)}
.cell.entry .idx{color:var(--ochre)}

/* =====================================================================
   THE INSTRUMENT
   The one section that does something rather than describing it. Atlas
   says the Desire step is testimonials and there are none, so desire is
   generated from the visitor's own three numbers instead of a stranger's
   quote. It is labelled an estimate on purpose: overclaiming here would
   undo the exact thing the business sells.
   ===================================================================== */
.instr{background:var(--ink);color:var(--paper)}
.instr .eyebrow,.instr .sec-no{color:#8ea3b5}
.instr .sec-no{color:var(--ochre-lit)}
.instr h2{color:var(--paper)}
.instr .lede{color:#b9c8d6}
.instr-grid{display:grid;grid-template-columns:1fr .95fr;gap:clamp(28px,4vw,56px);
  margin-top:42px;align-items:start}
@media(max-width:900px){.instr-grid{grid-template-columns:1fr}}

.dials{display:grid;gap:26px;border:1px solid #2b3f51;background:#101d28;padding:clamp(22px,3vw,32px)}
.dial{display:grid;gap:11px}
.dial-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.dial-label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#8ea3b5}
.dial-val{font-family:var(--display);font-weight:700;font-size:19px;color:var(--paper)}

/* Slider drawn as a graduated scale, so the control matches the mark. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;margin:0;cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:26px;border-radius:0;
  background:
    linear-gradient(var(--ochre) 0 0) 0 100%/var(--fill,0%) 3px no-repeat,
    linear-gradient(#31485c 0 0) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,#31485c 0 1px,transparent 1px 10%) 0 100%/100% 8px no-repeat}
input[type=range]::-moz-range-track{height:26px;
  background:
    linear-gradient(#31485c 0 0) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,#31485c 0 1px,transparent 1px 10%) 0 100%/100% 8px no-repeat}
input[type=range]::-moz-range-progress{height:3px;background:var(--ochre);margin-top:23px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:26px;background:var(--paper);border:0;border-radius:1px;
  box-shadow:0 0 0 1px #0d1620;cursor:ew-resize}
input[type=range]::-moz-range-thumb{width:13px;height:26px;background:var(--paper);
  border:0;border-radius:1px;cursor:ew-resize}

.readout{border:1px solid #2b3f51;background:#101d28;padding:clamp(22px,3vw,32px);
  display:grid;gap:18px;align-content:start}
.readout .cap{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#8ea3b5}
.figure{font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(42px,7.2vw,68px);line-height:1;color:var(--ochre-lit)}
.sub-figure{font-size:var(--t-sm);color:#b9c8d6}
.readout .datum{background:#2b3f51}
.caveat{font-size:13.5px;color:#8ea3b5}
.caveat strong{color:#cfe0ee;font-weight:600}

/* ---- steps ---- */
.steps{display:grid;margin-top:40px;list-style:none;padding:0}
.step{display:grid;grid-template-columns:66px 1fr;gap:clamp(18px,3vw,38px);
  padding-block:30px;border-top:1px solid var(--rule);align-items:start}
.step:last-child{border-bottom:1px solid var(--rule)}
.step-n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ochre);padding-top:.42em}
.step-body{display:grid;gap:8px;max-width:60ch}
.step-body p{color:var(--graphite);font-size:15.5px}

/* ---- founder ---- */
.founder{display:grid;grid-template-columns:212px 1fr;gap:clamp(26px,4vw,52px);align-items:start}
.founder img{width:100%;height:auto;border:1px solid var(--rule)}
.founder-copy{display:grid;gap:15px;max-width:58ch}
.founder-meta{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:var(--graphite);text-transform:uppercase}
.founder-meta a{text-decoration:none;border-bottom:1px solid var(--rule)}
@media(max-width:720px){.founder{grid-template-columns:1fr}.founder img{max-width:212px}}

/* ---- faq ---- */
.faq{display:grid;margin-top:36px;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding-block:20px;font-family:var(--display);
  font-weight:700;font-size:16.5px;letter-spacing:-.01em;display:flex;
  justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--ochre);
  font-size:19px;flex:none;line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:22px;color:var(--graphite);font-size:15.5px;max-width:64ch}

/* ---- close + footer ---- */
.close{background:var(--ink);color:var(--paper)}
.close h2{color:var(--paper)}.close .lede{color:#b9c8d6}
.close .sec-no{color:var(--ochre-lit)}
.close-in{display:grid;gap:22px;justify-items:start}
.close-in>*{max-width:640px}
footer{background:var(--ink);color:#7f93a5}
.foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  padding-block:26px;border-top:1px solid #2b3f51;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}
.foot-in a{text-decoration:none}
.foot-in a:hover{color:var(--paper)}
.foot-in .lock{font-size:13px;color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .lines .ln>span{transform:none!important;transition:none!important}
  .rule{transform:scaleX(1)!important}
  nav .bub .bubble{animation:none!important}
}

/* A lede or a prose block used as a section's whole body, rather than as a
   standfirst inside a sec-head, needs the gap the sec-head would otherwise
   have provided. Without it the first line sits on the heading's descenders. */
.sec-head + .lede,
.sec-head + .founder-copy{margin-top:22px}
.sec-head + .founder-copy > :first-child{margin-top:0}