/* ═══════════════════════════════════════════════════════
   PROTOTYPE C · FIELD
   Contemporary 2026. No cards, no boxes, no hairline grids.
   The page is built from full-bleed colour fields and type
   sits directly on the colour. One typeface, extreme weight
   contrast, no serif, no mono.
   PALETTE: unchanged from the client's own design system.
   ═══════════════════════════════════════════════════════ */
/* ─── COLOUR SYSTEM ──────────────────────────────────────
   white   = canvas
   purple  = signal (buttons, numerals, rules, emphasis)
   lavender= meaningful surface, three places only:
             the enablement band, the agentic AI column,
             the closing CTA. Never section decoration.
   ──────────────────────────────────────────────────────── */
:root{
  --f:'Schibsted Grotesk','Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --shell:1460px; --gut:clamp(20px,5vw,68px);
  --nav:68px;
  --page:#FFFFFF; --surface:#F6F6F7; --photo:#EFEFF1; --white:#FFFFFF;
  --ink:#24242A; --ink2:#5A5A63; --ink3:#8E8E97;
  --plum:#3E2464; --plum-mid:#4B2D6B; --plum-soft:#6B4E96; --tint:#F2EDF8; --tint-edge:#DFD3EE;
  --border:#E3E3E6; --rule:#24242A;
}
:where(.tcp-home),:where(.tcp-home) *{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--page);}
body{margin:0;overflow-x:hidden;}
.tcp-home{background:var(--page);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;}
:where(.tcp-home) img{max-width:100%;display:block;}
:where(.tcp-home) a{color:inherit;text-decoration:none;}
:where(.tcp-home) :focus-visible{outline:3px solid var(--plum);outline-offset:2px;}
.tcp-shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut);}
.tcp-skip{position:absolute;left:-9999px;}
.tcp-skip:focus{left:12px;top:12px;background:var(--plum);color:#fff;padding:10px 16px;z-index:200;}

/* display type does the work; no serif anywhere */
:where(.tcp-home) h1,:where(.tcp-home) h2,:where(.tcp-home) h3{margin:0;font-weight:800;letter-spacing:-.04em;line-height:.95;}
:where(.tcp-home) h1{font-size:clamp(34px,5.4vw,72px);}
:where(.tcp-home) h2{font-size:clamp(27px,3.5vw,46px);letter-spacing:-.036em;}
:where(.tcp-home) h3{font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.12;}
:where(.tcp-home) p{margin:0;}
.tcp-t{font-size:17px;line-height:1.6;max-width:60ch;color:var(--ink2);}
.tcp-t+.tcp-t{margin-top:14px;}

/* full-bleed fields, alternating through the palette */
.tcp-f{padding:clamp(46px,5vw,76px) 0;}
.tcp-f-page{background:var(--page);}
.tcp-f-tint{background:var(--tint);}

/* the model and the closer are marked by a heavy purple rule, not a dark slab */
.tcp-f-mark{border-top:2px solid var(--plum);}
/* light sections that follow another light section separate with a rule,
   never with a fourth shade of beige */
.tcp-f-page.tcp-ruled,.tcp-f-tint.tcp-ruled{border-top:1px solid var(--border);}


.tcp-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f);
  font-size:16px;font-weight:700;letter-spacing:-.015em;padding:17px 30px;
  border:2px solid transparent;transition:background .16s,color .16s,border-color .16s;}
.tcp-btn-plum{background:var(--plum);color:var(--white);}
.tcp-btn-plum:hover{background:var(--plum-mid);}
.tcp-btn-line{background:transparent;color:var(--ink);border-color:var(--ink);}
.tcp-btn-line:hover{background:var(--ink);color:var(--page);}

.tcp-btn-cream{background:var(--plum);color:var(--white);}
.tcp-btn-cream:hover{background:var(--plum-mid);}

/* ══ NAV ══ */
.tcp-nav{position:sticky;top:0;z-index:90;background:var(--page);}
.tcp-nav-in{max-width:var(--shell);margin:0 auto;padding:0 var(--gut);height:var(--nav);
  display:flex;align-items:center;gap:24px;}
.tcp-mk{font-weight:800;font-size:18px;letter-spacing:-.04em;}
.tcp-nav-l{display:flex;align-items:center;gap:30px;margin-left:auto;}
.tcp-nav-l a{font-size:16px;font-weight:500;color:var(--ink2);}
.tcp-nav-l a:hover{color:var(--ink);}
.tcp-nav-l a.tcp-btn-plum{color:var(--white);}
.tcp-nav-b{padding:11px 20px;font-size:15px;}
.tcp-burger{display:none;background:none;border:0;padding:8px;margin-left:auto;cursor:pointer;}
.tcp-burger span{display:block;width:22px;height:2.5px;background:var(--ink);margin:5px 0;}
.tcp-sheet{display:none;}

/* ══ 1 HERO ══ */
.tcp-hero{padding:clamp(26px,3vw,44px) 0 clamp(32px,3.4vw,50px);background:var(--page);}
.tcp-hero h1{max-width:17ch;margin-bottom:clamp(18px,2vw,26px);}
.tcp-hero-b{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(26px,4vw,60px);align-items:start;position:relative;}
/* the image is taken out of flow so the text column, not the photo,
   decides the height of the hero */
/* shown in full, not cropped. It is taken out of flow and rises into the
   empty space beside the headline, so the text still sets the hero height */
.tcp-hero-ph{margin:0;background:var(--photo);border-bottom:5px solid var(--plum);
  position:absolute;right:0;bottom:0;width:clamp(180px,26vw,300px);}
.tcp-hero-ph img{width:100%;height:auto;display:block;}
.tcp-hero .tcp-t{font-size:clamp(17px,1.35vw,20px);max-width:46ch;}
.tcp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
/* three offers as plain lines on the cream, no panel */
.tcp-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(18px,3vw,44px);
  border-top:2px solid var(--ink);margin-top:clamp(24px,2.6vw,36px);}
.tcp-offer div{padding:16px 0 0;}
.tcp-offer b{display:block;font-weight:700;font-size:clamp(16px,1.3vw,18px);letter-spacing:-.022em;}
.tcp-offer span{display:block;font-size:15px;color:var(--ink2);margin-top:6px;line-height:1.45;}

/* ══ 2 MOTION: giant numerals on plum ══ */
.tcp-mot-h{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(24px,2.6vw,36px);}
.tcp-mot-h h2{max-width:15ch;}
.tcp-stages{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.6vw,24px);
  border-top:3px solid var(--plum);padding-top:18px;}
.tcp-sg-n{font-size:clamp(30px,3.6vw,52px);font-weight:900;letter-spacing:-.05em;color:var(--plum);line-height:.9;}
.tcp-sg-t{font-weight:700;font-size:clamp(15px,1.15vw,17px);letter-spacing:-.022em;line-height:1.15;margin-top:12px;color:var(--ink);}
.tcp-sg-d{font-size:14.5px;line-height:1.45;color:var(--ink2);margin-top:8px;}
/* enablement said once, as a band inside the same field */
.tcp-enable{margin-top:clamp(20px,2.2vw,30px);background:var(--tint);color:var(--ink);border-left:5px solid var(--plum);
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  display:grid;grid-template-columns:auto 1fr;gap:10px 30px;align-items:baseline;}
.tcp-enable b{font-size:clamp(19px,1.8vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1.1;}
.tcp-enable span{font-size:16px;line-height:1.5;color:var(--ink);max-width:62ch;}
.tcp-mot-f{margin-top:clamp(16px,1.8vw,24px);font-size:17px;line-height:1.6;color:var(--ink2);max-width:64ch;}
.tcp-mot-f b{color:var(--ink);font-weight:700;}

/* ══ 3 PROBLEMS: type straight onto amber ══ */
.tcp-pr-h{margin-bottom:clamp(20px,2.2vw,30px);max-width:20ch;}
.tcp-pb{border-top:2px solid var(--ink);}
.tcp-pb-r{display:grid;grid-template-columns:1.5fr 1fr;gap:12px 30px;align-items:baseline;
  padding:clamp(14px,1.7vw,21px) 0;border-bottom:1px solid var(--tint-edge);}
.tcp-pb-q{font-size:clamp(21px,2.6vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.08;}
.tcp-pb-a{font-size:16px;font-weight:600;color:var(--plum);}
.tcp-pb-f{margin-top:20px;font-size:17px;color:var(--ink2);max-width:62ch;line-height:1.55;}

/* ══ 4 HELP ══ */
.tcp-hp{border-top:2px solid var(--ink);margin-top:clamp(20px,2.2vw,30px);}
.tcp-hp-r{display:grid;grid-template-columns:auto 1fr 1.25fr;gap:clamp(16px,2.6vw,40px);
  padding:clamp(17px,1.9vw,25px) 0;border-bottom:1px solid var(--border);align-items:start;}
.tcp-hp-n{font-size:clamp(28px,3vw,42px);font-weight:900;color:var(--plum);letter-spacing:-.05em;line-height:.85;min-width:1.6ch;}
.tcp-hp-w{font-size:15px;color:var(--ink3);margin-top:8px;line-height:1.45;}
.tcp-hp-p{font-size:16px;line-height:1.62;color:var(--ink2);}
.tcp-hp-note{margin-top:clamp(18px,1.9vw,25px);font-size:clamp(19px,1.9vw,26px);font-weight:700;
  letter-spacing:-.028em;line-height:1.2;max-width:40ch;}

/* ══ 5 WORK ══ */
.tcp-wk{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.8vw,26px);
  border-top:2px solid var(--ink);padding-top:16px;margin-top:clamp(20px,2.2vw,30px);}
.tcp-wk-n{font-size:clamp(24px,2.5vw,34px);font-weight:900;color:var(--plum);letter-spacing:-.05em;line-height:.9;}
.tcp-wk-t{font-weight:700;font-size:16px;letter-spacing:-.022em;margin-top:10px;line-height:1.15;}
.tcp-wk-d{font-size:14.5px;color:var(--ink2);margin-top:8px;line-height:1.45;}
.tcp-wk-c{margin-top:clamp(18px,1.9vw,26px);display:flex;gap:10px 24px;flex-wrap:wrap;align-items:baseline;}
.tcp-wk-c b{font-size:clamp(21px,2.2vw,30px);font-weight:800;letter-spacing:-.03em;}
.tcp-wk-c span{font-size:17px;color:var(--ink2);}

/* ══ 6 AI ══ */
.tcp-ai-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:clamp(20px,2.2vw,30px);align-items:start;}
.tcp-ai-c h3{color:var(--ink);margin-bottom:16px;}
.tcp-ai-c ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
.tcp-ai-c li{font-size:16px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--ink2);line-height:1.45;}
.tcp-ai-c.tcp-now{background:var(--tint);border-left:5px solid var(--plum);padding:22px 24px;}
.tcp-ai-c.tcp-now li{color:var(--ink);border-bottom-color:var(--tint-edge);}
.tcp-ai-c.tcp-now ul{border-top-color:var(--tint-edge);}
.tcp-ai-lab{font-size:15px;font-weight:700;color:var(--plum);margin-bottom:12px;letter-spacing:-.015em;}
.tcp-ai-q{margin-top:clamp(20px,2.2vw,30px);}
.tcp-ai-q p{font-size:clamp(22px,2.9vw,38px);font-weight:800;letter-spacing:-.032em;line-height:1.08;color:var(--plum);max-width:34ch;}

/* ══ 7 PROOF ══ */

/* proof reads as evidence: the figures first, the account underneath */
.tcp-pf-m{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);
  border-top:2px solid var(--plum);padding-top:16px;margin-bottom:clamp(22px,2.6vw,34px);}
.tcp-pf-m b{display:block;font-size:clamp(36px,4.4vw,62px);font-weight:900;color:var(--plum);
  letter-spacing:-.05em;line-height:.88;}
.tcp-pf-m span{display:block;font-size:15px;color:var(--ink2);margin-top:10px;}
.tcp-pf-s{font-size:clamp(20px,2.1vw,29px);font-weight:700;letter-spacing:-.03em;line-height:1.18;max-width:40ch;}
.tcp-pf-q{margin-top:clamp(18px,1.9vw,26px);border-top:1px solid var(--border);padding-top:16px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:12px 30px;align-items:baseline;}
.tcp-pf-q p{font-size:18px;line-height:1.5;color:var(--ink2);}
.tcp-pf-a{font-size:15px;color:var(--ink3);font-weight:500;}

/* ══ 8 ASSESSMENT ══ */
.tcp-as-g{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:center;}
.tcp-as-g h2{max-width:15ch;margin-bottom:18px;}
.tcp-as-g .tcp-t{color:var(--ink2);}
.tcp-as-n{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:2px solid var(--plum);padding-top:16px;}
.tcp-as-n b{display:block;font-size:clamp(32px,3.6vw,52px);font-weight:900;color:var(--plum);letter-spacing:-.05em;line-height:.9;}
.tcp-as-n span{display:block;font-size:14.5px;color:var(--ink);margin-top:8px;}

/* ══ 9 ABOUT ══ */
.tcp-ab-g{display:grid;grid-template-columns:250px 1fr;gap:clamp(22px,4vw,52px);align-items:center;}
.tcp-ab-ph{background:var(--photo);overflow:hidden;border-bottom:6px solid var(--plum);}
.tcp-ab-ph img{width:100%;height:auto;}
.tcp-ab-g h2{max-width:14ch;margin-bottom:16px;}
.tcp-ab-li{display:inline-block;margin-top:20px;font-weight:700;font-size:16px;
  border-bottom:3px solid var(--plum);padding-bottom:2px;}

/* ══ 10 FINAL ══ */
.tcp-fin h2{color:var(--plum);max-width:12ch;margin-bottom:20px;}
.tcp-fin p{font-size:clamp(17px,1.4vw,20px);color:var(--ink2);max-width:46ch;line-height:1.55;}
.tcp-fin-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.tcp-fin-note{font-size:15px;color:var(--ink2);}


/* a quiet closing invitation. White with a purple rule so it reads as its own
   section without competing with the lavender CTA directly above it. */
.tcp-signup{background:var(--page);border-top:2px solid var(--plum);padding:clamp(44px,4.6vw,70px) 0;}
.tcp-su-g{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,64px);align-items:center;}
.tcp-su-1{font-size:clamp(21px,2.1vw,29px);font-weight:700;color:var(--ink);letter-spacing:-.028em;
  line-height:1.14;max-width:22ch;}
.tcp-su-2{font-size:16.5px;color:var(--ink2);margin-top:10px;max-width:46ch;line-height:1.55;}
.tcp-su-f{display:flex;gap:10px;align-items:stretch;}
.tcp-su-lab{position:absolute;left:-9999px;}
.tcp-su-f input{font-family:var(--f);font-size:16px;padding:14px 16px;border:1.5px solid var(--ink);
  background:var(--white);color:var(--ink);min-width:282px;}
.tcp-su-f input:focus{border-color:var(--plum);}
.tcp-su-f input::placeholder{color:var(--ink2);opacity:1;}
.tcp-su-f button{padding:14px 26px;font-size:15.5px;}
.tcp-su-f button[disabled]{opacity:.55;cursor:default;}
.tcp-su-msg{margin-top:12px;font-size:15.5px;color:var(--plum);font-weight:600;}
.tcp-su-msg.tcp-err{color:#B3123F;}
.tcp-foot{background:var(--page);color:var(--ink2);padding:0 0 36px;}
.tcp-foot-in{border-top:1px solid var(--border);padding-top:24px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:15px;}
.tcp-foot-in a{color:var(--ink);}
.tcp-foot-l{display:flex;gap:24px;flex-wrap:wrap;}

/* ══ RESPONSIVE ══ */
@media(max-width:1080px){
  .tcp-su-g{grid-template-columns:1fr;gap:16px;}
  .tcp-mot-h{grid-template-columns:1fr;gap:16px;align-items:start;}
  .tcp-stages{grid-template-columns:repeat(3,1fr);gap:26px 20px;}
  .tcp-wk{grid-template-columns:repeat(3,1fr);gap:24px 20px;}
  .tcp-ai-g{grid-template-columns:1fr;gap:28px;}
  .tcp-as-g{grid-template-columns:1fr;}
  .tcp-pf-q{grid-template-columns:1fr;}
}
@media(max-width:820px){
  .tcp-nav-l{display:none;} .tcp-burger{display:block;}
  .tcp-sheet{display:block;position:fixed;inset:var(--nav) 0 auto 0;background:var(--page);
    transform:translateY(-120%);transition:transform .24s;z-index:89;padding:6px var(--gut) 26px;}
  .tcp-sheet.tcp-open{transform:translateY(0);}
  .tcp-sheet a{display:block;padding:16px 0;font-weight:700;font-size:21px;letter-spacing:-.03em;border-bottom:1px solid var(--border);}
  .tcp-sheet .tcp-btn{width:100%;margin-top:20px;}
  .tcp-nav-bm{display:inline-flex;margin-left:auto;}
  .tcp-pb-r{grid-template-columns:1fr;gap:8px;}
  .tcp-hp-r{grid-template-columns:auto 1fr;}
  .tcp-hp-p{grid-column:2;margin-top:10px;}
  .tcp-enable{grid-template-columns:1fr;}
}
@media(min-width:821px){ .tcp-nav-bm{display:none;} }
@media(max-width:700px){
  /* stacked: the portrait is centred and capped so it never leaves a
     lopsided gap, and never fills a whole screen on its own */
  /* mobile hero: headline, paragraph, buttons, service lines.
     The portrait is removed outright, not hidden behind a reserved box. */
  .tcp-hero-b{display:block;}
  .tcp-hero-ph{display:none;}
  .tcp-hero-cta{margin-top:clamp(24px,6vw,30px);}
  .tcp-offer{margin-top:clamp(28px,7vw,36px);}
  .tcp-hero{padding-bottom:clamp(30px,4vw,42px);}
}
@media(max-width:520px){
  .tcp-nav-b{padding:9px 15px;font-size:14px;}
  .tcp-nav-in{gap:12px;}
}
/* below this the two labels no longer fit on one row without wrapping
   awkwardly, so they stack at equal width instead */
@media(max-width:560px){
  .tcp-hero-cta{flex-direction:column;align-items:stretch;}
  .tcp-hero-cta .tcp-btn{width:100%;padding:15px 20px;}
}
@media(max-width:640px){
  .tcp-pf-m{grid-template-columns:1fr;gap:0;}
  .tcp-pf-m > div{padding:14px 0;border-bottom:1px solid var(--border);}
  .tcp-pf-m > div:last-child{border-bottom:none;}
  .tcp-su-g{grid-template-columns:1fr;gap:18px;}
  .tcp-su-f{flex-direction:column;}
  .tcp-su-f input{min-width:0;width:100%;}
  .tcp-su-f button{width:100%;}

  .tcp-stages{grid-template-columns:1fr;gap:0;}
  .tcp-stages > div{padding:16px 0;border-bottom:1px solid var(--border);}
  .tcp-stages > div:last-child{border-bottom:none;}
  .tcp-sg-t{margin-top:6px;}
  .tcp-wk{grid-template-columns:1fr;gap:0;}
  .tcp-wk > div{padding:16px 0;border-bottom:1px solid var(--border);}
  .tcp-wk > div:last-child{border-bottom:none;}
  /* one small data summary, not three stacked sections */
  .tcp-as-n{grid-template-columns:repeat(3,1fr);gap:0;padding-top:14px;}
  .tcp-as-n > div{padding:0 0 0 12px;border-left:1px solid var(--border);border-bottom:none;}
  .tcp-as-n > div:first-child{padding-left:0;border-left:none;}
  .tcp-as-n b{font-size:clamp(26px,7.4vw,34px);}
  .tcp-as-n span{font-size:12.5px;margin-top:6px;line-height:1.3;}
  /* portrait sits beside the heading; the biography then runs full width */
  .tcp-ab-g{grid-template-columns:120px 1fr;gap:14px 18px;align-items:start;}
  .tcp-ab-g > div{display:contents;}
  .tcp-ab-ph{grid-column:1;grid-row:1;max-width:120px;align-self:start;}
  .tcp-ab-g h2{grid-column:2;grid-row:1;max-width:none;margin-bottom:0;}
  .tcp-ab-g .tcp-t{grid-column:1 / -1;grid-row:2;}
  .tcp-ab-g .tcp-ab-li{grid-column:1 / -1;grid-row:3;margin-top:14px;justify-self:start;}
  .tcp-offer{grid-template-columns:1fr;}
  .tcp-offer div{padding:14px 0;border-bottom:1px solid var(--border);}
  .tcp-offer div:last-child{border-bottom:none;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}