/* Email offer page reconciliation, 21 September 2026.
   Loaded last, after styles.css, auto-studio-adaptation.css, site-chrome.css
   and spring-review.css. It brings this page into the locked homepage system.
   The homepage stylesheets and markup are untouched. The approved offer,
   pricing, scope, turnaround, campaign artwork and form journey are unchanged. */

/* ---- Canvas. White, as on the homepage, not the older ivory. ---- */
body{background:#FFFFFF}
.opening,
.campaign-section,
.services,
.experience{background:#FFFFFF}

/* ---- Header. Same height, rule and single clear action as the homepage. ---- */
.header{min-height:96px;gap:36px;border-bottom:1px solid #D8D8D2}
.header nav{align-items:center;gap:28px}
.header nav .header-contact{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:12px 18px;border-radius:var(--kee-soft-radius);background:#111110;color:#FFFFFF;white-space:nowrap}
.header nav .header-contact:hover,
.header nav .header-contact:focus-visible{text-decoration:none;background:#14B8C8;color:#111110}
.header-contact>span{font-size:20px;line-height:1}

/* ---- Cards. White surfaces with the homepage's hairline and 6px corner. ---- */
.discipline-grid span,
.service-card,
.experience-facts>div{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--spring-edge)}
.service-card:hover{background:#FFFFFF}
.service-card:hover .service-number{background:transparent;color:inherit}

/* ---- The statement band joins the homepage rhythm: white, black, aqua, ivory.
       Lime stays as the one deliberate emphasis inside it. ---- */
.campaign-statement{background:#111110;color:#FFFFFF;min-height:0;padding-block:clamp(56px,7vw,96px);margin-bottom:clamp(56px,7vw,96px);gap:clamp(32px,4vw,56px)}
.campaign-statement .eyebrow{color:#D8D8D2}
.campaign-statement mark{background:var(--kee-lime);color:#111110;padding:0 .07em .06em}

/* ---- Emphasis. Lime carries the two moments that have a homepage twin: the
       opening line and the experience heading. Aqua keeps its action job, and
       one aqua highlight stays mid page so lime does not become the default. ---- */
.opening h1 .scroll-highlight,
.experience h2 .scroll-highlight{background-color:var(--kee-lime);color:#111110}
html.highlight-ready .opening h1 .scroll-highlight,
html.highlight-ready .experience h2 .scroll-highlight{background-color:transparent}
html.highlight-ready .opening h1 .scroll-highlight.is-visible,
html.highlight-ready .experience h2 .scroll-highlight.is-visible{background-color:var(--kee-lime);color:#111110}

/* ---- Offer panel action. Black, as the homepage offer button is. ---- */
.cta{background:#111110;color:#FFFFFF;border-radius:var(--kee-soft-radius);padding:19px 22px}
.cta:hover,
.cta:focus-visible{background:#14B8C8;color:#111110}

/* ---- Enquiry. One full-width aqua band, as on the homepage. ---- */
.enquiry{margin:0;padding:0;background:#14B8C8;color:#111110;margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.enquiry-card{background:transparent;border-radius:0;box-shadow:none;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.enquiry-heading{background:transparent;min-height:0;padding:clamp(48px,5vw,80px) 0 clamp(24px,3vw,40px)}
.enquiry-heading h2{margin-top:0}
.enquiry-form-panel{background:transparent;padding:clamp(24px,3vw,80px) 0 clamp(48px,5vw,80px)}
.enquiry-heading p,
.enquiry-form label,
.enquiry-form .form-help,
.enquiry-form .form-status,
.enquiry-form .form-help a{color:#111110}
.enquiry-form input,
.enquiry-form textarea{background:#FFFFFF;color:#111110;border:1px solid #11111066;border-radius:var(--kee-soft-radius);color-scheme:light}
.enquiry-form textarea::placeholder{font-style:normal;color:#62635A}
.enquiry-form input:focus,
.enquiry-form textarea:focus{background:#FFFFFF;border-color:#111110;outline:2px solid #111110;outline-offset:3px}
.enquiry-action{background:#111110;color:#FFFFFF;border-radius:var(--kee-soft-radius)}
.enquiry-action:hover:not(:disabled){box-shadow:inset 0 0 0 2px #FFFFFF}
.enquiry-action:focus-visible{outline:2px solid #111110;outline-offset:4px}

/* ---- Studio close and the ivory legal footer, shared with the homepage. ---- */
.studio-footer-panel{margin-top:0}
.legal-footer>a img{filter:none}

/* ---- Weather. The same five states, playing only while the artwork is in view. ---- */
.weather-story .weather-state{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;opacity:0;animation:none}
.weather-story:not(.is-playing) .weather-state.snow{opacity:1}
.weather-story.is-playing .weather-state{animation:weather-cycle 15s linear infinite}
.weather-story.is-playing .weather-state.rain{animation-delay:3s}
.weather-story.is-playing .weather-state.storm{animation-delay:6s}
.weather-story.is-playing .weather-state.night{animation-delay:9s}
.weather-story.is-playing .weather-state.snow{animation-delay:12s}
@keyframes weather-cycle{0%,16%{opacity:1}20%,100%{opacity:0}}

/* ---- Action arrows move once, diagonally. Nothing spins. ---- */
.cta>.arrow,
.text-action>span,
.enquiry-action>span,
.secondary-link>span,
.studio-footer-panel .studio-copy>a>span,
.footer-email>span{display:inline-block;transform:none;transition:transform 180ms ease;animation:none}
.cta:is(:hover,:focus-visible)>.arrow,
.text-action:is(:hover,:focus-visible)>span,
.enquiry-action:is(:hover,:focus-visible)>span,
.secondary-link:is(:hover,:focus-visible)>span,
.studio-footer-panel .studio-copy>a:is(:hover,:focus-visible)>span,
.footer-email:is(:hover,:focus-visible)>span{animation:none;transform:translate(3px,-3px)}
.round-link{transition:background-color 180ms ease}
.round-link:focus-visible{background:#14B8C8;outline:2px solid #111110;outline-offset:4px}

@media(max-width:760px){
  /* Phones keep one section link and the action, as the homepage header does. */
  .header{min-height:88px;gap:16px}
  .header nav{align-items:center;gap:14px}
  .header nav a:nth-child(2){display:none}
  .header nav .header-contact{gap:10px;padding:10px 12px}
  .header-contact>span{font-size:18px}
  .campaign-statement{padding-block:48px;margin-bottom:48px}
  .enquiry-card{padding-inline:var(--gutter)}
  .enquiry-heading{padding:40px 0 20px}
  .enquiry-form-panel{padding:0 0 44px}
  /* The closing bands run edge to edge on phones, as they do on the homepage. */
  .studio-footer-panel{margin-inline:0;padding-left:var(--gutter);padding-right:var(--gutter)}
  .legal-footer{margin-inline:0}
}
@media(max-width:480px){
  .eyebrow{font-size:11px}
  .vat-footnote{font-size:12px}
  .service-card{padding:20px}
  .header nav{gap:11px;font-size:12px}
  .header nav .header-contact{gap:8px;padding:10px 11px}
  .header-contact>span{font-size:16px}
}
@media(max-width:360px){
  .header{gap:10px}
  .header nav{gap:9px;font-size:11px}
  .header nav .header-contact{gap:6px;padding-inline:9px}
}
@media(prefers-reduced-motion:reduce){
  html.highlight-ready .opening h1 .scroll-highlight,
  html.highlight-ready .experience h2 .scroll-highlight{background-color:var(--kee-lime);color:#111110}
  .weather-story .weather-state{animation:none!important;opacity:0}
  .weather-story .weather-state.snow{opacity:1}
  .cta>.arrow,
  .text-action>span,
  .enquiry-action>span,
  .secondary-link>span,
  .studio-footer-panel .studio-copy>a>span,
  .footer-email>span{transition:none!important;animation:none!important;transform:none!important}
}