/* ============================================================
   444Video - design system
   Palette and roles from Marketing & Brand Guidelines v1.0.
   Pure brand hues for the rule and for data; settled
   derivatives for text, state and surfaces on the dark ground.
   ============================================================ */

/* Fonts are self-hosted from static/fonts/ - no request to Google, so no
   visitor IP leaves the site before consent. Inter is one variable file per
   style covering every weight. Plex Mono is kept for code and data readouts. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  /* Brand - pure, from Logo.png */
  --blue:#1200FE;  --aqua:#00FEC8;  --orange:#FEA300; --red:#FE0000;
  --purple:#B500FE; --green:#00FE05; --yellow:#FBFE00; --pink:#FE009C;

  /* Ground - the deck's navy #173F5C, taken down */
  --ground:#0A141C;
  --surface:#0F1E29;
  --surface-2:#152836;
  --line:#22394A;
  --line-soft:#182E3D;

  --text:#E6EEF3;
  --dim:#94AAB8;
  --faint:#63808F;

  --accent:#00FEC8;          /* links on dark; blue stays primary in print */
  --accent-ink:#0A141C;
  --good:#3FD97A;
  --warn:#FEA300;
  --bad:#FF6A5E;

  /* One typeface. --label is Inter set small, caps and tracked - nav, eyebrows,
     buttons, captions. --mono is only for code and the field report's data. */
  --display:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --label:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --measure:66ch;
  --page:1180px;
  --gutter:clamp(20px,4vw,48px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the rule: logo order, unrolled ---------- */
.bars{display:flex;height:6px}
.bars i{flex:1}
.bars i:nth-child(1){background:var(--blue)}
.bars i:nth-child(2){background:var(--aqua)}
.bars i:nth-child(3){background:var(--orange)}
.bars i:nth-child(4){background:var(--red)}
.bars i:nth-child(5){background:var(--purple)}
.bars i:nth-child(6){background:var(--green)}
.bars i:nth-child(7){background:var(--yellow)}
.bars i:nth-child(8){background:var(--pink)}

/* ---------- logo ---------- */
.logo-mark{width:68px;height:auto;flex:none}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
/* The slogan centres to the width of the wordmark, not to the whole lockup -
   the mark stays to the left of both. */
.brand-text{display:inline-flex;flex-direction:column;align-items:center}
.brand-text b{
  display:block;font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:-.012em;line-height:1.1;
}
.brand-text i{
  display:block;font-family:var(--body);font-style:italic;font-size:13.5px;
  color:var(--dim);line-height:1.35;text-align:center;
}

/* ---------- header ---------- */
.site-head{
  max-width:var(--page);margin:0 auto;padding:22px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.site-nav{display:flex;gap:26px;flex-wrap:wrap}
.site-nav a{
  font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--eyebrow-colour,var(--accent));margin:0 0 16px;
}
h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.4vw,56px);line-height:1.04;letter-spacing:-.022em;margin:0 0 18px;text-wrap:balance}
h2{font-family:var(--display);font-weight:600;font-size:clamp(25px,3.2vw,34px);line-height:1.12;letter-spacing:-.018em;margin:0 0 14px;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.012em;margin:0 0 12px;text-wrap:balance}
h4{font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
p{margin:0 0 18px;max-width:var(--measure)}
.standfirst{font-size:20px;color:var(--dim);max-width:58ch}
.lede{font-size:19px;color:var(--dim);max-width:62ch}

.section-head{max-width:var(--page);margin:0 auto;padding:0 var(--gutter) 4px}
.page-head{max-width:var(--page);margin:0 auto;padding:56px var(--gutter) 40px;border-bottom:1px solid var(--line)}

/* ---------- buttons ---------- */
.actions{display:flex;gap:14px;flex-wrap:wrap;max-width:none}
.btn{
  display:inline-block;font-family:var(--label);font-size:13px;letter-spacing:.04em;
  padding:12px 20px;text-decoration:none;background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent);font-weight:500;
}
.btn:hover{background:transparent;color:var(--accent)}
.btn-quiet{background:transparent;color:var(--text);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--accent);color:var(--accent)}
.more{
  font-family:var(--label);font-size:13px;letter-spacing:.04em;text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:2px;
}
.more::after{content:" →"}
.more:hover{color:var(--text);border-color:var(--text)}

/* ---------- hero ---------- */
.hero{
  max-width:var(--page);margin:0 auto;padding:52px var(--gutter) 56px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.hero-figure{margin:0}
.hero-figure img{border:1px solid var(--line)}
.hero-figure figcaption,.report-teaser figcaption{
  font-family:var(--label);font-size:11.5px;color:var(--faint);margin-top:10px;line-height:1.5;
}

/* ---------- bands ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.band-inner{max-width:var(--page);margin:0 auto;padding:44px var(--gutter)}

/* ---------- pillars (home) ---------- */
/* A hairline and a short fade from the raised surface mark each section
   boundary, so the eye gets a break instead of a large empty gap. */
.section-break{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface) 0, rgba(15,30,41,0) 260px);
}
.pillars{max-width:var(--page);margin:0 auto;padding:40px 0 8px}
.pillar{
  display:grid;grid-template-columns:340px 1fr;gap:clamp(20px,3.5vw,44px);align-items:start;
  padding:30px var(--gutter);border-top:1px solid var(--line-soft);
}
.pillar:first-of-type{border-top:1px solid var(--line);margin-top:18px}
.pillar figure{margin:0}
.pillar img{border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.pillar-body p{max-width:58ch}

/* ---------- services ---------- */
.service{
  max-width:var(--page);margin:0 auto;padding:48px var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,56px);align-items:center;
}
.service figure{margin:0}
.service img{border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.service-flip figure{order:2}
.in-practice{
  background:var(--surface);border-left:2px solid var(--panel-colour,var(--accent));
  padding:20px 22px;margin:22px 0;
}
.in-practice ul{margin:0;padding-left:18px;color:var(--dim)}
.in-practice li{margin-bottom:8px}
.in-practice li::marker{color:var(--panel-colour,var(--accent))}

/* ---------- figures / stat tiles ---------- */
.proof{max-width:var(--page);margin:0 auto;padding:64px 0 8px}
.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin:26px var(--gutter);
}
.figure-tile{background:var(--surface);padding:22px 20px}
.figure-tile b{
  display:block;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,38px);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
}
.figure-tile span{
  display:block;margin-top:8px;font-family:var(--label);font-size:11.5px;
  letter-spacing:.06em;color:var(--faint);line-height:1.5;
}
.attribution{
  font-family:var(--label);font-size:12px;color:var(--faint);
  margin:0 var(--gutter) 30px;max-width:none;
}

/* ---------- quotes ---------- */
.pull{margin:30px var(--gutter);padding-left:22px;border-left:2px solid var(--orange);max-width:none}
.pull p{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.3vw,25px);line-height:1.35;letter-spacing:-.012em;margin:0 0 12px;max-width:32ch}
.pull cite{font-family:var(--label);font-size:12px;font-style:normal;color:var(--faint);letter-spacing:.04em}
.pull-lead p{max-width:26ch}

/* ---------- report teaser ---------- */
.report-teaser{
  max-width:var(--page);margin:0 auto;padding:64px var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,56px);align-items:center;
  border-top:1px solid var(--line);
}
.report-teaser figure{margin:0}
.report-teaser img{border:1px solid var(--line)}

/* ---------- case study ---------- */
.case{max-width:var(--page);margin:0 auto}
.case-head{padding:56px var(--gutter) 30px}
.glance{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:34px 0;
}
.glance-col{background:var(--surface);padding:24px var(--gutter)}
.glance-col ul{margin:0;padding-left:18px;color:var(--dim)}
.glance-col li{margin-bottom:8px}
.glance-col li::marker{color:var(--faint)}
.abouts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:44px var(--gutter);
}
.about-col{background:var(--surface);padding:24px}
.about-col p{color:var(--dim);margin:0}

/* ---------- prose (markdown body) ---------- */
.prose{max-width:var(--page);margin:0 auto;padding:8px var(--gutter) 40px}
.prose h2{margin-top:46px}
.prose h3{margin-top:32px}
.prose p,.prose li{color:var(--dim)}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{max-width:var(--measure);padding-left:20px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--faint)}
.prose blockquote{
  margin:28px 0;padding-left:22px;border-left:2px solid var(--orange);
}
.prose blockquote p{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.4;color:var(--text);max-width:34ch}
/* Figures in a case study. A pair sits side by side; the default pair is
   weighted so a landscape and a 3:4 portrait come out the same height. */
.prose figure,.case-figure{margin:30px 0}
.prose figure img,.case-figure img{width:100%;border:1px solid var(--line)}
.prose figcaption,.case-figure figcaption{
  font-family:var(--label);font-size:11.5px;color:var(--faint);margin-top:10px;line-height:1.5;
}
.case-figure{max-width:var(--page);margin:0 auto 34px;padding:0 var(--gutter)}
/* Lead image cropped to 16:9 so it does not fill the first screen; the crop
   sits low to keep the subject (screens, desk) and lose ceiling. */
.case-figure img{aspect-ratio:16/9;object-fit:cover;object-position:50% 70%}
.fig-pair{display:grid;grid-template-columns:2.37fr 1fr;gap:18px;margin:30px 0;align-items:start}
.fig-pair figure{margin:0}
.fig-pair-even{grid-template-columns:1fr 1fr}
@media (max-width:760px){.fig-pair{grid-template-columns:1fr}}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:2px 6px;color:var(--text)}

/* ---------- cta ---------- */
.cta{border-top:1px solid var(--line);background:var(--surface)}
.cta-inner{max-width:var(--page);margin:0 auto;padding:56px var(--gutter)}
.cta p{color:var(--dim)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:0}
.foot-inner{
  max-width:var(--page);margin:0 auto;padding:48px var(--gutter) 32px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;
}
.foot-brand{display:flex;gap:18px;align-items:center}
.foot-brand .logo-mark{width:76px}
.foot-brand .brand-text b{font-size:24px}
.foot-brand .brand-text i{font-size:14.5px}
.foot-links{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-links a{
  font-family:var(--label);font-size:12.5px;color:var(--dim);text-decoration:none;
}
.foot-links a:hover{color:var(--accent)}
.foot-legal{
  max-width:var(--page);margin:0 auto;padding:0 var(--gutter) 40px;
  font-family:var(--label);font-size:11.5px;color:var(--faint);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero,.service,.report-teaser,.foot-inner{grid-template-columns:1fr}
  .service-flip figure{order:0}
  .pillar{grid-template-columns:1fr}
  .pillar img{max-width:420px}
}
@media (max-width:560px){
  body{font-size:16px}
  .site-head{padding-bottom:16px}
  .site-nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------- listings ---------- */
.listing{max-width:var(--page);margin:0 auto;padding:48px var(--gutter) 8px}
.card{
  display:grid;grid-template-columns:320px 1fr;gap:clamp(20px,3.5vw,40px);
  align-items:start;padding:32px 0;border-bottom:1px solid var(--line-soft);
}
.card:first-child{border-top:1px solid var(--line)}
.card figure{margin:0}
.card img{border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.card-body h2{font-size:26px}
.card-body p{max-width:56ch}
.card-figures{
  display:flex;flex-wrap:wrap;gap:0 28px;list-style:none;padding:0;margin:0 0 18px;
}
.card-figures li{font-family:var(--label);font-size:12px;color:var(--faint);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.card-figures b{
  display:block;font-family:var(--display);font-size:22px;color:var(--text);
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}

/* ---------- contact ---------- */
.contact{
  max-width:var(--page);margin:0 auto;padding:48px var(--gutter);
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,64px);align-items:start;
}
.contact-form{display:flex;flex-direction:column;gap:18px;max-width:540px}
.contact-form label{
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.contact-form input,.contact-form textarea{
  font-family:var(--body);font-size:16px;color:var(--text);
  background:var(--surface);border:1px solid var(--line);padding:11px 13px;
  text-transform:none;letter-spacing:0;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.contact-form button{align-self:flex-start;cursor:pointer;font-family:var(--label)}
.form-note{
  font-family:var(--label);font-size:12px;line-height:1.6;color:var(--warn);
  border-left:2px solid var(--warn);padding-left:14px;margin:0;max-width:none;
}
.contact-aside{display:flex;flex-direction:column;gap:26px}
.contact-block p{margin:0;color:var(--dim)}

/* ---------- field report ---------- */
.report{max-width:var(--page);margin:0 auto}
.report-head{padding:56px var(--gutter) 28px}
.report-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0 0;
}
.report-meta > div{background:var(--surface);padding:16px 18px}
.report-meta dt{
  font-family:var(--label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.report-meta dd{
  margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;
}
.report-hero{margin:0 var(--gutter) 8px}
.report-hero img{border:1px solid var(--line);width:100%}
.report-hero figcaption{font-family:var(--label);font-size:11.5px;color:var(--faint);margin-top:10px}
.kit{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:38px 0;
}
.kit-col{background:var(--surface);padding:24px var(--gutter)}
.kit-col ul{margin:0;padding-left:18px;color:var(--dim)}
.kit-col li{margin-bottom:8px}
.kit-col li::marker{color:var(--aqua)}
.pending{
  border:1px solid var(--line);border-left:2px solid var(--warn);background:var(--surface);
  padding:22px 24px;margin:8px var(--gutter) 40px;
}
.pending p{margin:0;color:var(--dim)}

@media (max-width:900px){
  .card,.contact{grid-template-columns:1fr}
  .card img{max-width:420px}
}

/* ---------- legal pages ---------- */
.review-note{
  max-width:var(--page);margin:0 auto 8px;padding:16px var(--gutter);
  font-family:var(--label);font-size:12.5px;line-height:1.6;color:var(--warn);
  border-left:2px solid var(--warn);background:var(--surface);
}
.prose table{
  width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;
  border:1px solid var(--line);background:var(--surface);
}
.prose th{
  font-family:var(--label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);text-align:left;font-weight:500;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.prose td{padding:11px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--dim)}
.prose tr:last-child td{border-bottom:none}
.form-privacy{
  font-family:var(--label);font-size:11.5px;line-height:1.6;color:var(--faint);margin:0;max-width:46ch;
}

/* ---------- prototype only: pages not yet built ---------- */
.todo{
  font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px dotted var(--line);padding:4px 0;cursor:default;
}
.foot-links .todo{text-transform:none;letter-spacing:0;border:0}

/* ---------- field report status message ---------- */
.ft-status{
  max-width:var(--page);margin:0 auto;padding:16px var(--gutter);
  font-family:var(--label);font-size:13px;line-height:1.6;color:var(--warn);
  border-left:2px solid var(--warn);background:var(--surface);
}

/* ---------- pillar standfirst and proof line ---------- */
.pillar-standfirst{
  font-family:var(--display);font-weight:500;font-size:18px;line-height:1.35;
  letter-spacing:-.008em;color:var(--text);max-width:44ch;margin-bottom:14px;
}
.pillar-proof{
  border-left:2px solid var(--eyebrow-colour,var(--accent));padding-left:16px;
  font-size:15.5px;color:var(--dim);max-width:54ch;
}

/* ---------- services: worked-example sub-section ---------- */
.service-sub{background:var(--surface)}
.service-sub-inner{
  max-width:var(--page);margin:0 auto;padding:44px var(--gutter);
  border-left:2px solid var(--panel-colour,var(--accent));
}
.service-sub-inner h3{font-size:21px;margin-bottom:14px}
.service-sub-inner p{color:var(--dim)}
.sub-points{max-width:var(--measure);padding-left:18px;margin:0 0 20px;color:var(--dim)}
.sub-points li{margin-bottom:8px}
.sub-points li::marker{color:var(--panel-colour,var(--accent))}

/* ---------- contact prompts ---------- */
.prompts{max-width:var(--page);margin:0 auto;padding:36px var(--gutter) 4px}
.prompts ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  list-style:none;margin:0;padding:0;max-width:none;
}
.prompts li{
  background:var(--surface);padding:22px 22px 22px 20px;margin:0;
  font-family:var(--display);font-weight:500;font-size:17px;line-height:1.35;
  letter-spacing:-.008em;border-left:2px solid var(--accent);
}
.prompts li:nth-child(2){border-left-color:var(--good)}
.prompts li:nth-child(3){border-left-color:var(--warn)}

/* ---------- team ---------- */
.team{background:var(--surface)}
.team-inner{max-width:var(--page);margin:0 auto;padding:44px var(--gutter)}
.team-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px clamp(24px,4vw,48px);margin:26px 0 8px;
}
.person{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start}
.person img{
  width:132px;height:132px;object-fit:cover;
  border:1px solid var(--line);
}
.person h3{font-size:20px;margin-bottom:4px}
.person-role{
  font-family:var(--label);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.person-body p{color:var(--dim);font-size:15.5px;max-width:44ch;margin-bottom:0}
.team-note{
  border-left:2px solid var(--warn);padding-left:16px;margin-top:30px;
  color:var(--text);max-width:56ch;
}
@media (max-width:480px){
  .person{grid-template-columns:1fr;gap:14px}
}

/* ---------- cookie consent ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -12px 32px rgba(0,0,0,.45);
}
.consent[hidden]{display:none}
.consent-inner{
  max-width:var(--page);margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.consent-text{
  margin:0;font-size:14.5px;line-height:1.5;color:var(--dim);max-width:72ch;
}
.consent-actions{display:flex;gap:12px;flex:none}
.consent .btn{padding:10px 20px;cursor:pointer;font-size:12.5px}
@media (max-width:560px){
  .consent-inner{gap:14px}
  .consent-actions{width:100%}
  .consent .btn{flex:1;text-align:center}
}