/* ==========================================================================
   Design pass 3 — more colour, softer modern shapes, motion.
   Loaded after site.css, sections.css and menu.css. The font pairing and
   the palette are set after this file, from Settings → Appearance
   (Core\Appearance), so nothing here names a family or the accent.
   ========================================================================== */
:root {
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
}

/* Type: the display face a touch lighter and tighter, which suits both the
   serif pairings and the contemporary one. */
.display, .section-title, .page-title, .hero-title, .prj-title, .card-title, .step-title,
.big-quote p, .pf-title, .more-title, .faq-item summary, .details dt, .contact-form-title, .nav-overlay nav a {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
}
.section-title em, .page-title em, .display em, .hero-title em { font-weight: 300; }
body { font-family: var(--sans); font-size: 16.5px; }
.eyebrow { font-family: var(--sans); font-weight: 600; letter-spacing: .24em; }
.eyebrow::before {
  width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Shapes ------------------------------------------------------------------ */
.btn { border-radius: 999px; font-family: var(--sans); font-weight: 600; letter-spacing: .12em; padding: 0 30px; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: none; }
.btn:hover { background: var(--ink); border-color: var(--accent); }
.btn--accent::before, .btn--light::before { background: #fff; }
.btn--accent:hover, .btn--light:hover { color: var(--ink); }
.btn--ghost:hover { color: #fff; border-color: var(--accent); }
.header-cta { border-radius: 999px; }

.card, .contact-form-wrap, .contact-cards, .cta-box, .faq-list, .ticks li, .pf-views, .contact-map { border-radius: var(--r-md); }
.card { overflow: hidden; }
.contact-cards { overflow: hidden; }
.contact-map { overflow: hidden; }
.ticks li { border-radius: 999px; }
.pf-views { overflow: hidden; }
.feature-media img, .card-media, .more-media, .gallery-item, .pf-item, .nav-overlay-picture, .pf-cursor { border-radius: var(--r-lg); }
.feature-media::before { border-radius: calc(var(--r-lg) + 6px); }
.gallery-item, .pf-item, .more-media { overflow: hidden; }
.fld input, .fld select, .fld textarea { border-radius: var(--r-sm); }
.prj-open-media img { border-radius: 0; }
.prj-open-media { border-radius: 0 0 0 var(--r-lg); }
@media (max-width: 900px) { .prj-open-media { border-radius: 0; } }

/* Section backgrounds: three colours only ------------------------------------
   Cream (the page), Sand (the tinted band) and Dark (the palette's night).
   Anything older that named another colour is mapped onto these three when
   the page is drawn (frontend/page.php), so no stored value can bring one
   back. */
.theme-dark { color: rgba(255,255,255,.82); }
.theme-dark .section-title, .theme-dark h3, .theme-dark .big-quote p, .theme-dark .step-title, .theme-dark .marquee-track li { color: #fff; }
.theme-dark .section-intro, .theme-dark .step-body p, .theme-dark .card-list li, .theme-dark .card-body p { color: rgba(255,255,255,.72); }
.theme-dark .eyebrow, .theme-dark .section-title em, .theme-dark .big-quote p em { color: var(--accent-soft); }
.theme-dark .card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.78);
}
.theme-dark .card-icon { background: rgba(255,255,255,.1); color: #fff; }
.theme-dark .card-num { color: rgba(255,255,255,.2); }
.theme-dark .card-list li { border-color: rgba(255,255,255,.12); }
.theme-dark .step-num { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.theme-dark .steps::before { background: rgba(255,255,255,.2); }
.theme-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.theme-dark .stats-band dd { color: var(--accent-soft); }
.theme-dark .big-quote figcaption { color: rgba(255,255,255,.6); }
.theme-dark .faq-item summary, .theme-dark .details dt { color: #fff; }
.theme-dark .faq-answer, .theme-dark .details dd { color: rgba(255,255,255,.72); }
.theme-dark .faq-item, .theme-dark .faq-list, .theme-dark .details div { border-color: rgba(255,255,255,.12); }

/* A soft glow behind the dark sections, so they are never flat. */
.theme-dark { position: relative; overflow: hidden; }
.theme-dark::after {
  content: ""; position: absolute; width: 60vw; aspect-ratio: 1; right: -20vw; top: -30vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 65%); pointer-events: none;
}
.theme-dark > * { position: relative; z-index: 1; }

/* The closing band and the footer: the same dark, nothing else. */
.cta-band { background: var(--night); }
.site-footer { background: var(--night); }
.ftr-top { position: relative; }

/* Moving band ----------------------------------------------------------------- */
.pg-section--marquee { padding: clamp(16px, 2vw, 22px) 0; overflow: hidden; border-block: 1px solid var(--line); }
.marquee { display: flex; width: max-content; }
.marquee-track { display: flex; flex: none; margin: 0; padding: 0; list-style: none; animation: marquee 38s linear infinite; }
.marquee-track li {
  display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 30px); margin: 0; padding-right: clamp(18px, 2vw, 30px);
  font: 400 clamp(20px, 2.2vw, 30px)/1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); white-space: nowrap;
}
.marquee-track li:nth-child(even) { font-style: italic; color: var(--accent); -webkit-text-stroke: 0; }
.marquee-star { font-size: .45em; color: var(--accent); }
.pg-section--marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* The home page's five newest projects ------------------------------------- */
.pf-grid--latest { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 19vw, 300px); }
.pf-grid--latest .pf-item:nth-child(n) { grid-column: auto; grid-row: auto; }
.pf-grid--latest .pf-item:first-child { grid-column: span 2; grid-row: span 2; }
.pf-grid--latest .pf-item:first-child .pf-title { font-size: clamp(30px, 3.2vw, 46px); }
.pf-grid--latest .pf-item:first-child .pf-index {
  display: inline-block; width: max-content; padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: 11px;
}
@media (max-width: 900px) {
  .pf-grid--latest { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 34vw, 280px); }
}
@media (max-width: 560px) {
  .pf-grid--latest { grid-template-columns: 1fr; grid-auto-rows: 70vw; }
  .pf-grid--latest .pf-item:first-child { grid-column: auto; grid-row: span 1; }
}

/* Portfolio search ------------------------------------------------------- */
.pf-bar { gap: 14px; }
.pf-search {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; height: 42px;
  border: 1px solid var(--stone); border-radius: 999px; background: var(--paper); color: var(--ink-3);
}
.pf-search input { width: 180px; border: 0; background: none; font: 400 15px/1 var(--sans); color: var(--ink); outline: none; }
.pf-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156,130,103,.18); }
.pf-none { padding: 40px 0; text-align: center; color: var(--ink-3); font-size: 17px; }
@media (max-width: 640px) { .pf-search { width: 100%; margin-left: 0; } .pf-search input { width: 100%; } }

/* Share bar on a project ------------------------------------------------- */
.share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.share-label { margin-right: 6px; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.share-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; margin: 0; padding: 0;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  text-decoration: none; transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.share-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.share-done {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.share-done.is-on { opacity: 1; }
.share-keys { margin-left: 10px; font-size: 13px; color: rgba(255,255,255,.5); }
.share-keys kbd { display: inline-block; margin-right: 4px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; font: 500 12px/1.4 var(--sans); color: #fff; }
@media (hover: none) { .share-keys { display: none; } }

/* Page transition: a curtain in the accent colour ------------------------ */
.curtain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  display: grid; place-items: center;
  background: var(--night);
  transform: translateY(0); transition: transform .75s var(--ease-out);
}
.curtain-mark {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-top-color: var(--accent); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
html:not(.js) .curtain { display: none; }
.is-loaded .curtain { transform: translateY(-100%); }
.is-leaving .curtain { transform: translateY(0); transition: transform .55s var(--ease); }
.is-leaving .curtain.from-bottom { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* Easter egg: blueprint mode ----------------------------------------------- */
.egg-grid {
  position: fixed; inset: 0; z-index: 140; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
html.is-blueprint body { background: #0f3a6e; }
html.is-blueprint main, html.is-blueprint .site-footer, html.is-blueprint .cta-band {
  filter: grayscale(1) invert(1) sepia(1) saturate(4) hue-rotate(175deg) brightness(.92) contrast(1.15);
  transition: filter 1s var(--ease);
}
html.is-blueprint .egg-grid { opacity: 1; }
.egg {
  position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 20px;
  background: rgba(10, 34, 66, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.egg[hidden] { display: none; }
.egg-card {
  position: relative; width: min(560px, 100%); padding: clamp(28px, 5vw, 48px); text-align: center;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-lg);
  background: #12447f; color: #e8f1ff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: egg-in .7s var(--ease-out);
}
@keyframes egg-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.egg-house { width: 220px; max-width: 70%; height: auto; margin: 0 auto 18px; display: block; }
.egg-house path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.4s var(--ease) forwards; }
.egg-house path:nth-child(2) { animation-delay: .2s; }
.egg-house path:nth-child(3) { animation-delay: .6s; }
.egg-house path:nth-child(4) { animation-delay: .9s; }
.egg-house path:nth-child(5) { animation-delay: 1.1s; }
.egg-house path:nth-child(6) { animation-delay: 1.4s; }
.egg-house .egg-dim { stroke: #9cc3ff; stroke-dasharray: 4 4; animation: none; stroke-dashoffset: 0; opacity: .8; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.egg .eyebrow { justify-content: center; color: #9cc3ff; }
.egg .display { color: #fff; font-size: clamp(32px, 4.4vw, 48px); }
.egg .display em { color: #9cc3ff; }
.egg-text { margin: 16px auto 26px; max-width: 42ch; color: rgba(232,241,255,.82); }
.egg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.egg-hint { margin: 18px 0 0; font-size: 13px; color: rgba(232,241,255,.6); }
@media (prefers-reduced-motion: reduce) { .egg-house path { animation: none; stroke-dashoffset: 0; } }

/* Small motion details -------------------------------------------------- */
.pf-item img, .more-media img, .card-media img { will-change: transform; }
.feature-media { transition: transform .8s var(--ease-out); }
.feature-media:hover { transform: translateY(-6px); }
.section-title em { position: relative; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* If the script never runs, the curtain must not stay down. */
.curtain { animation: curtain-safety 0s linear 3s forwards; }
.is-loaded .curtain, .is-leaving .curtain { animation: none; }
@keyframes curtain-safety { to { visibility: hidden; } }

/* The band after the hero is its own thing; the next section keeps its air. */
.pg-section--marquee + .pg-section { padding-top: var(--section-y); }

/* Partners & clients --------------------------------------------------------- */
.pg-section--clients { padding: var(--section-y) 0; }
.partners { overflow: hidden; display: flex; justify-content: center; }
.partners--moving { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.partners-track { display: flex; flex: none; align-items: center; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0 clamp(8px, 1vw, 14px); list-style: none; }
.partners--moving .partners-track { animation: marquee 36s linear infinite; }
.partners--moving:hover .partners-track { animation-play-state: paused; }
.partner {
  flex: none; width: clamp(150px, 16vw, 210px); height: clamp(96px, 10vw, 120px); margin: 0;
  display: grid; place-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); transition: border-color .4s, transform .4s var(--ease), box-shadow .4s;
}
.partner:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(60,45,30,.4); }
.partner a { display: grid; place-items: center; width: 100%; height: 100%; }
.partner img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; }
.partner:hover img { filter: none; opacity: 1; }
.partner-name { font: 500 18px/1.2 var(--serif); color: var(--ink); text-align: center; }
@media (prefers-reduced-motion: reduce) { .partners--moving .partners-track { animation: none; } }

/* "Let's talk": the words sit in the middle of the pill on every page. */
.main-nav a.header-cta, .header-cta {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  gap: 10px; min-height: 44px; padding: 0 22px; line-height: 1;
}
.main-nav a.header-cta::after { display: none; }
.header-cta i { margin: 0; }
@media (max-width: 1080px) { .main-nav a.header-cta, .main-nav > .header-cta { display: none; } }

/* Text written in the editor, inside a card, a step, an answer. */
.rich > :first-child { margin-top: 0; }
.rich p { margin: 0 0 12px; }
.rich ul, .rich ol { list-style: none; margin: 8px 0 0; padding: 0; }
.rich ol { counter-reset: rich; }
.rich li { position: relative; margin: 0; padding: 9px 0 9px 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.rich ul li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 10px; height: 1px; background: var(--accent); }
.rich ol li { counter-increment: rich; }
.rich ol li::before { content: counter(rich) "."; position: absolute; left: 0; top: 9px; font-size: 13px; color: var(--accent-dark); }
.rich a { color: var(--accent-dark); }
.rich h3, .rich h4 { margin: 16px 0 8px; font: 500 20px/1.3 var(--serif); color: var(--ink); }
.theme-dark .rich li { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.12); }
.theme-dark .rich a { color: var(--accent-soft); }

.brand-text--light { color: #fff; }
/* The hero photograph is an <img> now, so it can be lazy-loaded. */
img.hero-media { display: block; width: 104%; height: 104%; object-fit: cover; }

/* Partners, aligned: one row of equal tiles, every logo centred in the same
   box whatever its shape. White backgrounds in the logo files melt into the
   tile (multiply), and every logo is shown in grey until hovered. */
.pg-section--clients { padding: clamp(56px, 7vw, 96px) 0; }
.partners, .partners--moving { display: block; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.partners-track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); justify-content: center;
  gap: clamp(12px, 1.6vw, 20px); padding: 0; animation: none !important;
}
.partner {
  width: auto; height: 120px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.partner a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.partner img {
  width: 70%; height: 64px; max-width: none; max-height: none; object-fit: contain;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); opacity: .7;
}
.partner:hover img { filter: none; opacity: 1; }
@media (max-width: 560px) {
  .partners-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner { height: 100px; }
  .partner img { height: 52px; }
}

/* A smaller closing band and footer ------------------------------------------- */
.cta-band { padding: clamp(48px, 6vw, 76px) 0; }
.cta-band::before { width: 34vw; right: -8vw; }
.cta-band::after { width: 22vw; }
.cta-band .display { font-size: clamp(30px, 3.6vw, 48px); }
.cta-band .eyebrow { margin-bottom: 12px; }
.cta-side p { margin-bottom: 18px; font-size: 16px; }
.cta-inner { gap: 28px; align-items: center; }

.site-footer { font-size: 14px; line-height: 1.7; }
.ftr-top { gap: clamp(24px, 4vw, 56px); padding: clamp(36px, 4.5vw, 56px) 0 clamp(24px, 3vw, 36px); }
.ftr-brand img { width: 140px; }
.ftr-brand p { margin-top: 14px; font-size: 18px; }
.ftr-col h2 { margin-bottom: 12px; }
.ftr-col li { margin-bottom: 4px; }
.ftr-social a { width: 38px; height: 38px; font-size: 14px; }
.ftr-bottom { padding: 16px 0 20px; font-size: 12.5px; }
/* On a phone the four columns become two, not a tall single file. */
@media (max-width: 520px) {
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* An odd last logo sits in the middle, not alone on the left. */
  .partners-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .partner { flex: 0 0 calc(50% - 6px); }
  .cta-band { padding: 44px 0; }
  .cta-actions .btn { min-height: 46px; }
}

/* Cookie consent ----------------------------------------------------------- */
.cookie {
  position: fixed; left: 18px; bottom: 18px; z-index: 450; width: min(560px, calc(100% - 36px));
  display: grid; gap: 16px; padding: 22px 24px; text-align: left;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(28,25,22,.35);
  animation: cookie-in .5s var(--ease-out);
}
.cookie[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie-title { margin: 0 0 6px; font: 500 22px/1.2 var(--serif); }
.cookie-title i { color: var(--accent); margin-right: 6px; }
.cookie-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cookie-text a { color: var(--accent-dark); }
.cookie-prefs { display: grid; gap: 10px; margin-top: 14px; }
.cookie-prefs[hidden] { display: none; }
.cookie-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--cream); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.cookie-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.cookie-opt strong { display: block; color: var(--ink); }
.cookie-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cookie-btn { min-height: 42px; padding: 0 18px; font-size: 11.5px; }
.cookie-btn[hidden] { display: none; }
.has-cookie-box .float-actions { bottom: 18px; }
@media (max-width: 560px) {
  .cookie { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1 1 auto; }
  .has-cookie-box .float-actions { display: none; }
}

/* Footer legal line */
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ftr-link-btn { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: rgba(255,255,255,.8); cursor: pointer; }
.ftr-link-btn:hover { color: #fff; }
.ftr-visits { color: rgba(255,255,255,.6); }

/* Share bar on a light background (a page banner without a photograph) */
.page-banner .share { margin-top: 26px; }
.share--light .share-label { color: var(--ink-3); }
.share--light .share-btn { border-color: var(--stone); color: var(--ink); }
.share--light .share-btn:hover { color: #fff; }