/* Support Crew — Stone and cobalt. Buildless, mobile-first-friendly layout.
   Portfolio images stay in normal flow: their 3:2 frame matches the mockups,
   avoiding the floating image / empty canvas caused by absolute positioning. */
html {scroll-behavior:auto;}
body {margin:0;background:#f3f2ed;}
button,a {-webkit-tap-highlight-color:transparent;}
button {cursor:pointer;}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {outline:3px solid #274bb7;outline-offset:4px;}
.skip-link {position:absolute;left:20px;top:-80px;z-index:20;background:#fffefa;color:#2d333d;padding:10px 15px;}
.skip-link:focus {top:10px;}
.not-found {max-width:700px;margin:80px auto;padding:0 24px;font-family:Arial,sans-serif;color:#2d333d;}
.not-found h1 {font-size:36px;}
#supportcrew {--c-paper:#f3f2ed;--c-ink:#2d333d;--c-body:#555d65;--c-white:#fffefa;--c-sage:#ddded8;--c-sand:#e7e2d9;--c-line:#b1b5b5;--c-orange:#274bb7;color-scheme:light;color:var(--c-ink);background:var(--c-paper);font:400 16px/1.6 'Inter',Arial,sans-serif;max-width:1280px;margin:auto;padding:0 21px 40px;min-height:100vh;isolation:isolate;}
#supportcrew * {box-sizing:border-box;}
#supportcrew h1,#supportcrew h2,#supportcrew p {margin:0;color:inherit;font-family:inherit;}
#supportcrew button,#supportcrew input,#supportcrew textarea {font:inherit;}
#supportcrew [hidden] {display:none!important;}
/* Opaque sticky header stays readable over imagery. Native dialogs use the top
   layer and appear above it. Do not wrap the site in an overflow container. */
#supportcrew .c-header {position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 12px;background:var(--c-paper);border-bottom:1px solid var(--c-sand);margin-bottom:18px;}
#supportcrew .c-logo {font-size:28px;font-weight:600;letter-spacing:-1.5px;line-height:1;color:var(--c-ink);text-decoration:none;}
#supportcrew .c-nav button {border:0;border-radius:25px;background:var(--c-ink);color:var(--c-white);padding:8px 15px;font-size:14px;}
#supportcrew .c-cover {border-radius:28px;background:var(--c-sand);padding:20px;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:20px;}
#supportcrew .c-intro {background:var(--c-white);border-radius:21px;padding:32px 28px;}
#supportcrew .c-intro h1 {font-size:clamp(39px,4.5vw,57px);font-weight:500;letter-spacing:-2.2px;line-height:1.04;}
#supportcrew .c-intro p {font-size:17px;line-height:1.6;color:var(--c-body);max-width:315px;margin-top:20px;}
#supportcrew .c-primary {display:inline-flex;align-items:center;gap:26px;border:0;border-radius:30px;background:var(--c-orange);color:var(--c-white);padding:12px 18px;font-size:15px;margin-top:23px;}
#supportcrew .c-primary>span {font-size:21px;line-height:1;}
/* Each device and caption form one continuous rounded presentation. */
#supportcrew .c-hero-project,#supportcrew .c-second-project {min-width:0;overflow:hidden;border-radius:20px;background:var(--c-white);}
#supportcrew .c-cover-image,#supportcrew .c-application-image {display:block;position:static;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
#supportcrew .c-cover-image.is-contained,#supportcrew .c-application-image.is-contained {object-fit:contain;}
#supportcrew .c-lower {display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center;padding:36px 12px;}
#supportcrew .c-lower-copy h2,#supportcrew .c-scope h2 {font-size:32px;font-weight:500;line-height:1.12;letter-spacing:-1px;}
#supportcrew .c-lower-copy p {font-size:16px;color:var(--c-body);line-height:1.65;margin-top:17px;max-width:300px;}
/* Editorial scope, not a repeated three-card service grid. No extra enquiry CTA. */
#supportcrew .c-scope {display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;border-top:1px solid var(--c-line);margin:10px 12px 0;padding:42px 0 24px;}
#supportcrew .c-scope p {max-width:640px;color:var(--c-body);margin-bottom:16px;}
#supportcrew .c-scope .c-scope-note {color:var(--c-ink);margin-bottom:0;}
/* Contact and project dialogs share controls and native keyboard behaviour. */
#supportcrew dialog {width:min(520px,calc(100% - 32px));max-height:90vh;overflow:auto;padding:25px;background:var(--c-white);color:var(--c-ink);border:0;border-radius:20px;}
#supportcrew dialog::backdrop {background:#2d333d99;}
#supportcrew .c-modal-top {display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:23px;}
#supportcrew .c-modal-top h2 {font-size:28px;line-height:1.15;font-weight:500;letter-spacing:-.8px;}
#supportcrew .c-close {border:0;background:transparent;color:var(--c-ink);padding:4px;font-size:14px;text-decoration:underline;}
#supportcrew label {display:block;font-size:14px;margin-top:15px;}
#supportcrew input,#supportcrew textarea {display:block;width:100%;border:1px solid var(--c-line);border-radius:8px;padding:10px;background:var(--c-white);color:var(--c-ink);font-size:16px;line-height:1.5;margin-top:5px;}
#supportcrew textarea {resize:vertical;min-height:105px;}
#supportcrew .c-result {font-size:14px;line-height:1.5;white-space:pre-wrap;margin-top:15px;}
#supportcrew .contact-note {font-size:13px;line-height:1.55;color:var(--c-body);margin-top:13px;}
#supportcrew .contact-note a {color:var(--c-orange);text-underline-offset:3px;}
#supportcrew .c-text-link {background:transparent;border:0;border-bottom:1px solid var(--c-ink);color:var(--c-ink);padding:7px 0;margin-top:12px;font-size:14px;}
#supportcrew noscript p {padding:20px 12px;color:var(--c-body);}
@media(max-width:760px){
 #supportcrew {padding:0 14px 25px;}
 #supportcrew .c-header {padding:19px 4px;}
 #supportcrew .c-logo {font-size:25px;}
 #supportcrew .c-cover {grid-template-columns:1fr;padding:15px;gap:15px;border-radius:23px;}
 #supportcrew .c-intro {padding:28px 24px;}
 #supportcrew .c-intro h1 {font-size:clamp(40px,8vw,57px);}
 #supportcrew .c-intro p {max-width:390px;}
 #supportcrew .c-lower {grid-template-columns:1fr;padding:32px 4px;gap:24px;}
 #supportcrew .c-lower-copy p {max-width:560px;}
 #supportcrew .c-scope {grid-template-columns:1fr;gap:23px;margin:6px 4px 0;padding-top:30px;}
}
@media(max-width:350px){
 #supportcrew .c-logo {font-size:22px;}
 #supportcrew .c-nav button {font-size:12px;padding:8px 11px;}
 #supportcrew .c-intro {padding:25px 18px;}
 #supportcrew .c-intro h1 {font-size:38px;}
}

/* Continuous hero revision. The photo blends into stone rather than appearing
   as a separate white card. Captions describe work without suggesting a link. */
#supportcrew .c-cover {position:relative;overflow:hidden;display:flex;align-items:center;min-height:480px;padding:0;isolation:isolate;}
#supportcrew .c-intro {position:relative;z-index:1;width:46%;padding:42px 36px;background:transparent;border-radius:0;}
#supportcrew .c-hero-image {position:absolute;inset:0 0 0 43%;z-index:0;mask-image:linear-gradient(to right,transparent,black 18%);}
#supportcrew .c-hero-image .c-cover-image {width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
#supportcrew .c-project-caption {display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 16px;padding:13px 0;color:var(--c-body);font-size:13px;line-height:1.5;}
#supportcrew .c-project-caption strong {color:var(--c-ink);font-size:15px;font-weight:500;}
#supportcrew .c-hero-caption {justify-content:flex-end;padding-right:8px;}
#supportcrew .c-second-project {background:transparent;border-radius:0;overflow:visible;}
#supportcrew .c-second-project .c-application-image {border-radius:20px;}
#supportcrew .c-lower {padding-top:26px;}
@media(max-width:760px){
 #supportcrew .c-cover {display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0;}
 #supportcrew .c-intro {width:100%;padding:32px 26px 25px;}
 #supportcrew .c-hero-image {position:relative;inset:auto;mask-image:none;}
 #supportcrew .c-hero-image .c-cover-image {height:auto;aspect-ratio:3/2;object-fit:contain;}
 #supportcrew .c-hero-caption {justify-content:flex-start;padding:12px 4px;}
}

/* Neutral typography, quiet project baselines, and a minimal page ending.
   Captions remain ordinary text, never interactive controls. */
#supportcrew .c-logo {letter-spacing:-1.1px;}
#supportcrew .c-intro h1 {font-weight:500;letter-spacing:-2.4px;}
#supportcrew .c-project-caption {border-top:1px solid var(--c-line);margin-top:12px;padding:12px 0 0;font-size:12px;gap:4px 14px;}
#supportcrew .c-project-caption strong {font-size:13px;}
#supportcrew .c-hero-caption {width:57%;margin-left:auto;justify-content:flex-start;padding-right:0;}
#supportcrew .c-footer {display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--c-line);margin:38px 12px 0;padding:22px 0 0;font-size:12px;color:var(--c-body);}
#supportcrew .c-footer a {color:var(--c-ink);text-decoration:none;text-underline-offset:4px;}
#supportcrew .c-footer a:hover {text-decoration:underline;}
#supportcrew .c-footer a span {margin-left:8px;}
@media(max-width:760px){
 #supportcrew .c-hero-caption {width:100%;padding:12px 4px 0;}
 #supportcrew .c-footer {margin:30px 4px 0;gap:15px;}
}

/* Preserve the approved original wordmark; Inter is for page typography only. */
#supportcrew .c-logo {font-family:'Outfit',Arial,sans-serif;font-weight:600;letter-spacing:-1.5px;}