/* ==========================================================
   The Cloud Consultancy People — Design System v3
   Warm paper · near-black ink · deep teal
   Funnel Display / Instrument Sans / IBM Plex Mono
   ========================================================== */
:root{
  /* colour */
  --ink:#15171A; --ink-2:#24272C; --text:#3A3E44; --muted:#64686F;
  --line:#E3DFD6; --line-strong:#CCC6B9;
  --paper:#F6F4EF; --paper-2:#EEEBE3; --surface:#FDFCFA;
  --accent:#1F5F5B; --accent-hover:#174A47; --accent-tint:#E2ECEA; --accent-on-dark:#7DBDB4;
  --on-dark:#F2F0EA; --on-dark-muted:#A3A7AD;
  --success:#2F7A4F; --warning:#A8661C; --error:#B3402E;
  /* type */
  --font-display:'Funnel Display','Helvetica Neue',Arial,sans-serif;
  --font-body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* space */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:144px;
  /* radius & depth */
  --r-0:0;--r-1:6px;--r-2:10px;--r-pill:999px;
  --shadow-float:0 1px 2px rgba(21,23,26,.06),0 16px 40px -16px rgba(21,23,26,.22);
  /* motion */
  --t-fast:120ms;--t-base:200ms;--t-reveal:420ms;--ease:cubic-bezier(.2,.7,.2,1);

  /* legacy aliases (admin + older markup) */
  --bg:var(--paper);--panel:var(--surface);--panel-2:var(--paper-2);--accent-dim:var(--accent-hover);
  --ok:var(--success);--bad:var(--error);
  --display:var(--font-display);--body:var(--font-body);--mono:var(--font-mono);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 17px/1.65 var(--font-body);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:600}
h1{font-size:clamp(40px,5vw,64px);line-height:1.04;letter-spacing:-.025em;max-width:18ch}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
h3{font-size:clamp(22px,2vw,26px);line-height:1.2;letter-spacing:-.01em;font-weight:500}
h4{font-family:var(--font-body);font-size:19px;line-height:1.35;font-weight:600;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:normal;color:inherit}
.dot{color:var(--accent)}
.mono{font-family:var(--font-mono)}

/* eyebrow label */
.index{display:flex;align-items:center;gap:12px;font:500 12.5px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--accent);margin-bottom:20px}
.index::before{content:"";width:24px;height:1px;background:var(--accent);flex-shrink:0}

/* ---------- header ---------- */
.statusbar{display:none}
header.top{position:sticky;top:0;z-index:60;background:rgba(246,244,239,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.mark{font:600 19px/1 var(--font-display);letter-spacing:-.015em;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font:500 15px/1 var(--font-body);color:var(--muted);text-decoration:none;padding:6px 0;transition:color var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-links a.btn{color:var(--on-dark);padding:0 16px}
.menu-btn{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--r-1);height:40px;padding:0 16px;font:500 15px var(--font-body);color:var(--ink)}
.m-menu{display:none;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 72px);background:var(--paper);overflow-y:auto;padding:16px 20px 32px;border-top:1px solid var(--line)}
.m-menu.open{display:flex;flex-direction:column}
.m-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font:500 30px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.m-menu a.m-cta{margin-top:auto;border:none;text-align:center;font:500 16px/1 var(--font-body);background:var(--ink);color:var(--on-dark);border-radius:var(--r-1);padding:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r-1);border:1px solid var(--ink);background:var(--ink);color:var(--on-dark);font:500 15px/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.small{height:40px;padding:0 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.audit{background:var(--ink);color:var(--on-dark)}
.btn[disabled]{opacity:.4;pointer-events:none}
.link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover{text-decoration-thickness:2px}

/* ---------- hero ---------- */
.hero{padding:var(--s-9) 0 var(--s-8);border-bottom:1px solid var(--line)}
.hero .wrap,.hero .wrap-narrow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.hero .wrap>*{grid-column:1/-1}
.hero h1{grid-column:1/11;font-size:clamp(46px,6.4vw,84px);line-height:1;letter-spacing:-.03em;max-width:16ch}
.hero .sub{grid-column:7/13;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--text);max-width:52ch;margin:var(--s-7) 0 var(--s-6)}
.hero .hero-cta{grid-column:7/13;display:flex;gap:12px;flex-wrap:wrap}
.hero .back-link{grid-column:1/-1}
.sub{color:var(--text)}

/* ---------- sections ---------- */
section{padding:var(--s-10) 0;border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-bottom:var(--s-7)}
.sec-head>div{grid-column:1/7}
.sec-head>p{grid-column:8/13;align-self:end;color:var(--text);max-width:46ch}

/* stats */
section:has(.stats-row){padding:var(--s-8) 0}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.stats-row .s{padding:32px 24px 28px 0}
.stats-row .s+.s{padding-left:24px;border-left:1px solid var(--line)}
.stats-row b{display:block;font:500 clamp(36px,3.6vw,48px)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stats-row b em{font-style:normal;color:inherit}
.stats-row span{display:block;margin-top:12px;font:500 12.5px/1.4 var(--font-mono);color:var(--muted)}

/* service rows (formerly cards) */
.cards{border-top:1px solid var(--ink)}
.card{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:8px;padding:40px 16px;border-bottom:1px solid var(--line);text-decoration:none;transition:background var(--t-fast) var(--ease)}
.card .k{grid-column:1/4;grid-row:1/3;font:500 12.5px/1.6 var(--font-mono);color:var(--accent)}
.card h3,.card p{grid-column:4/10}
.card p{color:var(--text);max-width:56ch}
.card .go{grid-column:10/13;grid-row:1/3;justify-self:end;align-self:start;font:500 15px var(--font-body);color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
a.card:hover{background:var(--paper-2)}
a.card:hover h3{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
a.card:hover .go,a.card:focus-visible .go{opacity:1;transform:none}
a.card .go{opacity:1;transform:none;color:var(--muted)}
a.card:hover .go{color:var(--accent)}

/* dark feature band (quote) */
.band{background:var(--ink);color:var(--on-dark);padding:var(--s-10) 0}
.band blockquote{font:500 clamp(28px,3.4vw,44px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--on-dark);max-width:26ch}
.band blockquote em{font-style:normal;color:var(--accent-on-dark)}
.band cite{display:block;margin-top:var(--s-6);font:500 12.5px var(--font-mono);font-style:normal;color:var(--on-dark-muted)}

/* steps (true sequences) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px}
.step{border-top:1px solid var(--ink);padding-top:24px}
.step .n{display:block;font:500 12.5px var(--font-mono);color:var(--accent);margin-bottom:24px}
.step b{display:block;font:500 24px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
.step p{color:var(--text);max-width:36ch}

/* ruled lists */
ul.ticks{list-style:none;border-top:1px solid var(--ink);max-width:820px}
ul.ticks li{position:relative;padding:18px 0 18px 40px;border-bottom:1px solid var(--line);color:var(--text)}
ul.ticks li::before{content:"";position:absolute;left:0;top:31px;width:20px;height:1px;background:var(--accent)}

/* prose */
.prose{max-width:66ch;display:grid;gap:1em;font-size:18px}
.prose strong{color:var(--ink);font-weight:600}

/* cta block */
.cta-strip{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;background:var(--paper-2);border-radius:var(--r-2);padding:var(--s-8) var(--s-7)}
.cta-strip>div{grid-column:1/9}
.cta-strip>.btn{grid-column:10/13;justify-self:end}
.cta-strip p{color:var(--text);max-width:52ch;margin-top:16px}
section:has(.cta-strip){border-bottom:none}

/* case study */
.case{border-top:1px solid var(--ink)}
.case-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.case-cell{padding:28px 0;border-bottom:1px solid var(--line)}
.case-cell .k{display:block;font:500 12.5px var(--font-mono);color:var(--accent);margin-bottom:10px}
.case-cell p{color:var(--text)}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);border-radius:var(--r-2);margin-top:var(--s-6)}
.case-stats .s{padding:32px 28px}
.case-stats .s+.s{border-left:1px solid rgba(255,255,255,.1)}
.case-stats b{display:block;font:500 clamp(34px,3.4vw,48px)/1 var(--font-display);letter-spacing:-.03em;color:var(--on-dark);font-variant-numeric:tabular-nums}
.case-stats span{display:block;margin-top:12px;font:500 12.5px var(--font-mono);color:var(--on-dark-muted)}

/* faq */
.faq{border-top:1px solid var(--ink);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:500 21px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--font-body);color:var(--accent);transition:transform var(--t-base) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 0 28px;color:var(--text);max-width:66ch}

/* ---------- forms ---------- */
form{display:flex;flex-direction:column;gap:20px}
label{font:500 14px/1.4 var(--font-body);color:var(--ink)}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;height:48px;margin-top:8px;padding:0 14px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-1);font:400 16px var(--font-body);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,91,.18)}
input::placeholder,textarea::placeholder{color:#9A9C9F}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.consent{display:flex;gap:12px;align-items:flex-start;font:400 14px/1.5 var(--font-body);color:var(--text)}
.consent input{appearance:none;width:18px;height:18px;margin-top:2px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);display:grid;place-items:center}
.consent input:checked{background:var(--accent);border-color:var(--accent)}
.consent input:checked::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.form-msg{font-size:14px;min-height:20px;font-weight:500}
.form-msg.ok{color:var(--success)}
.form-msg.err{color:var(--error)}
.panel-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.panel-grid .blurb{position:sticky;top:104px}
.panel-grid .blurb h2{margin-bottom:16px}
.panel-grid .blurb p{color:var(--text);max-width:42ch;margin-bottom:24px}
.panel-grid .blurb ul.ticks{border-top:1px solid var(--line)}
.panel-grid form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:40px}
.panel-grid form .btn{align-self:flex-start}

/* figure / diagram */
.figure{border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);padding:32px;overflow-x:auto}
.figure svg{display:block;width:100%;min-width:720px;height:auto}
.figcap{display:flex;justify-content:space-between;gap:24px;margin-top:16px;font:500 12.5px/1.5 var(--font-mono);color:var(--muted)}
.figcap b{color:var(--accent);font-weight:500}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--on-dark-muted);padding:var(--s-9) 0 0}
.foot-grid{display:grid;grid-template-columns:5fr 2fr 2fr 3fr;gap:32px;padding-bottom:var(--s-8)}
.foot-grid .about-col .mark{font-size:clamp(28px,3vw,40px);color:var(--on-dark);white-space:normal;line-height:1.05;letter-spacing:-.02em;display:block;max-width:12ch}
.foot-grid .about-col .mark .dot{color:var(--accent-on-dark)}
.foot-grid .about-col p{margin-top:24px;max-width:38ch;font-size:15px}
.foot-grid h4{font:500 12.5px var(--font-mono);color:var(--accent-on-dark);margin-bottom:20px}
.foot-grid ul{list-style:none;display:grid;gap:12px}
.foot-grid a{color:var(--on-dark-muted);text-decoration:none;font-size:15px;transition:color var(--t-fast) var(--ease)}
.foot-grid a:hover{color:var(--on-dark)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.foot-bottom a{color:var(--on-dark-muted);text-decoration:none}
.foot-bottom a:hover{color:var(--on-dark)}
footer.site :focus-visible{outline-color:var(--accent-on-dark)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.rv.in{opacity:1;transform:none}
.cursor::after{content:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .mark{font-size:17px}
  .menu-btn{display:inline-flex;align-items:center}
  .hero{padding:var(--s-8) 0 var(--s-7)}
  .hero h1,.hero .sub,.hero .hero-cta{grid-column:1/-1}
  .hero .sub{margin-top:var(--s-6)}
  section,.band{padding:var(--s-9) 0}
  .sec-head>div,.sec-head>p{grid-column:1/-1}
  .sec-head>p{margin-top:16px}
  .stats-row{grid-template-columns:1fr 1fr}
  .stats-row .s{padding:24px 16px 24px 0}
  .stats-row .s:nth-child(3){padding-left:0;border-left:none}
  .stats-row .s:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .card{padding:28px 0}
  .card .k,.card h3,.card p,.card .go{grid-column:1/-1;grid-row:auto}
  .card .go{justify-self:start;margin-top:8px}
  .steps{grid-template-columns:1fr;row-gap:32px}
  .cta-strip{padding:40px 24px;row-gap:24px}
  .cta-strip>div,.cta-strip>.btn{grid-column:1/-1;justify-self:start}
  .case-grid{grid-template-columns:1fr}
  .case-stats{grid-template-columns:1fr}
  .case-stats .s+.s{border-left:none;border-top:1px solid rgba(255,255,255,.1)}
  .row2{grid-template-columns:1fr}
  .panel-grid{grid-template-columns:1fr}
  .panel-grid .blurb{position:static}
  .panel-grid form{padding:24px}
  .panel-grid form .btn{align-self:stretch}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid .about-col{grid-column:1/-1}
  .figure{padding:16px}
}
@media (max-width:420px){.mark{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}