/* Approved cobalt panels and frames across work, services, FAQ and enquiries. */
:root { --cobalt-tint:#edf2ff; --cobalt-line:#dce3f1; --cobalt-edge:9px; }

#work .section-heading { grid-template-columns:minmax(0,1fr); gap:0; }
#work .section-heading h2, #services .section-heading h2 {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  border:2px solid #111;
  border-radius:22px;
  padding:26px 28px;
  margin-right:var(--cobalt-edge);
  margin-bottom:var(--cobalt-edge);
  font-size:clamp(38px,4.35vw,64px);
}
#work .section-heading h2 { width:fit-content; max-width:100%; margin-right:0; }
.work-stage { padding:20px 20px 18px; border:1px solid var(--cobalt-line); border-radius:24px; background:#fff; min-width:0; }
.work-stage .work-gallery { padding:6px 12px 14px 4px; scroll-padding-inline:4px; }
.work-stage .work-card { scroll-margin-inline:4px; }
.work-stage .work-image { box-shadow:7px 7px 0 var(--blue); }
html[data-motion="on"] .work-stage .work-image:hover { box-shadow:7px 7px 0 var(--blue),0 14px 24px #09204417; }
.work-stage .work-meta { padding-top:22px; }
.work-stage .gallery-controls { margin-top:8px; padding-inline:4px; }
.work-stage .round-button { background:var(--cobalt-tint); border-color:var(--cobalt-line); }
.work-stage .round-button:hover:not(:disabled) { background:var(--blue); border-color:var(--blue); }

#faq .faq-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:48px; align-items:start; }
.faq-intro { background:var(--blue); border-radius:24px; padding:34px; color:#fff; min-width:0; }
#faq .faq-intro .eyebrow { color:#dbe6ff; font-size:9px; letter-spacing:.13em; margin-bottom:24px; }
#faq .faq-intro h2 { color:#fff; font-size:clamp(46px,5.3vw,76px); }
#faq .faq-caption { color:#e4edff; font-size:14px; line-height:1.8; margin-top:23px; }
.faq-emblem { display:grid; place-items:center; width:82px; height:82px; margin-top:34px; border-radius:24px; background:#ffffff16; transform:rotate(-7deg); }
.faq-emblem svg { width:42px; height:42px; stroke-width:1.4; }
#faq .faq-list { display:grid; gap:10px; padding:22px; margin-right:var(--cobalt-edge); margin-bottom:var(--cobalt-edge); border:1px solid var(--cobalt-line); border-radius:24px; background:#fff; box-shadow:var(--cobalt-edge) var(--cobalt-edge) 0 var(--blue); }
#faq details { border:0; border-bottom:1px solid transparent; border-radius:12px; background:var(--cobalt-tint); box-shadow:inset 0 0 0 1px transparent; transition:background .25s,box-shadow .25s; }
#faq details[open] { background:#fff; box-shadow:inset 0 0 0 1px var(--blue); }
#faq summary { padding:20px 18px; font-size:13px; line-height:1.65; gap:16px; }
#faq details p { padding:0 18px 20px; font-size:13px; line-height:1.9; }
/* Native focus outlines remain outside the accordion's clipped animation box. */
#faq details:focus-within { outline:2px solid var(--blue); outline-offset:3px; }

#services .section-heading { align-items:center; }
#services .service-grid { gap:32px; }
#services .service-card {
  margin-right:var(--cobalt-edge);
  margin-bottom:var(--cobalt-edge);
  box-shadow:var(--cobalt-edge) var(--cobalt-edge) 0 var(--blue);
}
.service-card-plus { background:var(--blue); border-color:var(--blue); color:#fff; }
#services .service-card-plus {
  /* A fine outer edge keeps the white backplate visible on the off-white page. */
  box-shadow:var(--cobalt-edge) var(--cobalt-edge) 0 #fff,
    var(--cobalt-edge) var(--cobalt-edge) 0 1px #d5deef;
}
.service-card-plus .service-top, .service-card-plus h3, .service-card-plus li>svg { color:#fff; }
.service-card-plus .service-description, .service-card-plus li span { color:#e4edff; }
.service-card-plus ul { border-top-color:#ffffff45; }
.service-card-plus .button { background:#fff; border-color:#fff; color:var(--blue); }
.service-card-plus .button:hover { background:#edf2ff; border-color:#edf2ff; }

#audit .audit-grid {
  background:var(--blue);
  border:0;
  border-radius:28px;
  padding:clamp(28px,3.3vw,48px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px,3vw,44px);
}
#audit .audit-copy { min-width:0; color:#fff; }
#audit .audit-copy>.eyebrow { color:#dbe6ff; }
#audit h2 { color:#fff; font-size:clamp(56px,5.8vw,86px); }
#audit h2 span { color:#dbe6ff; }
#audit .audit-copy>p:not(.eyebrow) { color:#e4edff; font-size:16px; }
#audit .audit-details, #audit .audit-details svg { color:#fff; }
#audit .audit-details { margin-top:28px; gap:10px; }
#audit .audit-details span { font-size:12px; }
#audit .audit-card { min-width:0; margin:0; border-color:#fff; padding:28px; }

@media(min-width:1000px) {
  /* Centre pairs only; larger categories retain a reachable start of the track. */
  .work-stage .work-gallery[data-visible-count="2"] { justify-content:center; }
}

/* Keep the supplied portrait covers complete, with no duplicated text overlays. */
.work-stage .work-image { aspect-ratio:9/16; }
.work-card-branded .work-image img { object-fit:contain; object-position:center; filter:none; }
.work-card-branded .work-image:hover img { transform:none; }
.work-card-branded .work-category, .work-card-branded .watch-label,
.work-card-branded .work-image::after { display:none; }
.work-featured { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:32px; padding:24px; margin-top:28px; border:1px solid var(--cobalt-line); border-radius:24px; background:#fff; }
.work-featured .work-image { aspect-ratio:1200/676; box-shadow:6px 6px 0 var(--blue); margin:0 6px 6px 0; }
.work-featured .work-image img { object-fit:contain; object-position:center; filter:none; }
.work-featured .work-image::after { display:none; }
.work-featured-copy { min-width:0; }
.work-featured-copy .eyebrow { color:var(--blue); font-size:9px; margin-bottom:14px; }
.work-featured-copy h3 { font-family:var(--display); font-size:clamp(32px,3.2vw,48px); line-height:1; text-transform:uppercase; color:var(--blue); }
.work-featured-copy>p:not(.eyebrow) { color:var(--muted); font-size:13px; margin-top:16px; }
.work-format { display:block; margin-top:20px; font-size:8px; font-weight:800; letter-spacing:.1em; color:var(--blue); }
.video-modal-landscape { width:min(960px,calc(100vw - 28px)); }
.video-modal-landscape video { aspect-ratio:16/9; }
@media(max-width:700px) {
  .work-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-featured { grid-template-columns:minmax(0,1fr); gap:22px; padding:16px; border-radius:19px; margin-top:22px; }
  .work-featured-copy { padding:0 4px 8px; }
  .work-featured-copy h3 { font-size:36px; }
}
@media(min-width:701px) and (max-width:1050px) {
  #work .section-heading h2, #services .section-heading h2 { padding:23px 20px; font-size:clamp(34px,4.35vw,46px); }
  #audit .audit-grid { gap:24px; padding:26px; }
  #audit h2 { font-size:clamp(44px,5.9vw,62px); }
  #audit .audit-copy>p:not(.eyebrow) { font-size:14px; }
  #audit .audit-card { padding:22px 18px; }
  #faq .faq-grid { gap:25px; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); }
  .faq-intro { padding:26px 22px; }
  #faq .faq-intro h2 { font-size:clamp(43px,5.5vw,58px); }
  #faq .faq-list { padding:15px; }
  #faq summary { padding:18px 14px; font-size:12px; }
  #faq details p { padding-inline:14px; font-size:12px; }
  .work-stage { padding:17px 16px 16px; }
}
@media(max-width:700px) {
  :root { --cobalt-edge:6px; }
  #work .section-heading { display:grid; grid-template-columns:minmax(0,1fr); gap:17px; margin-bottom:31px; }
  #work .section-heading h2, #services .section-heading h2 { padding:25px 21px; border-radius:18px; font-size:clamp(42px,11.8vw,58px); }
  #services .service-grid { gap:23px; }
  .work-stage { padding:12px 12px 14px; border-radius:19px; }
  .work-stage .work-gallery { margin-right:-3px; padding:5px 12px 10px 3px; gap:18px; }
  .work-stage .work-card { flex-basis:92%; max-width:360px; }
  .work-stage .work-image { box-shadow:6px 6px 0 var(--blue); }
  .work-stage .work-meta { padding-top:19px; }
  .work-stage .gallery-controls { padding-inline:0; margin-top:12px; gap:10px; }
  .work-stage .gallery-controls p { font-size:9px; }
  .work-stage .round-button { width:44px; height:44px; }
  #faq .faq-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:23px; }
  .faq-intro { padding:26px 23px; border-radius:20px; display:grid; grid-template-columns:minmax(0,1fr) 60px; column-gap:16px; }
  #faq .faq-intro .eyebrow, #faq .faq-intro h2 { grid-column:1/-1; }
  #faq .faq-intro .eyebrow { font-size:8px; margin-bottom:20px; }
  #faq .faq-intro h2 { font-size:56px; }
  #faq .faq-caption { grid-column:1; font-size:13px; margin-top:18px; align-self:center; }
  .faq-emblem { grid-column:2; width:60px; height:60px; margin-top:18px; border-radius:18px; align-self:end; }
  .faq-emblem svg { width:32px; height:32px; }
  #faq .faq-list { padding:12px; gap:9px; margin-top:0; border-radius:19px; }
  #faq summary { padding:17px 13px; gap:10px; font-size:13px; }
  #faq summary>span { width:20px; height:24px; }
  #faq details p { padding:0 13px 18px; font-size:12px; }
  #audit { width:100%; }
  #audit .audit-grid { padding:28px 16px 16px; border-radius:22px; }
  #audit .audit-copy { padding:4px 7px 0; }
  #audit h2 { font-size:clamp(48px,13vw,64px); }
  #audit .audit-copy>p:not(.eyebrow) { font-size:15px; }
  #audit .audit-details span { font-size:11px; }
  #audit .audit-card { margin-top:28px; padding:24px 20px; border-radius:16px; }
}
@media(max-width:370px) {
  .faq-intro { padding:24px 19px; grid-template-columns:minmax(0,1fr) 50px; column-gap:12px; }
  #faq .faq-intro h2 { font-size:49px; }
  .faq-emblem { width:50px; height:50px; border-radius:15px; }
  .faq-emblem svg { width:28px; height:28px; }
  #faq .faq-caption { font-size:12px; }
  #faq .faq-list { padding:10px; }
  #faq summary { padding:16px 12px; font-size:12px; }
}