/* ==============================================================
   EDITORIAL STYLE — Instrument Serif for display type, Inter for everything functional.
   Everything lives under `html.editorial`: remove that class from <html> to get the previous look back.
   Rules: serif only at 28px and up, one italic accent word per heading, no decorative lines or circles.
   ============================================================== */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-normal.woff2) format("woff2");}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2");}






/* ---- serif roles ---- */
.editorial .brand,.editorial .footer-brand{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;}
.editorial .brand{font-size:38px;line-height:1;}
.editorial .footer-brand{font-size:var(--sf-md);line-height:var(--sf-md-lh);}
.editorial .section-heading-line h2,
.editorial .contact-section .section-heading-line h2{font-family:var(--serif);font-weight:400;font-size:var(--sf-h2);line-height:var(--sf-h2-lh);letter-spacing:var(--sf-ls);}
.editorial .intro-statement,.editorial .intro-statement span{font-family:var(--serif);font-weight:400;font-size:var(--sf-statement);line-height:var(--sf-statement-lh);letter-spacing:var(--sf-ls);}
.editorial .manifesto-big,.editorial .manifesto-big span,.editorial .manifesto-big em{font-family:var(--serif);font-weight:400;font-size:calc(var(--sf-h2) * 1.3);line-height:1.02;letter-spacing:var(--sf-ls);}
.editorial .contact-email{font-family:var(--serif);font-weight:400;font-size:calc(var(--sf-h2) * 1.25);line-height:1.02;letter-spacing:var(--sf-ls);}
.editorial .services-feature h3{font-family:var(--serif);font-weight:400;font-size:var(--sf-title);line-height:var(--sf-title-lh);letter-spacing:var(--sf-ls);}
.editorial .project-name{font-family:var(--serif);font-weight:400;font-size:var(--sf-title);line-height:var(--sf-title-lh);letter-spacing:var(--sf-ls);}
.editorial .pricing-card h3,.editorial .step h3,.editorial .service-row h3{font-family:var(--serif);font-weight:400;font-size:var(--sf-md);line-height:var(--sf-md-lh);letter-spacing:var(--sf-ls);}
.editorial .intro-numbers strong{font-family:var(--serif);font-weight:400;font-size:var(--sf-title);line-height:var(--sf-stat-lh);letter-spacing:-.05em;}
.editorial .pricing-card strong{font-family:var(--serif);font-weight:400;font-size:var(--sf-md);line-height:var(--sf-md-lh);letter-spacing:var(--sf-ls);}
.editorial .tk-text b{font-family:var(--serif);font-weight:400;font-size:var(--sf-name);line-height:var(--sf-name-lh);letter-spacing:var(--sf-ls);}
.editorial .loader-mark{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(48px,6vw,88px);}

/* ---- wordmarks ---- */
.editorial .mega-wordmark{font-family:var(--serif);font-weight:400;letter-spacing:0;font-size:clamp(72px,19vw,400px);line-height:.95;}
@media(max-width:700px){.editorial .mega-wordmark{font-size:18.1vw;}}
.editorial .footer-giant{font-family:var(--serif);font-weight:400;letter-spacing:0;font-size:clamp(64px,18.5vw,400px);line-height:.95;}
@media(max-width:700px){.editorial .footer-giant{font-size:17.9vw;}}

/* ---- the one italic accent word per heading ---- */
.editorial em,.editorial em.accent{font-family:var(--serif);font-style:italic;font-weight:400;}
.editorial .project-name sup{font-family:"Inter","Inter Display",sans-serif;font-style:normal;}

/* ---- warm paper instead of pure white ---- */


/* ---- intro: text | photo | results in one row ---- */
.editorial .intro-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:var(--head-gap);}
.editorial .intro-copy{align-self:start;max-width:275px;}
.editorial .intro-photo{width:100%;max-width:360px;height:auto;aspect-ratio:3/4;margin-top:0;justify-self:center;}
.editorial .intro-side{align-self:start;}
@media(max-width:1000px){
  .editorial .intro-lower{grid-template-columns:minmax(0,1fr) minmax(200px,320px);}
  .editorial .intro-side{grid-column:1 / -1;}
}
@media(max-width:700px){
  .editorial .intro-lower{grid-template-columns:1fr;}
  .editorial .intro-copy{max-width:none;}
  .editorial .intro-photo{max-width:none;aspect-ratio:4/3;}
}

/* ============================================================
   Toolkit: label, big serif headline with italic second line, note on the right, six columns below.
   No decorative lines or circles.
   ============================================================ */
.editorial .toolkit-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow eyebrow" "title note";column-gap:40px;row-gap:clamp(20px,2.4vw,36px);align-items:start;margin-top:clamp(96px,11vw,170px);margin-bottom:clamp(44px,5.5vw,88px);}
.editorial .toolkit-head .eyebrow{grid-area:eyebrow;}
.editorial .toolkit-title{grid-area:title;margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(52px,8.6vw,150px);line-height:.96;letter-spacing:-.018em;}
.editorial .toolkit-note{grid-area:note;margin:.35em 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,36px);line-height:1.1;letter-spacing:-.005em;color:#6b6b6b;text-align:left;}
@media(max-width:900px){
  .editorial .toolkit-head{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "note";}
  .editorial .toolkit-title{font-size:clamp(46px,12.5vw,90px);}
  .editorial .toolkit-note{margin-top:0;}
}
/* columns: number, logo, name, role stacked on the left */
.editorial .tk{gap:44px;min-height:230px;padding-top:0;}
.editorial .tk-top{flex-direction:column;align-items:flex-start;gap:22px;}
.editorial .tk-index{font-size:13px;letter-spacing:.12em;}
.editorial .toolkit .tool-logo{width:36px;height:36px;}

/* short dash between the number and the logo */
.editorial .tk-index::after{content:"";display:block;width:28px;height:1px;background:#c4c4c1;margin-top:16px;transition:background .3s;}
.editorial .tk:hover .tk-index::after{background:var(--brand,#0a0a0a);}

/* ---- hero: the image runs to the bottom of the screen with the same whitespace as at the sides (height: --hero-h in tokens.css).
   Inside the image every side has the same padding, --hero-pad: time (top left), tagline + button (top right), wordmark (bottom, filling the width).
   The wordmark size comes from the image width (container units), its box is shifted by the letters' side bearing and baseline offset
   (measured for BOONS.DESIGN: ink 5.359em wide, starts .019em in, baseline .137em above the bottom of the box), so the LETTERS sit on the padding. ---- */
.editorial .hero-shot{container-type:inline-size;}
.editorial .hero-shot .hero-meta-top{top:var(--hero-pad);left:var(--hero-pad);right:var(--hero-pad);align-items:flex-start;}
.editorial .hero-shot .mega-wordmark{position:absolute;z-index:3;left:calc(var(--hero-pad) - .019em);right:auto;bottom:calc(var(--hero-pad) - .137em);width:max-content;padding:0;color:var(--white);font-size:var(--hero-wordmark-size);}
.editorial .hero-shot .mega-wordmark .particle-wordmark-copy{color:var(--white);}
.editorial .hero-shot .hero-tagline{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.4vw,24px);margin-left:auto;max-width:min(440px,38cqw);}
.editorial .hero-shot .hero-tagline .hero-positioning{margin:0!important;max-width:100%!important;font-family:var(--body);font-size:var(--fs-text)!important;line-height:var(--lh-text)!important;letter-spacing:var(--ls-text)!important;font-weight:400!important;text-align:left!important;text-shadow:none;}
@media(max-width:700px){
  .editorial .hero-shot .hero-tagline{margin-left:0;max-width:100%;}
}

/* ============================================================
   Calm sections (03)-(09): match the intro and the toolkit.
   Paper only, one hairline above each section, no filled boxes, no circles.
   ============================================================ */
.editorial .section-heading-line{border-bottom:0;align-items:start;row-gap:0;}
.editorial .section-heading-line p{align-self:start;}

/* approach: no grey band, no decorative grid or circles */
.editorial .flow-section{background:none;}
.editorial .workflow-grid,.editorial .workflow-orbit{display:none;}
.editorial .workflow-visual{background:var(--surface);color:var(--ink);}
.editorial .workflow-visual .workflow-chip{background:var(--paper);color:var(--ink);box-shadow:none;border:1px solid var(--line);}

/* pricing: three open columns like the toolkit tiles, no fills */
.editorial .pricing-card,.editorial .pricing-card.is-dark{background:none;color:var(--ink);border-radius:0;min-height:0;padding:20px 0 0;border-top:1px solid var(--line);}
.editorial .pricing-card.is-dark p{color:var(--muted);}
.editorial .pricing-card ul{border-top:0;padding-top:0;}
.editorial .workflow-visual::before{display:none;}
.editorial .work-section>.section-heading-line{border-top:1px solid var(--line);}
@media(min-width:1000px){
  /* the philosophy statement starts on column 5 like every other headline */
  .editorial .manifesto-big{text-align:left;margin-left:0;margin-right:0;max-width:none;padding-left:calc(4 * (var(--col) + var(--gutter)));}
}
/* the workflow picture repeated the toolkit; the four steps carry the content. Remove this rule to bring it back. */
.editorial .workflow-visual{display:none;}
.editorial .flow-section .steps{margin-top:clamp(40px,4vw,64px);}

/* services (05): photo on columns 1-5, one empty column, rows on columns 7-12 (set in grid.css) */
@media(min-width:1000px){
  .editorial .services-feature-picture{height:auto;aspect-ratio:4/3;}
  .editorial .service-row{padding:clamp(28px,2.6vw,44px) 0;grid-template-columns:clamp(40px,4.4vw,84px) 1fr 25px;}
}
.editorial .services-feature-label{display:none;}
.editorial .services-feature h3{margin-top:clamp(24px,2.4vw,40px);}

/* the toolkit now sits at the end of the approach section, as "the tools behind the steps" */
.editorial .flow-section .toolkit-head{margin-top:clamp(72px,8vw,140px);}
.editorial .flow-section .toolkit{margin-top:clamp(28px,3vw,48px);}
/* inside the approach section the toolkit headline is a sub-heading: same size as the section headlines */
.editorial .flow-section .toolkit-title{font-size:var(--sf-h2);line-height:var(--sf-h2-lh);}

/* ============================================================
   Story: six sections. Approach is the one dark section; pricing sits under services.
   ============================================================ */
.editorial .offer{margin-top:clamp(72px,8vw,140px);}
.editorial .offer .section-heading-line h2,
.editorial .flow-section .toolkit-title{font-size:var(--sf-title);line-height:var(--sf-title-lh);}

/* approach: dark */
.editorial .flow-section{background:var(--dark);color:var(--white);}
.editorial .flow-section .section-heading-line{border-top-color:var(--white-20);}
.editorial .flow-section :is(.eyebrow,h2,h3,.toolkit-title,.tk-text b){color:var(--white);}
.editorial .flow-section :is(.section-heading-line p,.step p,.step-num,.toolkit-note,.tk-text small,.tk-index){color:var(--muted-on-dark);}
.editorial .flow-section .step{border-top-color:var(--white-20);}
.editorial .flow-section .toolkit .tool-logo::before{background:var(--white);}
.editorial .flow-section .tk:hover .tool-logo::before{background:var(--brand,var(--red));}
.editorial .flow-section .tk:hover .tk-index{color:var(--white);}
.editorial .flow-section .tk-index::after{background:var(--white-20);}
.editorial .flow-section .tk:hover .tk-index::after{background:var(--brand,var(--red));}

/* service rows are buttons: the whole row is the click target */
.editorial .service-row{position:relative;}
.editorial .sheet-trigger{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;color:inherit;}
.editorial .sheet-trigger::after{content:"";position:absolute;inset:0;}
.editorial .sheet-trigger:focus-visible::after{outline:2px solid var(--red);outline-offset:-2px;}

/* side sheet */
.sheet{position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;width:min(560px,100vw);max-width:none;height:100dvh;max-height:none;overflow:hidden;background:var(--paper);color:var(--ink);transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.sheet.is-open{transform:none;}
.sheet::backdrop{background:var(--scrim);opacity:0;transition:opacity .4s;}
.sheet.is-open::backdrop{opacity:1;}
html.sheet-open{overflow:hidden;}
.sheet-panel{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:clamp(20px,2.4vw,40px);display:flex;flex-direction:column;}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(40px,6vw,96px);}
.sheet-kicker{font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);font-weight:500;color:var(--muted);}
.sheet-close,.sheet-next{all:unset;cursor:pointer;box-sizing:border-box;font-family:var(--body);font-size:var(--fs-btn);font-weight:500;line-height:1;padding:12px 18px;border:1px solid var(--line);border-radius:50px;transition:border-color .25s,color .25s;}
.sheet-close:hover,.sheet-next:hover{border-color:var(--ink);}
.sheet-close:focus-visible,.sheet-next:focus-visible,.sheet-title:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.sheet-title{margin:0 0 clamp(16px,1.6vw,24px);font-family:var(--serif);font-weight:400;font-size:var(--sf-md);line-height:var(--sf-md-lh);letter-spacing:var(--sf-ls);}
.sheet-lead{margin:0 0 clamp(24px,2.6vw,40px);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.sheet-body h3{margin:0;padding-top:16px;border-top:1px solid var(--line);font-family:var(--body);font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);font-weight:500;text-transform:uppercase;color:var(--muted);}
.sheet-body h3 + p{margin:12px 0 clamp(24px,2.6vw,40px);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.sheet-body ul{margin:12px 0 clamp(24px,2.6vw,40px);padding-left:18px;}
.sheet-body li{margin:6px 0;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.sheet-note{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);}
.sheet-foot{margin-top:auto;padding-top:clamp(24px,3vw,48px);}
.sheet-foot [hidden]{display:none;}
@media(prefers-reduced-motion:reduce){.sheet,.sheet::backdrop{transition:none;}.sheet{transform:none;}}

/* copy additions: who a package is for, what you get from a step (visible without opening the sheet) */
.editorial .pricing-card .card-fit{margin-top:12px;color:var(--ink);font-weight:500;}
.editorial .step .step-get{margin-top:12px;color:var(--ink);font-weight:500;}
.editorial .flow-section .step .step-get{color:var(--white);}

/* language switch (EN | NL) next to the booking button in the header */
.editorial .header-actions{justify-self:end;display:flex;align-items:center;gap:clamp(12px,1.4vw,24px);}
.editorial .lang-switch{display:flex;align-items:center;gap:2px;font-size:var(--fs-meta);line-height:1;letter-spacing:var(--ls-meta);font-weight:500;}
.editorial .lang-switch a{padding:8px 8px;border-radius:999px;color:var(--muted);transition:color .2s;}
.editorial .lang-switch a:hover{color:var(--ink);}
.editorial .lang-switch a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.editorial .lang-switch a:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
@media(max-width:700px){.editorial .header-actions{gap:6px;}.editorial .lang-switch a{padding:8px 6px;}}
/* the header button has a short label on phones, so the switch and the wordmark fit (also in Dutch) */
.editorial .nav-book-call .btn-short{display:none;}
@media(max-width:700px){
  .editorial .nav-book-call .btn-full,.editorial .nav-book-call > span[aria-hidden="true"]:last-child{display:none;}
  .editorial .nav-book-call .btn-short{display:inline;}
}
@media(max-width:380px){
  .editorial .header-actions{gap:2px;}
  .editorial .header-actions .nav-book-call{padding:0 12px;}
  .editorial .lang-switch a{padding:8px 4px;}
}
@media(max-width:420px){.editorial .brand{font-size:var(--fs-brand-narrow);}.editorial .site-header{column-gap:8px;}}
@media(max-width:340px){.editorial .brand{font-size:var(--fs-brand-narrower);}}

/* ============================================================
   Design from Figma (boons.design): header, hero buttons, services picture, approach panel with tools, contact CTA, footer.
   ============================================================ */
/* header: wordmark left, navigation right, language switch after it; the booking button only where the navigation is hidden */
.editorial .site-header{grid-template-columns:auto 1fr auto;}
.editorial .nav-primary{justify-self:end;}
.editorial .header-actions .nav-book-call{display:none;}
@media(max-width:1050px){.editorial .site-header{grid-template-columns:1fr auto;}.editorial .header-actions .nav-book-call{display:inline-flex;}}

/* hero: tagline and two buttons top left, time top right */
.editorial .hero-shot .hero-tagline{margin-left:0;max-width:min(560px,48cqw);}
.editorial .hero-shot .hero-tagline .hero-positioning{font-size:calc(var(--fs-text) * 1.35)!important;line-height:1.28!important;letter-spacing:var(--ls-text)!important;}
.editorial .hero-shot .hero-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(16px,1.6vw,28px);}
.editorial .hero-shot .hero-buttons .hero-cta-pill{min-height:41px;padding:0 16px;font-size:var(--fs-btn);gap:10px;}
.editorial .hero-cta-pill--outline{background:transparent;color:var(--white);border:1px solid var(--white);}
.editorial .hero-cta-pill--outline:hover{background:var(--white);color:var(--ink);}
.editorial .hero-shot .hero-local-time{margin-left:auto;}
@media(max-width:700px){
  .editorial .hero-shot .hero-tagline{max-width:100%;}
  .editorial .hero-shot .hero-local-time{order:-1;margin-left:0;}
}

/* services: tall picture with the caption on it */
.editorial .services-feature-picture{height:auto;aspect-ratio:437/680;}
.editorial .services-feature-picture::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--scrim),transparent 45%);pointer-events:none;}
.editorial .services-feature-picture h3{position:absolute;z-index:1;left:clamp(16px,1.8vw,28px);bottom:clamp(16px,1.8vw,28px);margin:0;color:var(--white);}
@media(max-width:999px){.editorial .services-feature-picture{aspect-ratio:4/3;}}

/* approach: an inset rounded panel, solid near-black */
.editorial .flow-section{margin:0 var(--hero-gutter);border-radius:var(--radius);background:var(--night);overflow:hidden;}
.editorial .tools-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;margin-top:clamp(72px,8vw,140px);}
.editorial .tools-text{grid-column:1 / span 5;}
.editorial .tools-title{margin:0 0 20px;font-family:var(--serif);font-weight:400;font-size:var(--sf-title);line-height:var(--sf-title-lh);letter-spacing:var(--sf-ls);color:var(--white);}
.editorial .tools-text p{margin:0;max-width:340px;color:var(--white);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.editorial .tools-grid{grid-column:7 / span 6;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.6vw,24px) clamp(10px,1.1vw,16px);}
.editorial .tools-item{display:flex;flex-direction:column;align-items:center;gap:10px;}
.editorial .tools-tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border:1px solid var(--white-20);border-radius:12px;background:var(--scrim);}
.editorial .tools-tile img{width:42%;height:auto;}
.editorial .tools-name{font-size:var(--fs-tiny);line-height:var(--lh-tiny);color:var(--muted-on-dark);}
@media(max-width:999px){.editorial .tools-text,.editorial .tools-grid{grid-column:1 / -1;}.editorial .tools-grid{margin-top:32px;}}

/* contact: closing call to action under the headline */
.editorial .contact-cta{margin-top:clamp(20px,2vw,32px);}
@media(min-width:1000px){.editorial .contact-cta{margin-left:calc(6 * (var(--col) + var(--gutter)));}}

/* footer: tagline, navigation (column 7), contact (column 9), black wordmark across the width */
.editorial .footer{container-type:inline-size;}
.editorial .footer-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;}
.editorial .footer-top > .footer-tag{grid-column:1 / span 5;margin:0;font:400 calc(var(--fs-text) * 1.25)/1.3 var(--body);letter-spacing:var(--ls-text);}
.editorial .footer-top > .footer-nav{grid-column:7 / span 2;justify-self:start;display:flex;flex-direction:column;gap:19px;font-size:var(--fs-text);}
.editorial .footer-top > .footer-nav a{border:0;padding:0;}
.editorial .footer-top > .footer-contact{grid-column:9 / span 4;display:flex;flex-direction:column;gap:19px;font-size:var(--fs-text);}
.editorial .footer-giant{margin:clamp(48px,6vw,96px) 0 0;color:var(--ink);font-size:var(--footer-wordmark-size);line-height:.95;white-space:nowrap;overflow:visible;}
.editorial .footer-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);border-top:0;padding-top:clamp(24px,3vw,48px);font-size:var(--fs-meta);letter-spacing:var(--ls-meta);}
.editorial .footer-bottom > :nth-child(1){grid-column:1 / span 6;}
.editorial .footer-bottom > :nth-child(2){grid-column:7 / span 2;}
.editorial .footer-bottom > :nth-child(3){grid-column:9 / span 4;}
@media(max-width:999px){
  .editorial .footer-top > .footer-tag{grid-column:1 / -1;}
  .editorial .footer-top > .footer-nav{grid-column:1 / span 6;}
  .editorial .footer-top > .footer-contact{grid-column:7 / -1;}
  .editorial .footer-bottom > :nth-child(1){grid-column:1 / -1;margin-bottom:12px;}
  .editorial .footer-bottom > :nth-child(2){grid-column:1 / span 6;}
  .editorial .footer-bottom > :nth-child(3){grid-column:7 / -1;}
}

.editorial .footer-giant .brand-accent{color:var(--red);}
.editorial .contact-pill{display:inline-flex;align-items:center;gap:10px;min-height:41px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--white);font-family:var(--body);font-size:var(--fs-btn);font-weight:600;letter-spacing:var(--ls-btn);text-decoration:none;width:auto;}
.editorial .contact-pill:hover{background:var(--red);}
/* approach: secondary text must stay readable over the bright part of the artwork */
.editorial .flow-section :is(.section-heading-line p,.step p,.step-num,.tools-name){color:var(--white-70);}
.editorial .flow-section .step .step-get,.editorial .flow-section .tools-text p{color:var(--white);}

/* contact form in the contact sheet */
.editorial .contact-form{display:grid;gap:18px;}
.editorial .contact-field{display:grid;gap:8px;}
.editorial .contact-field label{font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);font-weight:500;}
.editorial .contact-field :is(input,textarea){width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);}
.editorial .contact-field textarea{min-height:140px;resize:vertical;}
.editorial .contact-field :is(input,textarea):focus-visible{outline:2px solid var(--red);outline-offset:2px;border-color:var(--ink);}
.editorial .contact-field :is(input,textarea)::placeholder{color:var(--muted);}
.editorial .contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.editorial .contact-privacy,.editorial .contact-alt{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);color:var(--muted);}
.editorial .contact-privacy a,.editorial .contact-alt a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.editorial .contact-submit{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:var(--white);font-family:var(--body);font-size:var(--fs-btn);font-weight:600;letter-spacing:var(--ls-btn);cursor:pointer;transition:background .2s;}
.editorial .contact-submit:hover{background:var(--red);}
.editorial .contact-submit:disabled{opacity:.6;cursor:progress;}
.editorial .contact-submit:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.editorial .contact-status{margin:0;min-height:1.5em;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);}
.editorial .contact-status[data-state="error"]{padding-left:12px;border-left:2px solid var(--red);}
.editorial .contact-alt{margin-top:clamp(20px,2.4vw,32px);}


/* ============================================================
   Figma match: spacing, services hover, approach, tools, pricing, FAQ, contact, footer and the project cards.
   Values come from the Figma export (150px between blocks, 100px under a section head, 25px gutter).
   ============================================================ */
.editorial .services-layout,.editorial .pricing-grid{margin-top:var(--head-gap);}
.editorial .work-section .projects{margin-top:var(--block-gap);}

/* ---- intro: three results in a row under the text and photo ---- */
.editorial .intro-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;}
.editorial .intro-numbers small{margin-top:12px;line-height:1.5;}
@media(max-width:700px){.editorial .intro-numbers{grid-template-columns:1fr;row-gap:24px;}}

/* ---- services: picture with a gradient on its lower 55%, rows with an orange hover that fades in from the bottom ---- */
.editorial .services-feature-picture{border-radius:12px;}
.editorial .services-feature-picture::after{inset:45% 0 0;background:linear-gradient(180deg,transparent,var(--scrim-strong));}
.editorial .services-feature-picture h3{left:20px;bottom:20px;}
.editorial .service-row{isolation:isolate;border-bottom:0;border-top:1px solid var(--line);min-height:170px;padding:32px 0;column-gap:var(--gutter);}
@media(min-width:1000px){.editorial .service-row{grid-template-columns:clamp(48px,6.3vw,91px) minmax(0,1fr) 24px;}}
.editorial .service-row::before{content:"";position:absolute;z-index:-1;inset:-1px 0 0;border-radius:8px;background:var(--highlight);opacity:0;clip-path:inset(100% 0 0 0 round 8px);transition:clip-path .55s cubic-bezier(.2,.7,.2,1),opacity .55s cubic-bezier(.2,.7,.2,1);}
.editorial .service-row > span:first-child,.editorial .service-row .plus{transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.editorial .service-row p{transition:color .35s;}
.editorial .service-row,.editorial .service-row + .service-row{transition:border-color .3s;}
.editorial .service-row:has(.sheet-trigger:focus-visible)::before{opacity:1;clip-path:inset(0 round 8px);}
.editorial .service-row:has(.sheet-trigger:focus-visible),.editorial .service-row:has(.sheet-trigger:focus-visible) + .service-row{border-top-color:transparent;}
.editorial .service-row:has(.sheet-trigger:focus-visible) p{color:var(--ink);}
.editorial .service-row:has(.sheet-trigger:focus-visible) > span:first-child{transform:translateX(20px);}
.editorial .service-row:has(.sheet-trigger:focus-visible) .plus{transform:translateX(-20px);}
@media(hover:hover){
  .editorial .service-row:hover::before{opacity:1;clip-path:inset(0 round 8px);}
  .editorial .service-row:hover,.editorial .service-row:hover + .service-row{border-top-color:transparent;}
  .editorial .service-row:hover p{color:var(--ink);}
  .editorial .service-row:hover > span:first-child{transform:translateX(20px);}
  .editorial .service-row:hover .plus{transform:translateX(-20px);color:inherit;}
}
@media(prefers-reduced-motion:reduce){.editorial .service-row::before,.editorial .service-row > span:first-child,.editorial .service-row .plus,.editorial .service-row p{transition:none;}}

/* ---- approach: content on the page margin, no hairline above the steps ---- */
.editorial .flow-section{padding-inline:calc(var(--margin) - var(--hero-gutter));}
.editorial .flow-section .steps{margin-top:var(--block-gap);}
.editorial .flow-section .step{border-top:0;padding-top:0;}
.editorial .step .step-num{display:block;line-height:38px;}
.editorial .flow-section .step h3{margin:20px 0 0;}
.editorial .flow-section .step p:not(.step-get){margin:30px 0 0;max-width:208px;}
.editorial .flow-section .step .step-get{margin-top:21px;}
.editorial .tools-block{margin-top:var(--block-gap);}
.editorial .tools-text p{margin-top:22px;max-width:321px;}
.editorial .tools-title{margin:0;}
/* tools: every tile is one grid column wide, the logo is 40px */
.editorial .tools-grid{grid-column:7 / span 5;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px var(--gutter);}
.editorial .tools-tile img{width:min(40px,58%);height:auto;aspect-ratio:1;object-fit:contain;}
.editorial .tools-name{font-size:var(--fs-pill);line-height:var(--lh-pill);}
@media(max-width:999px){.editorial .tools-grid{grid-column:1 / -1;gap:24px var(--gutter);}}
@media(max-width:700px){.editorial .tools-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.editorial .tools-name{font-size:var(--fs-tiny);line-height:var(--lh-tiny);}}

/* ---- pricing: open cards with a picture, a ✓ list and a solid button ---- */
.editorial .pricing-card,.editorial .pricing-card.is-dark{padding:0;border-top:0;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;}   /* subgrid: text, picture, price, list and button line up across the three packages */
.editorial .pricing-image{display:block;width:100%;height:141px;object-fit:cover;object-position:center 35%;border-radius:12px;margin:var(--card-gap) 0;}
.editorial .pricing-card .card-number{line-height:38px;}
.editorial .pricing-card h3{margin:8px 0 0;}
.editorial .pricing-card p{margin:30px 0 0;max-width:206px;}
.editorial .pricing-card .card-fit{margin-top:21px;}
.editorial .pricing-card strong{margin:0;padding:0;min-height:50px;}
.editorial .pricing-card strong small{font-size:var(--fs-meta);line-height:var(--lh-meta);}
.editorial .pricing-card ul{margin:29px 0;}
.editorial .pricing-card li{margin:0 0 10px;line-height:21px;}
.editorial .pricing-card li::before{content:"✓";color:var(--red);}
.editorial .pricing-card .pill{width:auto;align-self:start;justify-self:start;justify-content:flex-start;gap:12px;min-height:41px;padding:0 16px;border:0;background:var(--ink);color:var(--white);}
.editorial .pricing-card .pill:hover{background:var(--red);color:var(--white);}

/* ---- FAQ: the open question shows a minus ---- */
.editorial .faq-list details{border-bottom:0;border-top:1px solid var(--line);}
.editorial .faq-list summary{padding:25px 0;}
.editorial .faq-list summary span{position:relative;width:26px;height:26px;border:0;border-radius:0;color:transparent;}
.editorial .faq-list summary span::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:var(--fs-link);transition:color .2s;}
.editorial .faq-list details[open] summary{padding-bottom:0;}
.editorial .faq-list details[open] summary span::before{color:var(--red);}
.editorial .faq-list details p{margin:25px 0 0;padding-bottom:25px;}

/* ---- contact and footer ---- */
.editorial .contact-cta{margin-top:50px;}
.editorial .contact-section .section-heading-line p{max-width:360px;}
.editorial .footer-top > .footer-tag{font:500 var(--fs-faq)/1.4 var(--body);}
.editorial .footer-top > .footer-nav{gap:20px;}

/* ---- project cards: the stack (sticky + scale in site.js) is untouched. Card at its pinned size (x1.2) = Figma: caption bar at the bottom,
   title left (58px x1.2 = 70px), type, line and button right. The card is 10 columns wide until it grows into 12. ---- */
.editorial .project-item{height:clamp(380px,calc((100svh - 110px) / 1.2),700px);}
.editorial .project-card{display:flex;flex-direction:column;justify-content:flex-end;border-radius:10px;}
.editorial .project-topline{margin:7px;padding:17px;min-height:100px;background:var(--glass);border:0;border-radius:8px;grid-template-columns:minmax(0,1fr) minmax(0,341px);grid-template-rows:auto auto auto;column-gap:var(--gutter);row-gap:0;align-items:end;}
.editorial .project-name{grid-column:1;grid-row:1 / span 3;align-self:end;margin:0;color:var(--white);}
.editorial .project-type{grid-column:2;grid-row:1;font-size:var(--fs-pill);line-height:var(--lh-pill);letter-spacing:var(--ls-pill);font-weight:400;}
.editorial .project-note{display:block;grid-column:2;grid-row:2;margin:6px 0 14px;font-size:var(--fs-pill);line-height:var(--lh-pill);letter-spacing:var(--ls-pill);}
.editorial .project-topline .pill{grid-column:2;grid-row:3;justify-self:start;margin-top:16px;}
.editorial .project-corner{top:14px;bottom:auto;left:14px;padding:5px 10px;border-radius:999px;background:var(--glass);opacity:1;backdrop-filter:blur(12px);}
@media(max-width:700px){
  .editorial .project-item{height:410px;}
  .editorial .project-topline{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding:14px;}
  .editorial .project-name{grid-row:1;grid-column:1;}
  .editorial .project-type{grid-column:1;grid-row:2;margin-top:6px;}
  .editorial .project-note{display:none;}
  .editorial .project-topline .pill{grid-column:1;grid-row:3;margin-top:12px;}
}

/* ---- approach: wide picture between the steps and the tools, caption bottom right ---- */
.editorial .approach-picture{position:relative;margin:var(--block-gap) 0 0;aspect-ratio:1168 / 687;border-radius:12px;overflow:hidden;}
.editorial .approach-picture img{display:block;width:100%;height:100%;object-fit:cover;}
.editorial .approach-picture figcaption{position:absolute;right:20px;bottom:20px;margin:0;color:var(--white);font-family:var(--serif);font-weight:400;font-size:var(--sf-title);line-height:var(--sf-title-lh);letter-spacing:var(--sf-ls);}
@media(max-width:999px){.editorial .approach-picture{aspect-ratio:4 / 3;}.editorial .approach-picture figcaption{right:16px;bottom:16px;}}

/* "Explore how we build": no underline, and clear of the last case card (pinned it is drawn 1.2 times larger than its box) */
.editorial .more-work{margin-top:var(--block-gap);}
.editorial .text-link{border-bottom:0;padding-bottom:0;}
.editorial .pricing-card.is-dark .card-fit{color:var(--ink);}

/* ---- contact (07): inset dark panel like the approach, white button ---- */
.editorial .contact-section{box-sizing:border-box;margin:50px var(--hero-gutter) 100px;padding:100px calc(var(--margin) - var(--hero-gutter));min-height:clamp(480px,47.7vw,687px);border-radius:var(--radius);background:var(--night);color:var(--white);}
.editorial .contact-section .section-heading-line{border-top:0;padding-top:0;}
.editorial .contact-section :is(.eyebrow,h2,.section-heading-line p){color:var(--white);}
.editorial .contact-pill{background:var(--white);color:var(--ink);}
.editorial .contact-pill:hover{background:var(--red);color:var(--white);}
/* footer wordmark: tight letter-spacing like the design (-0.05em, so the ink is 4.809em wide; the box is shifted by the left bearing) */
.editorial .footer-giant{letter-spacing:-.05em;margin-left:-.019em;}
@media(max-width:700px){.editorial .contact-section{padding-block:56px;min-height:0;margin-bottom:56px;}}

/* ============================================================
   Motion extras (assets/motion.js) and the menu
   ============================================================ */
/* staggered reveals: motion.js sets --rd per element and removes it after the first reveal */
body.js-ready [data-reveal]{transition-delay:var(--rd,0ms);}

/* diagonal arrow swap on buttons and links (motion.js wraps the arrow in two <i>) */
.editorial .arr{position:relative;display:inline-block;overflow:hidden;width:1em;height:1em;line-height:1;vertical-align:middle;}
.editorial .arr i{display:block;font-style:normal;line-height:1;text-align:center;transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.editorial .arr i + i{position:absolute;inset:0;transform:translate(-110%,110%);}
.editorial :is(a,button):is(:hover,:focus-visible) .arr i:first-child{transform:translate(110%,-110%);}
.editorial :is(a,button):is(:hover,:focus-visible) .arr i + i{transform:none;}

/* pictures drift while they scroll through the screen (scroll-driven animation; browsers without it simply show the picture) */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .editorial :is(.approach-picture,.services-feature-picture,.intro-photo) img{animation:picture-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
    @keyframes picture-drift{from{scale:1.18;}to{scale:1;}}
  }
}

/* ---- menu: square button top right (after scrolling; always on small screens) that opens a dark side sheet ---- */
.editorial .menu-button{position:fixed;z-index:40;top:var(--menu-inset);right:var(--menu-inset);width:var(--menu-size);height:var(--menu-size);display:grid;place-content:center;gap:7px;padding:0;border:0;border-radius:8px;background:var(--ink);color:var(--white);box-shadow:0 0 0 1px var(--white-20);cursor:pointer;opacity:0;visibility:hidden;transform:scale(.6);transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s,background .2s;}
.editorial.has-menu .menu-button{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
html.anim:not(.hero-full) .menu-button{visibility:hidden;}
.editorial .menu-button i{display:block;width:20px;height:1px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.editorial .menu-button:hover{background:var(--red);}
.editorial .menu-button:hover i:first-child{transform:translateX(3px);}
.editorial .menu-button:hover i:last-child{transform:translateX(-3px);}
.editorial .menu-button:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
@media(max-width:1050px){
  .editorial .menu-button{opacity:1;visibility:visible;transform:none;}
  .editorial .site-header{padding-right:calc(var(--menu-size) + 2 * var(--menu-inset));}
}
@media(max-width:700px){.editorial .header-actions .nav-book-call{display:none;}}

.menu-sheet{width:min(640px,100vw);background:var(--night);color:var(--white);}
.menu-sheet .sheet-panel{padding:clamp(24px,4vw,64px);padding-top:calc(var(--menu-size) + 2 * var(--menu-inset) + 24px);}
.menu-sheet .menu-close{position:absolute;z-index:2;top:var(--menu-inset);right:var(--menu-inset);width:var(--menu-size);height:var(--menu-size);display:grid;place-content:center;padding:0;border:0;border-radius:8px;background:var(--red);color:var(--white);transition:background .2s;}
.menu-sheet .menu-close:hover{background:var(--white);color:var(--ink);}
.menu-sheet .menu-close i{display:block;grid-area:1 / 1;width:20px;height:1px;background:currentColor;transform:rotate(45deg);}
.menu-sheet .menu-close i + i{transform:rotate(-45deg);}
.menu-sheet .menu-close:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.menu-label{margin:0 0 clamp(24px,3vw,40px);padding-bottom:16px;border-bottom:1px solid var(--white-20);font-size:var(--fs-tiny);line-height:var(--lh-tiny);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-on-dark);}
.menu-nav{display:flex;flex-direction:column;align-items:flex-start;}
.menu-nav a{position:relative;font-family:var(--serif);font-weight:400;font-size:var(--sf-title);line-height:1.2;letter-spacing:var(--sf-ls);color:var(--white);opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),color .2s;}
.menu-sheet.is-open .menu-nav a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 60ms + 200ms),calc(var(--i,0) * 60ms + 200ms),0s;}
.menu-nav a::before{content:"";position:absolute;left:calc(-1 * clamp(18px,2vw,28px));top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--white);transform:scale(0);transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.menu-nav a[aria-current="true"]::before,.menu-nav a:hover::before,.menu-nav a:focus-visible::before{transform:none;}
.menu-nav a:hover,.menu-nav a:focus-visible{font-style:italic;}
.menu-nav a:focus-visible,.menu-mail:focus-visible,.menu-cta:focus-visible{outline:2px solid var(--red);outline-offset:4px;}
.menu-foot{margin-top:clamp(40px,6vw,96px);display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.menu-foot .menu-label{align-self:stretch;margin-bottom:4px;}
.menu-cta{border:0;cursor:pointer;}
.menu-mail{color:var(--white);font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.menu-sheet .lang-switch a{color:var(--muted-on-dark);}
.menu-sheet .lang-switch a:hover,.menu-sheet .lang-switch a[aria-current="true"]{color:var(--white);}
@media(prefers-reduced-motion:reduce){.menu-nav a{opacity:1;transform:none;transition:none;}.editorial .menu-button{transition:none;}}

/* footer wordmark: same particle hover as the hero (assets/particle-text.js draws into a canvas inside this box) */
.editorial .footer-giant{position:relative;isolation:isolate;}


/* ============================================================
   Bo, the assistant: a pill at the bottom centre. Opening makes the sheet grow out of the pill (clip-path, as on designme.agency, own code);
   the header, conversation, input and note then fade up one after another. Appears after the first screen so it never covers the hero.
   ============================================================ */
.editorial .ask{--ease:cubic-bezier(.22,1,.36,1);--pw:9rem;--ph:3rem;--bo-ink:var(--wine);--bo-orange:var(--red);--bo-cream:var(--paper);position:fixed;left:50%;bottom:var(--ask-gap);transform:translateX(-50%);z-index:30;width:min(calc(100% - 2 * var(--hero-gutter)),var(--ask-w));height:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.editorial .ask.is-visible{opacity:1;visibility:visible;}
.editorial .ask-pill{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;height:3rem;padding:0 20px 0 8px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);color:var(--ink);font:500 var(--fs-text)/1 var(--body);letter-spacing:var(--ls-text);white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-float);transition:transform .3s var(--ease),opacity .12s linear;}
.editorial .ask-pill bo-avatar{width:34px;}
.editorial .ask-pill:hover{transform:translateX(-50%) translateY(-2px);}
.editorial .ask.is-open .ask-pill{opacity:0;pointer-events:none;}
.editorial .ask-sheet{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;height:min(46rem,calc(100dvh - 7rem));border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:var(--shadow-sheet);color:var(--ink);overflow:hidden;clip-path:inset(calc(100% - var(--ph)) calc((100% - var(--pw)) / 2) 0 calc((100% - var(--pw)) / 2) round 999px);opacity:0;visibility:hidden;pointer-events:none;transition:clip-path .45s var(--ease),opacity .15s linear .3s,visibility 0s .5s;}
.editorial .ask.is-open .ask-sheet{clip-path:inset(0 round 28px);opacity:1;visibility:visible;pointer-events:auto;transition:clip-path .55s var(--ease),opacity .12s linear,visibility 0s;}
.editorial .ask-in{opacity:0;transform:translateY(8px);transition:opacity .12s linear,transform .2s var(--ease);}
.editorial .ask.is-open .ask-in{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .5s var(--ease);}
.editorial .ask.is-open .ask-in:nth-child(1){transition-delay:.17s;}
.editorial .ask.is-open .ask-in:nth-child(2){transition-delay:.22s;}
.editorial .ask.is-open .ask-in:nth-child(3){transition-delay:.27s;}
.editorial .ask.is-open .ask-in:nth-child(4){transition-delay:.32s;}
.editorial .ask.is-open .ask-in:nth-child(5){transition-delay:.37s;}
.editorial .ask-head{display:flex;align-items:center;gap:14px;margin:0 20px;padding:18px 0;border-bottom:1px solid var(--line);}
.editorial .ask-head bo-avatar{width:52px;flex:none;}
.editorial .ask-id{flex:1 1 0;min-width:0;}
.editorial .ask-name{margin:0;font:500 var(--fs-faq)/1.2 var(--body);letter-spacing:var(--ls-text);}
.editorial .ask-sub{margin:3px 0 0;font-size:var(--fs-pill);line-height:1.3;color:var(--muted);}
.editorial .ask-clear{display:none;border:0;background:none;padding:8px 10px;border-radius:999px;color:var(--muted);font:400 var(--fs-text)/1 var(--body);cursor:pointer;transition:color .2s;}
.editorial .ask-sheet:has(.ask-user) .ask-clear{display:inline-block;}
.editorial .ask-clear:hover{color:var(--ink);}
.editorial .ask-x{position:relative;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),background .2s;}
.editorial .ask-x:hover{transform:rotate(90deg);background:var(--surface);}
.editorial .ask-x i{position:absolute;left:50%;top:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;background:currentColor;transform:rotate(45deg);}
.editorial .ask-x i + i{transform:rotate(-45deg);}
.editorial .ask-log{display:flex;flex-direction:column;gap:22px;padding:28px 28px 20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.editorial .ask-hero{margin:0 0 14px;font:400 var(--sf-title)/1.02 var(--serif);letter-spacing:var(--sf-ls);}
.editorial .ask-msg{animation:ask-msg .45s var(--ease) both;}
.editorial .ask-log.is-restored .ask-msg{animation:none;}
@keyframes ask-msg{from{opacity:0;transform:translateY(10px) scale(.97);}}
.editorial .ask-bot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;max-width:92%;font-size:var(--fs-faq);line-height:1.4;letter-spacing:var(--ls-text);}
.editorial .ask-star{color:var(--red);font-size:var(--fs-faq);line-height:1.4;}
.editorial .ask-body p{margin:0;}
.editorial .ask-body p + p{margin-top:.5em;}
.editorial .ask-body ul{margin:.6em 0 0;padding:0;list-style:none;display:grid;gap:.3em;}
.editorial .ask-body li{position:relative;padding-left:1em;font-size:var(--fs-text);line-height:1.45;}
.editorial .ask-body li::before{content:"";position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;}
.editorial .ask-body .ask-meta{margin:10px 0 0;font-size:var(--fs-tiny);line-height:var(--lh-tiny);color:var(--muted);}
.editorial .ask-link{display:inline-block;margin-top:.7em;font-size:var(--fs-text);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.editorial .ask-user{align-self:flex-end;max-width:82%;padding:16px 28px;border-radius:30px;background:var(--wine);color:var(--white);font-size:var(--fs-faq);line-height:1.3;letter-spacing:var(--ls-text);}
.editorial .ask-dots{display:inline-flex;gap:5px;padding:12px 0;}
.editorial .ask-dots span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ask-dot .9s ease-in-out infinite;}
.editorial .ask-dots span:nth-child(2){animation-delay:.15s;}
.editorial .ask-dots span:nth-child(3){animation-delay:.3s;}
@keyframes ask-dot{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}
.editorial .ask-topics{display:flex;gap:10px;margin:0 24px 12px;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none;}
.editorial .ask-topics::-webkit-scrollbar{display:none;}
.editorial .ask-chip{flex:none;height:44px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:400 var(--fs-text)/1 var(--body);letter-spacing:var(--ls-text);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.editorial .ask-chip:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
.editorial .ask-foot{margin:0 24px;}
.editorial .ask-form{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 28px;border:1px solid var(--line);border-radius:999px;background:var(--paper);transition:border-color .2s;}
.editorial .ask-form:hover{border-color:var(--ink);}
.editorial .ask-form:focus-within{border-color:var(--red);}
.editorial .ask .ask-form input:focus-visible{outline:0;}
.editorial .ask-form input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:400 var(--fs-faq)/1.2 var(--body);letter-spacing:var(--ls-text);padding:14px 0;}
.editorial .ask-form input::placeholder{color:var(--muted);}
.editorial .ask-form button{flex:none;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--red);color:var(--white);cursor:pointer;transition:background .2s,transform .2s var(--ease);}
.editorial .ask-form button svg{width:22px;height:22px;}
.editorial .ask-form button:hover{background:var(--ink);transform:scale(1.05);}
.editorial .ask-note{margin:0;padding:12px 24px 18px;text-align:center;font-size:var(--fs-tiny);line-height:var(--lh-tiny);color:var(--muted);}
.editorial .ask-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.editorial .ask :is(button,input,a):focus-visible{outline:2px solid var(--red);outline-offset:3px;}
@media(max-width:700px){
  .editorial .ask-sheet{height:min(46rem,calc(100dvh - 5.5rem));border-radius:24px;}
  .editorial .ask.is-open .ask-sheet{clip-path:inset(0 round 24px);}
  .editorial .ask-log{padding:20px 18px 14px;gap:18px;}
  .editorial .ask-bot{max-width:100%;grid-template-columns:22px minmax(0,1fr);gap:10px;}
      .editorial .ask-user{max-width:90%;padding:14px 22px;}
  .editorial .ask-form{padding-left:20px;}
  .editorial .ask-form button{width:46px;height:46px;}
}
@media(prefers-reduced-motion:reduce){
  .editorial .ask,.editorial .ask-sheet,.editorial .ask.is-open .ask-sheet,.editorial .ask-in,.editorial .ask.is-open .ask-in,.editorial .ask-pill{transition:none;}
  .editorial .ask-msg,.editorial .ask-dots span{animation:none;}
}
.editorial .footer{overflow-x:clip;}   /* the particle canvas bleeds 120px past the wordmark; it must not widen the page */

/* FAQ answers fade in when a question opens */
@media(prefers-reduced-motion:no-preference){.editorial .faq-list details[open] > p{animation:faq-in .55s cubic-bezier(.22,1,.36,1) both;}}
@keyframes faq-in{from{opacity:0;transform:translateY(8px);}}

/* tool tiles: the border and label light up on hover; the logo itself dissolves into particles around the pointer (assets/particle-text.js) */
.editorial .tools-tile{transition:border-color .3s,background .3s;}
.editorial .tools-item:hover .tools-tile{border-color:var(--white-70);background:color-mix(in srgb,var(--white) 6%,var(--scrim));}
.editorial .tools-name{transition:color .3s;}
.editorial .tools-item:hover .tools-name{color:var(--white);}

/* intro results (Figma): number + small unit on one baseline, text below; 25px between columns, 40px between rows; label, divider and numbers 20px apart */
.editorial .intro-side .thin-label{padding-bottom:20px;}
.editorial .intro-numbers{padding-top:20px;column-gap:var(--gutter);row-gap:40px;}
.editorial .intro-numbers strong{display:flex;align-items:baseline;gap:10px;}
.editorial .intro-numbers .unit{font:400 var(--fs-faq)/1 var(--body);letter-spacing:var(--ls-text);}
.editorial .intro-numbers small{max-width:206px;margin-top:18px;}

.editorial .intro-numbers .num{display:inline-block;}

/* Bo's face is decoration: it must not swallow the click (its inner button is disabled, so a click on the face did nothing) */
.editorial .ask bo-avatar{pointer-events:none;}
/* hero: 20px between the tagline and the buttons */
.editorial .hero-shot .hero-tagline{gap:20px;}
.editorial .hero-shot .hero-buttons{margin-top:0;}