/*
 * Sofito Consultancy: site-level additions, loaded after styles.css.
 *
 * Utilities replace the inline style="" attributes the pages used to carry.
 * They are !important so they keep the same precedence an inline style had,
 * and so the strict Content-Security-Policy (no inline styles) can be used.
 */

/* ---- spacing ---- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mt-12 { margin-top: var(--s-12) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.mb-8 { margin-bottom: var(--s-8) !important; }
.mb-12 { margin-bottom: var(--s-12) !important; }
.mx-auto { margin-inline: auto !important; }
.p-0 { padding: 0 !important; }
.p-6 { padding: var(--s-6) !important; }

/* ---- layout ---- */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-4 { gap: var(--s-4) !important; }
.justify-center { justify-content: center !important; }
.items-center { align-items: center !important; }
.items-start { align-items: start !important; }
.max-w-60ch { max-width: 60ch !important; }
.max-w-62ch { max-width: 62ch !important; }
.max-w-320 { max-width: 320px !important; }
.min-h-60vh { min-height: 60vh !important; }
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.h-80 { height: 80px !important; }
.h-200 { height: 200px !important; }

/* ---- type and colour ---- */
.text-center { text-align: center !important; }
.fs-lead { font-size: var(--fs-lead) !important; }
.fs-small { font-size: var(--fs-small) !important; }
.fw-600 { font-weight: 600 !important; }
.no-underline { text-decoration: none !important; }
.underline { text-decoration: underline !important; }
.text-cream { color: var(--cream) !important; }
.text-cream-muted { color: var(--cream-muted) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-green { color: var(--green-900) !important; }
.text-gold-light { color: var(--gold-light) !important; }
.text-bronze { color: #8a6d2e !important; }

/* ---- surfaces and borders ---- */
.bg-white { background: #fff !important; }
.bg-green { background: var(--green-900) !important; }
.border-0 { border: 0 !important; }
.border-t-0 { border-top: 0 !important; }
.border-ink-12 { border-color: rgba(22, 36, 29, .12) !important; }
.border-gold { border-color: var(--gold) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-t-lg { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.object-cover { object-fit: cover !important; }
.object-top { object-position: center top !important; }

/* ---- components ---- */
/* Image bleeding to the edges of a card. */
.card__bleed { margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) var(--s-6) !important; }

/* Ghost button placed on a light (cream) section. */
.ghost-on-light { --cream: var(--green-900) !important; border-color: rgba(22, 36, 29, .25) !important; }

/* Spam trap on the enquiry form: invisible to people, filled in by bots. */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Homepage process steps: put the step number in the flow so it can't overlap the heading. */
.process__step { padding-top: var(--s-4); }
.process__step::before { position: static; display: block; line-height: 1; margin-bottom: var(--s-3); }

/* =====================================================================
   Survey-sheet treatment for inner pages.
   Page headers read like a drawing sheet laid over a site photograph:
   toned photo, measured-survey grid, corner registration marks and a
   dimension line that draws in under the title. Guides become "plates".
   ===================================================================== */
:root {
  --sheet-line: linear-gradient(var(--gold), var(--gold));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- page header: shared frame ---- */
.page-head { overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 11vh, 7.5rem) clamp(3rem, 7vh, 4.5rem); }
.page-head > .container { position: relative; z-index: 2; }

/* measured-survey grid (16px minor, 64px major), fading out from the right */
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 189, 126, .24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 189, 126, .24) 1px, transparent 1px),
    linear-gradient(rgba(216, 189, 126, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 189, 126, .08) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 88% 35%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 95% at 88% 35%, #000 0%, transparent 72%);
}
/* paper grain, as on the homepage hero */
.page-head::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; background-image: var(--grain); }

/* corner registration marks framing the header content */
.page-head > .container::before {
  content: ""; position: absolute; inset: calc(var(--s-6) * -1) 0; pointer-events: none; opacity: .6;
  background:
    var(--sheet-line) top left / 18px 1px no-repeat,     var(--sheet-line) top left / 1px 18px no-repeat,
    var(--sheet-line) top right / 18px 1px no-repeat,    var(--sheet-line) top right / 1px 18px no-repeat,
    var(--sheet-line) bottom left / 18px 1px no-repeat,  var(--sheet-line) bottom left / 1px 18px no-repeat,
    var(--sheet-line) bottom right / 18px 1px no-repeat, var(--sheet-line) bottom right / 1px 18px no-repeat;
}

/* dimension line under the page title */
.page-head h1::after {
  content: ""; display: block; height: 13px; width: min(15rem, 60%); margin-top: var(--s-6);
  background: var(--sheet-line) center / 100% 1px no-repeat, var(--sheet-line) left center / 1px 13px no-repeat, var(--sheet-line) right center / 1px 13px no-repeat;
  transform-origin: left center;
}

/* ---- page header: photograph ---- */
.page-head--photo { min-height: clamp(400px, 60vh, 620px); display: flex; align-items: flex-end; }
.page-head--photo > .container { width: 100%; }
.page-head__media { position: absolute; inset: 0; z-index: 0; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) sepia(.18) brightness(.85) contrast(1.05); }
.page-head__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--green-900) 0%, rgba(22, 36, 29, .86) 30%, rgba(22, 36, 29, .35) 66%, rgba(22, 36, 29, .12) 100%),
    linear-gradient(180deg, rgba(22, 36, 29, .3) 0%, transparent 35%, transparent 70%, var(--green-900) 100%);
}
@media (max-width: 760px) {
  .page-head--photo { min-height: 0; }
  .page-head__media::after { background: linear-gradient(180deg, rgba(22, 36, 29, .75) 0%, rgba(22, 36, 29, .85) 45%, var(--green-900) 100%); }
}

/* ---- inner-page rhythm: alternate grained, raised sections ---- */
main:has(> .page-head) > section.section:nth-of-type(odd):not(.section--cream):not(.page-head):not(:has(.card)) {
  background: var(--green-800); position: relative; isolation: isolate;
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline);
}
main:has(> .page-head) > section.section:nth-of-type(odd):not(.section--cream):not(.page-head):not(:has(.card))::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: var(--grain);
}

/* call-to-action band: the survey grid again, faintly */
.cta-band {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(216, 189, 126, .12), transparent 60%),
    linear-gradient(rgba(216, 189, 126, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 189, 126, .07) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* ---- figures as drawing plates ---- */
.legal figure { position: relative; }
.legal figure img { outline: 1px solid rgba(216, 189, 126, .35); outline-offset: 7px; }
.legal figure::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: -14px; height: 14px; pointer-events: none; opacity: .7;
  background:
    var(--sheet-line) top left / 14px 1px no-repeat,  var(--sheet-line) top left / 1px 14px no-repeat,
    var(--sheet-line) top right / 14px 1px no-repeat, var(--sheet-line) top right / 1px 14px no-repeat;
}
.legal figcaption { margin-top: var(--s-6) !important; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--text-muted); }
.legal figcaption::before { content: ""; display: inline-block; width: 1.5rem; height: 1px; background: var(--gold); vertical-align: middle; margin-right: .6rem; }

/* ---- guide articles (pages whose breadcrumb runs through the Knowledge Base) ---- */
main:has(.page-head .breadcrumb a[href="/guides.html"]) .legal h2::before {
  content: ""; display: block; width: 2.75rem; height: 7px; margin-bottom: .9rem;
  background: var(--sheet-line) center / 100% 1px no-repeat, var(--sheet-line) left center / 1px 7px no-repeat, var(--sheet-line) right center / 1px 7px no-repeat;
}
main:has(.page-head .breadcrumb a[href="/guides.html"]) .legal > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-weight: 600; font-size: 4.4em; line-height: .78;
  color: var(--gold); padding: .06em .12em 0 0;
}

/* ---- motion: one orchestrated moment per page, skipped for reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .page-head__media img { animation: headSettle 2.4s var(--ease-smooth) both; }
  .page-head h1::after { animation: dimDraw 1.1s var(--ease-smooth) .35s both; }
  .page-head::before { animation: gridIn 1.6s ease-out both; }
}
@keyframes headSettle { from { transform: scale(1.08); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes dimDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gridIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Second pass: transitions, toned photographs, level staff, title block,
   scale bars and the drawing-sheet mobile menu.
   ===================================================================== */

/* ---- 1. page-to-page transitions (browsers without support just change page) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .page-head h1 { view-transition-name: sheet-title; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { z-index: 10; animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
  /* The header photo is deliberately not named: morphing it between headers of
     different heights cropped its overlay. It crossfades with the page instead. */
  ::view-transition-group(sheet-title) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
}

/* ---- 2. photographs toned at rest, full colour on hover; corner marks draw in ---- */
.card__bleed { position: relative; }
.card__bleed img, .split__media img:not(.figure-duotone) { filter: saturate(.55) sepia(.16) brightness(.92); transition: filter .7s var(--ease-smooth), transform 1.1s var(--ease-smooth); }
.card:hover .card__bleed img, .card:focus-visible .card__bleed img, .split__media:hover img:not(.figure-duotone) { filter: none; }
@media (hover: none) {
  .reveal.is-visible .card__bleed img, .split__media.reveal.is-visible img:not(.figure-duotone) { filter: none; transition-delay: .4s; }
}
.card__bleed::after, .split__media::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none; opacity: 0; transform: scale(1.06);
  transition: opacity .5s var(--ease-smooth), transform .6s var(--ease-smooth);
  background:
    var(--sheet-line) top left / 16px 1px no-repeat,     var(--sheet-line) top left / 1px 16px no-repeat,
    var(--sheet-line) top right / 16px 1px no-repeat,    var(--sheet-line) top right / 1px 16px no-repeat,
    var(--sheet-line) bottom left / 16px 1px no-repeat,  var(--sheet-line) bottom left / 1px 16px no-repeat,
    var(--sheet-line) bottom right / 16px 1px no-repeat, var(--sheet-line) bottom right / 1px 16px no-repeat;
}
.split__media { position: relative; }
.card:hover .card__bleed::after, .card:focus-visible .card__bleed::after, .split__media:hover::after { opacity: 1; transform: scale(1); }

/* ---- 4. levelling staff down guide articles (built by staff.js) ---- */
.legal { position: relative; }
.staff { display: none; }
@media (min-width: 1100px) {
  .staff { display: block; position: absolute; top: 0; bottom: 0; left: -4.5rem; width: 1px; background: var(--hairline); pointer-events: none; }
  .staff__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-light), var(--gold)); transform-origin: top; transform: scaleY(0); }
  .staff__tick { position: absolute; left: -6px; width: 13px; height: 1px; margin-top: .35em; background: var(--hairline); transition: background .4s var(--ease-smooth), width .4s var(--ease-smooth), left .4s var(--ease-smooth); }
  .staff__tick.is-passed { background: var(--gold); }
  .staff__tick.is-current { left: -10px; width: 21px; background: var(--gold-light); box-shadow: 0 0 10px rgba(216, 189, 126, .55); }
}

/* ---- 5. footer as a drawing title block ---- */
.site-footer { position: relative; background-image: var(--grain); background-size: 140px; background-blend-mode: soft-light; }
.site-footer > .container { position: relative; }
.site-footer > .container::before {
  content: ""; position: absolute; inset: calc(var(--s-6) * -1) 0 calc(var(--s-2) * -1); pointer-events: none; opacity: .45;
  background:
    var(--sheet-line) top left / 18px 1px no-repeat,     var(--sheet-line) top left / 1px 18px no-repeat,
    var(--sheet-line) top right / 18px 1px no-repeat,    var(--sheet-line) top right / 1px 18px no-repeat,
    var(--sheet-line) bottom left / 18px 1px no-repeat,  var(--sheet-line) bottom left / 1px 18px no-repeat,
    var(--sheet-line) bottom right / 18px 1px no-repeat, var(--sheet-line) bottom right / 1px 18px no-repeat;
}
@media (min-width: 768px) {
  .footer__grid > div + div { border-left: 1px solid var(--hairline); padding-left: var(--s-8); }
  .footer__bottom { display: grid; grid-template-columns: 2.2fr 1fr; gap: 0; border: 1px solid var(--hairline); padding: 0; }
  .footer__bottom p { padding: var(--s-4) var(--s-6); margin: 0; }
  .footer__bottom p + p { border-left: 1px solid var(--hairline); text-align: right; }
}

/* ---- 6. eyebrow hairline becomes a scale bar ---- */
.eyebrow::before {
  height: 6px; background:
    var(--sheet-line) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 7px) left bottom / 100% 4px no-repeat,
    var(--sheet-line) left bottom / 1px 6px no-repeat,
    var(--sheet-line) right bottom / 1px 6px no-repeat;
  align-self: center;
}
.section--cream .eyebrow::before {
  --cream-rule: linear-gradient(#8a6d2e, #8a6d2e);
  background:
    var(--cream-rule) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, #8a6d2e 0 1px, transparent 1px 7px) left bottom / 100% 4px no-repeat,
    var(--cream-rule) left bottom / 1px 6px no-repeat,
    var(--cream-rule) right bottom / 1px 6px no-repeat;
}

/* ---- 7. mobile menu as a drawing sheet ---- */
.mobile-menu__inner { position: relative; }
.mobile-menu.is-open .mobile-menu__inner {
  background-image:
    linear-gradient(rgba(216, 189, 126, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 189, 126, .07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.mobile-menu a:not(.btn) { position: relative; transition: padding-left .35s var(--ease-smooth), color .2s, background .2s; }
.mobile-menu a:not(.btn):hover, .mobile-menu a:not(.btn)[aria-current="page"] { padding-left: calc(var(--s-6) + 1.1rem); }
.mobile-menu a:not(.btn)::before {
  content: ""; position: absolute; left: var(--s-6); top: 50%; width: 0; height: 1px; background: var(--gold); transition: width .35s var(--ease-smooth);
}
.mobile-menu a:not(.btn):hover::before, .mobile-menu a:not(.btn)[aria-current="page"]::before { width: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .card__bleed img, .split__media img, .split__media img:not(.figure-duotone), .card__bleed::after, .split__media::after, .mobile-menu a:not(.btn), .mobile-menu a:not(.btn)::before, .staff__tick { transition: none; }
}

/* Section rhythm, site-wide: the base 6rem top and bottom padding left ~190px
   between blocks. Only the space around blocks changes; text and images keep their size. */
.section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3rem); }
.section > .container > .mb-12 { margin-bottom: var(--s-8) !important; }

/* Knowledge Base reference section: full page width, entries in two columns. */
.ref-figure img { aspect-ratio: 21 / 8; object-fit: cover; object-position: center 40%; }
.ref-grid { display: grid; gap: var(--s-8) var(--s-12); }
@media (min-width: 900px) { .ref-grid { grid-template-columns: 1fr 1fr; } }
.ref-grid__item { padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.ref-grid__item h2 { margin-top: 0; }
.ref-grid__item p { margin-bottom: 0; }