/* WordPress-specific additions. The design CSS (style.css, fullwidth.css, inset.css) is copied unchanged from the HTML build. */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}.admin-bar .nav{top:calc(var(--header-h) + 46px)}}
@media (max-width:600px){.admin-bar .site-header{top:0}}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pager .page-numbers.dots{color:#999}
.pager .current{color:#000;font-weight:700;border-bottom:2px solid var(--red)}
.prose img{height:auto}
.prose .wp-block-image{margin:28px 0}
.prose .wp-block-image.narrow img{max-width:320px;margin:0 auto;display:block}
.form-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-alert{background:#fde8e4;border-left:3px solid var(--red);padding:12px 14px;margin:0 0 20px;font-size:var(--fs-small)}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.logo-grid a{display:grid;place-items:center;width:100%;height:100%}
.thanks{padding-bottom:96px}
.thanks .btn{margin-top:28px}
.search-results .card-cat{color:#555}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 20px 12px 0}.alignright{float:right;margin:0 0 12px 20px}

/* Clients band: individual logos on the white board (CMS-managed, replaces the single logo image) */
.clients-logos{--cols:6;--gx:clamp(20px,3vw,40px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.5vw,32px) var(--gx);align-items:center}
.clients-logos li{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));display:grid;place-items:center;aspect-ratio:5/2}
.clients-logos img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:900px){.clients-logos{--cols:4}}
@media (max-width:560px){.clients-logos{--cols:3}}

/* Custom step icons uploaded in the CMS (values use .value-icon from the design CSS) */
.steps .ncm-icon-img{width:44px;height:44px;object-fit:contain;margin-bottom:14px;display:inline-block}
.steps svg{max-width:44px;max-height:44px}

/* Services mega menu: column count follows the number of service categories */
@media (min-width:881px){
  .site-header .mega-grid{grid-template-columns:1.1fr repeat(var(--mcols,3),1fr)}
  .site-header .mega-grid--no-intro{grid-template-columns:repeat(var(--mcols,3),1fr)}
}

/* Footer: one column per menu column + per service category */
@media (min-width:1181px){.f-cols{grid-template-columns:repeat(var(--fcols,5),auto)}}
body .site-footer .source-credit{font-size:.8em;opacity:.75}

/* Additions for the client's revised copy, sized with the design's type tokens */
body .section-intro{font-size:var(--fs-lede);line-height:1.55;max-width:46ch;margin-top:clamp(14px,1.6vw,22px)}
body .about-hero .about-sub{font-size:var(--fs-body);line-height:1.6;max-width:30em;color:var(--ink-2);margin-top:clamp(14px,1.6vw,22px)}
body .problem .lede+.lede{margin-top:14px}
@media (min-width:1025px){.steps{grid-template-columns:repeat(var(--steps,4),1fr)}}
body .steps-note{font-size:var(--fs-body);text-align:center;margin:clamp(32px,3.5vw,48px) auto 0;color:#dbe5f4;max-width:48ch}

/* Home hero: headline size set in Pages > Home > Hero (long headlines keep the intro and link on screen) */
body main .hero h1.hero-h--m{font-size:clamp(calc(2.3rem + 2px),calc(4vw + 2px),calc(4.6rem + 2px))}
body main .hero h1.hero-h--s{font-size:clamp(calc(2.1rem + 2px),calc(3.3vw + 2px),calc(3.8rem + 2px))}
/* Headline top lines up with the top of the image / video */
@media (min-width:881px){body .hero .hero-visual{padding-top:0}body main .hero h1{margin-top:0}}
body main .hero h1.hero-h--m,body main .hero h1.hero-h--s{line-height:1.02}

/* About: "Why we started" sits close to Vision / Mission, split by a light grey rule */
body .section--story{padding-bottom:clamp(40px,4.5vw,72px)}
body .section--after-story{padding-top:clamp(40px,4.5vw,72px)}
.divider{border:0;border-top:1px solid var(--line);margin:0}

/* Home hero video (Pages > Home > Hero > Media = Video) */
.rotator .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#ddd}
.rotator .hero-video--embed{overflow:hidden;pointer-events:none}
.rotator .hero-video--embed iframe{position:absolute;top:50%;left:50%;width:118.6%;height:100%;transform:translate(-50%,-50%);border:0}/* 16:9 video covering the 3:2 frame */

/* Home "What we do" accordion: optional note under the links */
.acc-body .acc-note{margin:-4px 0 14px}

/* Service pages: optional intro under the related-services heading */
.section-head + .section-intro{margin:0 0 clamp(20px,2.4vw,32px)}

/* Case studies: dateline, pictures inside the text, side-by-side phone screengrabs */
.case-row .body.prose{max-width:68ch}
.case-dateline{font-weight:600;color:var(--ink-2,#555)}
.case-row .body figure{margin:28px 0}
.case-row .body figure img{width:100%;height:auto;display:block}
.case-row .body figure.narrow img{max-width:420px}
.case-row .body figcaption{font-size:.8rem;color:#555;margin-top:8px}
.case-pair .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:560px){.case-pair .pair{gap:10px}}

/* Clients page: same logos as the Home/About band; a short last row is centred */
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;border:0;--cols:4}
.logo-grid li{flex:0 0 calc(100% / var(--cols));box-sizing:border-box;border:1px solid var(--line);margin:0 -1px -1px 0;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:0}
.logo-grid li>img,.logo-grid li>a{width:64%;height:50%;display:flex;align-items:center;justify-content:center}
.logo-grid li img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
@media (min-width:1600px){.logo-grid{--cols:6}}
@media (max-width:880px){.logo-grid{--cols:3}}
@media (max-width:560px){.logo-grid{--cols:2}}

/* Contact: only one of form / booking shown */
.contact-grid--single{grid-template-columns:minmax(0,760px)}

/* Blog: featured image caption; tall pictures stay a sensible size; tall card images keep their top in view */
.post-featured figcaption{font-size:.8rem;color:#555;margin-top:8px}
.post-featured.is-portrait img{width:auto;max-width:100%;max-height:640px;margin:0 auto;display:block}
.post-featured.is-portrait figcaption{text-align:center}
.card-media img.is-portrait{object-position:center top}

/* Contact Form 7, styled like the built-in contact form */
.wpcf7 .form{margin-top:20px}
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 .form select{appearance:auto}
.wpcf7 .wpcf7-not-valid{border-color:var(--red)!important}
.wpcf7 .wpcf7-not-valid-tip{color:var(--red);font-size:.8rem;margin-top:4px;display:block}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small,.9rem);font-weight:400;margin:0}
.wpcf7 .wpcf7-acceptance input{margin-top:4px;width:18px;height:18px;accent-color:#000;flex:0 0 auto}
.wpcf7 .wpcf7-acceptance a{color:var(--link)}
.wpcf7 .wpcf7-submit{cursor:pointer}
.wpcf7 .wpcf7-submit:disabled{opacity:.5;cursor:not-allowed}
.wpcf7 .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}
.wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:12px 14px;border:0;border-left:3px solid var(--line);background:#fff;font-size:var(--fs-small,.9rem)}
.wpcf7 form.sent .wpcf7-response-output{border-left-color:var(--green)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{border-left-color:var(--red);background:#fde8e4}
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}