.work-document { scroll-behavior: auto; }
.work-page { background: var(--paper); }
.work-page .site-header { max-width: 1240px; }
.work-page .brief-link { gap: 1.25rem; }
.work-page .container { max-width: 1240px; }
.work-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 3rem; align-items: center; }
.work-hero h1 { font-size: clamp(3rem, 4.65vw, 4.45rem); line-height: 1.06; letter-spacing: -.04em; margin: 1.2rem 0 1.6rem; }
.work-page em { font-weight: inherit; color: #416b54; }
.work-lead { color: var(--muted); font-size: 1.12rem; max-width: 43ch; }
.work-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.work-text-link { display: inline-flex; align-items: center; gap: .9rem; font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #acb9ad; }
.work-text-link:hover { text-decoration-color: currentColor; }
.work-location { font-size: .77rem; color: var(--muted); margin-top: 2rem; }
.work-proof-preview { margin: 0; padding: 1.5rem 1.7rem 1.1rem; border: 1px solid #dce3d7; border-radius: 22px; background: #e9eee3; overflow: hidden; }
.work-proof-preview figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.work-proof-preview .eyebrow { font-size: .59rem; letter-spacing: .11em; }
.work-live { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .67rem; font-weight: 600; }
.work-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #357146; }
.work-preview-title { display: flex; align-items: center; gap: .75rem; margin-top: 1.6rem; }
.work-preview-title strong { font-size: 1.25rem; display: block; line-height: 1.4; }
.work-preview-title span { display: block; color: var(--muted); font-size: .72rem; }
.work-banner-window { margin: 1.4rem 0 .7rem; overflow: hidden; border-radius: 18px; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.work-banner-belt { display: flex; width: max-content; animation: work-banner-drift 36s linear infinite; animation-play-state: paused; }
.work-banner[data-running="true"] .work-banner-belt { animation-play-state: running; }
.work-banner-group { display: flex; gap: 14px; padding-right: 14px; }
.work-banner-group img { display: block; width: 140px; height: auto; border: 1px solid #bac9b6; border-radius: 15px; }
.work-banner-caption { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; color: #41604a; font-size: .63rem; }
.work-banner-caption button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .65rem; border: 1px solid #bac9b6; border-radius: 20px; background: transparent; color: var(--brand); font: 500 .63rem var(--font-ui); white-space: nowrap; cursor: pointer; }
.work-banner-caption button[hidden] { display: none; }
@keyframes work-banner-drift { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .work-banner-window:hover .work-banner-belt { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .work-banner .work-banner-belt { animation: none; } .work-banner-caption button { display: none; } }
.work-preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #cfd9c9; padding-top: 1rem; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.work-preview-caption a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #bac9b6; border-radius: 50%; color: var(--brand); font-size: 1.3rem; }
.work-offer { display: grid; grid-template-columns: 1fr 1.35fr; gap: 6rem; padding-block: 4.7rem 6rem; border-top: 1px solid var(--line-strong); }
.work-page h2 { font-size: clamp(2.15rem, 3.6vw, 3.15rem); line-height: 1.12; letter-spacing: -.035em; }
.work-section-intro h2 { margin: 1.15rem 0; }
.work-section-intro > p:last-child { max-width: 31ch; color: var(--muted); font-size: .96rem; }
.work-offer-list article { display: flex; gap: 1.4rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line-strong); }
.work-offer-list article:first-child { padding-top: 0; }
.work-number { font-size: .76rem; color: var(--muted); padding-top: .2rem; }
.work-offer-list h3 { font-family: var(--font-ui); font-size: 1.1rem; letter-spacing: -.025em; line-height: 1.4; }
.work-offer-list p { font-size: .9rem; color: var(--muted); margin-top: .65rem; }
.work-examples { display: block; margin-top: .8rem; color: #41604a; font-size: .72rem; }
.work-commitments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.work-commitments > div { border-top: 1px solid var(--line-strong); padding-block: 1.1rem; }
.work-commitments span { color: var(--muted); font-size: .68rem; }
.work-commitments p { margin-top: .4rem; font-size: .9rem; font-weight: 500; }
.work-case { display: grid; grid-template-columns: 1fr 1fr; gap: 2.7rem 4.5rem; align-items: center; padding-block: 4rem 5rem; scroll-margin-top: 90px; }
.work-case-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 3rem; }
.work-case-heading h2 { margin-top: .9rem; }
.work-case-heading > p { max-width: 40ch; color: var(--muted); font-size: .96rem; }
.work-case-visual { margin: 0; min-width: 0; }
.work-case-visual video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 22px; background: #0b2a26; }
.work-case-visual figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; margin-top: .6rem; font-size: .75rem; color: var(--muted); }
.work-case-visual figcaption a { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.work-case-product { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-strong); }
.work-case-product h3 { font: 600 1.25rem/1.4 var(--font-ui); letter-spacing: -.02em; }
.work-case-product p { font-size: .75rem; color: var(--muted); }
.work-case-product > .work-live { margin-left: auto; }
.work-case-story { margin: 1.3rem 0; display: grid; gap: 1rem; }
.work-case-story dt { font-size: .74rem; font-weight: 600; }
.work-case-story dd { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.work-case-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.work-gallery { grid-column: 1 / -1; min-width: 0; padding-top: 1rem; scroll-margin-top: 90px; }
.work-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.work-gallery-heading h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: .6rem; letter-spacing: -.025em; }
.work-gallery-heading p:last-child { margin-top: .6rem; color: var(--muted); font-size: .8rem; }
.work-gallery-controls { display: flex; gap: .5rem; flex-shrink: 0; }
.work-gallery-controls[hidden] { display: none; }
.work-gallery-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #bac9b6; border-radius: 50%; background: transparent; color: var(--brand); font-size: 1.25rem; cursor: pointer; }
.work-gallery-controls button:active:not(:disabled) { background: #e9eee3; }
.work-gallery-controls button:disabled { opacity: .35; cursor: default; }
.work-gallery-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: #8caa94 #e9eee3; scrollbar-width: thin; padding: .3rem .3rem 1rem; scroll-padding-inline: .3rem; }
.work-gallery-track figure { flex: 0 0 26%; min-width: 0; margin: 0; scroll-snap-align: start; }
.work-gallery-track a { display: block; border: 1px solid #cfd9c9; border-radius: 20px; overflow: hidden; background: #f6f7fb; }
.work-gallery-track img { display: block; width: 100%; height: auto; }
.work-gallery-track figcaption { padding: 1rem .2rem .3rem; }
.work-gallery-track figcaption span { display: block; font-size: .68rem; color: var(--muted); }
.work-gallery-track figcaption strong { display: block; margin-top: .4rem; font-size: .9rem; font-weight: 500; }
@media (max-width: 760px) {
  .work-gallery-heading { align-items: start; gap: .8rem; }
  .work-gallery-heading p:last-child { font-size: .85rem; }
  .work-gallery-controls { margin-top: 1.8rem; }
  .work-gallery-track { gap: 1rem; }
  .work-gallery-track figure { flex-basis: min(72%, 250px); }
}
.work-platforms { display: flex; flex-wrap: wrap; gap: .6rem; }
.work-platforms span { padding: .25rem .65rem; border: 1px solid var(--line-strong); border-radius: 5px; font-size: .67rem; }
.work-approach { padding-block: 4.5rem; background: #123c35; color: #e4ece3; scroll-margin-top: 90px; }
.work-approach .eyebrow { color: #c2d0bd; }
.work-approach h2, .work-approach h3 { color: #faf9f5; }
.work-approach-head { display: flex; justify-content: space-between; align-items: end; gap: 3rem; }
.work-approach-head h2 { margin-top: 1rem; }
.work-approach-head > p { max-width: 34ch; color: #c6d5cb; font-size: .94rem; }
.work-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; list-style: none; margin: 3rem 0 0; padding: 0; }
.work-steps li { border-top: 1px solid #507267; padding-top: 1.2rem; }
.work-steps li > span { font-size: .67rem; letter-spacing: .05em; color: #bfd1bd; }
.work-steps h3 { font-size: 1.4rem; margin: 1.2rem 0 .7rem; }
.work-steps p { font-size: .86rem; color: #c6d5cb; }
.work-enquiry { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6rem; padding-top: 6rem; padding-bottom: 5rem; scroll-margin-top: 95px; }
.work-enquiry-copy h2 { margin: 1rem 0 1.5rem; }
.work-enquiry-copy > p:not(.eyebrow) { color: var(--muted); max-width: 34ch; font-size: .94rem; }
.work-after-brief { margin-top: 2rem; }
.work-after-brief h3 { font: 600 .8rem/1.5 var(--font-ui); letter-spacing: 0; }
.work-after-brief ol { list-style: none; counter-reset: next-step; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.work-after-brief li { position: relative; padding-left: 2rem; counter-increment: next-step; }
.work-after-brief li::before { content: counter(next-step, decimal-leading-zero); position: absolute; left: 0; top: .15rem; color: #416b54; font-size: .7rem; }
.work-after-brief strong { display: block; font-size: .82rem; font-weight: 600; }
.work-after-brief li span { display: block; color: var(--muted); font-size: .8rem; margin-top: .2rem; max-width: 35ch; }
.work-email-note { margin-top: 2.7rem; }
.work-email-note a { color: var(--brand); display: inline-block; font-weight: 600; margin-top: .3rem; text-decoration: underline; text-underline-offset: 4px; }
.work-support-note { margin-top: 1.5rem; }
.work-support-note a, .work-consent a, .work-faq a, .work-form-status a { text-decoration: underline; text-underline-offset: 3px; }
.work-form { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 2rem; display: grid; gap: 1.25rem; box-shadow: 0 12px 40px -30px #0d3b3a44; }
.work-form-heading { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: .62rem; letter-spacing: .08em; color: var(--muted); }
.work-form-heading span:last-child { letter-spacing: 0; }
.work-form label { display: block; font-size: .875rem; font-weight: 600; }
.work-optional { font-size: .65rem; font-weight: 400; color: var(--muted); margin-left: .25rem; }
.work-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.work-form input:not([type="checkbox"]), .work-form select, .work-form textarea { width: 100%; min-width: 0; display: block; margin-top: .45rem; font: 400 1rem/1.5 var(--font-ui); color: var(--ink); border: 1px solid #879487; border-radius: 7px; padding: .8rem; background: #fdfdfb; }
.work-form select { min-height: 47px; }
.work-form textarea { resize: vertical; min-height: 125px; }
.work-form input::placeholder, .work-form textarea::placeholder { color: #69746b; opacity: 1; }
.work-field-help { display: block; margin-top: .45rem; color: var(--muted); font-size: .78rem; font-weight: 400; }
.work-form .work-consent { display: flex; align-items: flex-start; gap: .75rem; font-size: .8rem; line-height: 1.65; color: var(--muted); font-weight: 400; }
.work-consent input { accent-color: var(--brand); width: 17px; height: 17px; flex-shrink: 0; margin: .15rem 0 0; }
.work-form .btn { width: 100%; justify-content: space-between; border-radius: 8px; font-size: .88rem; }
.work-form .btn:disabled { cursor: wait; opacity: .6; transform: none; }
.work-form-status { min-height: 1.65em; overflow-wrap: anywhere; }
.work-form-status { font-size: .84rem; color: var(--brand); }
.work-form-status[data-state="error"] { color: #a02b20; }
.work-form-footnote { font-size: .75rem; line-height: 1.6; color: var(--muted); text-align: center; }
.work-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.work-faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6rem; border-top: 1px solid var(--line-strong); padding-top: 3.5rem; padding-bottom: 3rem; }
.work-faq h2 { font-size: 2rem; }
.work-faq details { border-bottom: 1px solid var(--line-strong); }
.work-faq summary { cursor: pointer; font-size: .9rem; font-weight: 500; padding: 1rem 1.7rem 1rem 0; }
.work-faq details:first-child summary { padding-top: 0; }
.work-faq details p { color: var(--muted); font-size: .86rem; padding-bottom: 1rem; }
.work-footer { margin-top: 2rem; padding-block: 2.5rem 1.5rem; }
.work-footer > .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.work-footer p { font-size: .75rem; color: var(--muted); margin-top: .6rem; }
.work-footer nav { display: flex; gap: 1.5rem; font-size: .8rem; }
.work-footer .work-copyright { width: 100%; margin: 0; border-top: 1px solid var(--line); padding-top: 1rem; font-size: .68rem; }
@media (max-width: 1000px) { .work-hero { gap: 2rem; } .work-hero h1 { font-size: 3.3rem; } .work-offer, .work-enquiry, .work-faq { gap: 3rem; } .work-case { gap: 2.5rem; } .work-proof-preview { padding-inline: 1.2rem; } .work-proof-preview figcaption { flex-wrap: wrap; gap: .4rem; } }
@media (max-width: 760px) { .work-page .site-header { padding-left: .75rem; gap: .5rem; } .work-page .site-header > .btn { font-size: .75rem; padding: .65rem .9rem; min-height: 42px; gap: .5rem; } .work-page .brand-lockup .name { font-size: 1rem; } .work-page .brand-lockup img { width: 28px; height: 28px; } .work-hero { grid-template-columns: 1fr; padding-top: 3rem; gap: 2.7rem; padding-bottom: 3rem; } .work-hero h1 { font-size: clamp(2.7rem, 8.5vw, 3.8rem); max-width: 16ch; } .desktop-break { display: none; } .work-lead { font-size: 1rem; } .work-hero-actions { gap: 1rem; } .work-hero-actions > .btn { font-size: .85rem; } .work-location { margin-top: 1.4rem; } .work-proof-preview { max-width: 520px; width: 100%; } .work-proof-preview figcaption { flex-wrap: nowrap; } .work-offer, .work-case, .work-enquiry, .work-faq { grid-template-columns: 1fr; gap: 2rem; } .work-offer { padding-block: 3rem; } .work-section-intro > p:last-child { max-width: 45ch; } .work-case { padding-bottom: 3rem; } .work-approach { padding-block: 3rem; } .work-approach-head { display: block; } .work-approach-head > p { margin-top: 1.5rem; max-width: 45ch; } .work-steps { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2rem; } .work-steps h3 { margin-top: .7rem; } .work-enquiry { padding-top: 3.5rem; padding-bottom: 3rem; }  .work-email-note { margin-top: 1.2rem; } .work-form { padding: 1.4rem; } .work-faq { padding-top: 2.5rem; } }
@media (max-width: 420px) { .work-field-pair { grid-template-columns: 1fr; } .work-page .brand-lockup { gap: .35rem; } .work-page .brand-lockup .name { font-size: .9rem; } .work-page .site-header > .btn { font-size: .68rem; } .work-proof-preview .eyebrow { font-size: .54rem; } .work-live { font-size: .59rem; } }

/* Keep the first brief short; let visitors add qualification details when ready. */
.work-required-note { color: var(--muted); font-size: .8rem; }
.work-field-error { display: block; min-height: 1.4em; margin-top: .35rem; font-size: .78rem; line-height: 1.4; font-weight: 400; color: #a02b20; }
#project-consent-error:empty { display: none; }
.work-form [aria-invalid="true"] { border-color: #a02b20; }
.work-form input, .work-form textarea, .work-optional-details, .work-form-status { scroll-margin-block: 110px 30px; }
.work-form .work-consent { min-height: 44px; cursor: pointer; }
.work-optional-details { border-block: 1px solid var(--line); }
.work-optional-details > summary { min-height: 48px; padding-block: .8rem; cursor: pointer; font-size: .85rem; font-weight: 500; }
.work-optional-details > summary > span { float: right; font-size: .75rem; color: var(--muted); font-weight: 400; }
.work-optional-fields { display: grid; gap: 1.25rem; padding-block: .5rem 1.3rem; }
.work-page .work-text-link, .work-footer nav a { min-height: 44px; }
.work-footer nav a { display: inline-flex; align-items: center; }
.work-footer nav { flex-wrap: wrap; }
.work-page .btn { transition: transform 160ms cubic-bezier(.23,1,.32,1), background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.work-page .btn:active:not(:disabled) { transform: scale(.98); }
.work-page .btn:focus-visible { transition: none; transform: none; }
.work-page .btn:disabled { cursor: default; }
.work-form[aria-busy="true"] .btn { cursor: wait; }
.work-form .btn:hover { transform: none; }
.work-form select:disabled, .work-form input:disabled, .work-form textarea:disabled { opacity: .75; cursor: wait; }
@media (hover: none), (pointer: coarse) { .work-page .btn:hover { transform: none; box-shadow: var(--shadow-sm); } }
@media (prefers-reduced-motion: reduce) { .work-page .btn { transition: none; } .work-page .btn:active:not(:disabled), .work-page .btn:hover { transform: none; } }
@media (max-width: 760px) {
  .work-lead, .work-offer-list p, .work-section-intro > p:last-child, .work-case-copy > p:not(.eyebrow), .work-approach-head > p, .work-steps p, .work-enquiry-copy > p:not(.eyebrow), .work-faq details p { font-size: 1rem; }
  .work-faq summary { font-size: 1rem; }
  .work-page .site-header > .btn { font-size: .8rem; min-height: 44px; }
  .work-hero h1 { max-width: none; }
}

.work-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding-block: 4rem 0; }
.work-fit h2 { margin-block: 1rem; }
.work-fit > div > p:last-child { max-width: 42ch; color: var(--muted); font-size: .94rem; }
.work-fit aside { align-self: center; padding: 2rem; border: 1px solid #cfd9c9; border-radius: 18px; background: #e9eee3; }
.work-fit aside h3 { font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; }
.work-fit aside p { margin-block: .7rem 1rem; font-size: .9rem; color: var(--muted); }
@media (max-width: 1000px) { .work-case-heading { gap: 2rem; } .work-fit { gap: 3rem; } }
@media (max-width: 760px) {
  .work-commitments { grid-template-columns: 1fr; gap: 0; }
  .work-commitments > div { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1rem; align-items: center; }
  .work-commitments p { margin: 0; font-size: .88rem; }
  .work-case { padding-block: 3rem; }
  .work-case-heading { display: block; }
  .work-case-heading > p { margin-top: 1rem; font-size: 1rem; }
  .work-case-story dd { font-size: 1rem; }
  .work-case-product p { font-size: .75rem; }
  .work-fit { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 3rem; }
  .work-fit > div > p:last-child, .work-fit aside p { font-size: 1rem; }
  .work-fit aside { padding: 1.5rem; }
  .work-after-brief { margin-top: 1.5rem; }
  .work-after-brief li span { max-width: none; font-size: .85rem; }
}