/* V38: a quieter introduction and project index. */
.v38 .v30-mission{display:block;width:calc((100% - 2 * var(--v30-gutter)) * .84);margin-inline:auto;padding:clamp(72px,4.5vw,120px) 0 0}
.v38 .v30-mission>.v30-eyebrow{display:flex;justify-content:space-between;align-items:baseline;padding:0;width:100%}
.v38 .v35-brand-intro{font-size:clamp(22px,1.1vw,32px);font-weight:500}
.v38 .v30-mission>.v30-eyebrow>span:last-child{font:550 clamp(16px,.85vw,24px)/1.4 var(--sans);letter-spacing:.025em;color:#111}
.v38 .v30-mission h2{width:100%;max-width:none;margin:32px 0 0;font:400 clamp(42px,4.4vw,130px)/1.18 var(--sans);letter-spacing:-.055em}
.v38 #mission-title>span:first-child,.v38 #mission-title>span:last-child{padding:0;margin:0;white-space:normal}
.v38 .v30-mission-note{width:min(100%,760px);max-width:none;margin:28px 0 0;padding:0}
.v38 .v30-mission-note p{font-size:clamp(18px,1vw,24px);line-height:1.7;margin:0;max-width:none;word-break:keep-all}
.v38 .v30-services{margin-top:clamp(52px,4vw,100px);padding-bottom:64px}
.v38 .v33-services-layout{margin-top:0}
/* Keep every service legible; draw one line across the active row. */
.v38 .v30-service-list a .v30-service-name,.v38 .v30-service-list:has(a:hover) a:not(:hover) .v30-service-name,.v38 .v30-service-list a:hover .v30-service-name,.v38 .v30-service-list a:focus-visible .v30-service-name,.v38 .v30-service-list a.is-previewing .v30-service-name{opacity:1;transform:none;transition:none}
.v38 .v30-service-list>a::after{content:"";position:absolute;left:32px;right:0;bottom:0;height:1px;background:#171717;transform:scaleX(0);transform-origin:left;transition:transform .28s ease;pointer-events:none}
.v38 .v30-service-list>a:hover::after,.v38 .v30-service-list>a:focus-visible::after{transform:scaleX(1)}
.v38 .v33-floating-contact{background:#fff;color:#111;border:1px solid #111;box-shadow:none}
.v38 .v33-floating-contact:hover{background:#f4f4f4;color:#111;transform:none}
/* Gutters keep neighboring projects separate, while row image heights still match. */
.v38 .v30-project-grid{margin-inline:var(--v30-gutter);column-gap:clamp(16px,1.1vw,32px);row-gap:clamp(42px,2.3vw,64px)}
.v38 .v30-card-info,.v38 .v30-card[data-slot] .v30-card-info{padding-inline:0}
/* A: colour outlines, black type, white interiors. */
.v38 #projects .v33-category,.v38 #projects .v30-filters>button[aria-pressed="true"] .v33-category{background:#fff;color:#171717;border:1.5px solid var(--category-bg);border-radius:0;font-weight:450}
.v38 #projects .v30-filters>button[aria-pressed="true"]{outline:none}
.v38 #projects .v30-filters>button[aria-pressed="true"] .v33-category{box-shadow:0 0 0 1px var(--category-bg);background:#fff;font-weight:600}
.v38 #projects .v30-filters>button[data-filter="all"][aria-pressed="true"]{border-color:#111;background:#fff;font-weight:600}
/* B: the same palette appears only as an underline. */
.v38[data-category-style="underline"] #projects .v33-category,.v38[data-category-style="underline"] #projects .v30-filters>button[aria-pressed="true"] .v33-category{border:0;border-bottom:2px solid var(--category-bg);border-radius:0;padding:6px 8px;background:transparent;box-shadow:none;color:#171717}
.v38[data-category-style="underline"] #projects .v30-filters>button[aria-pressed="true"] .v33-category{box-shadow:0 1px 0 var(--category-bg);font-weight:600}
.v38[data-category-style="underline"] .v33-project-categories{gap:8px 16px}
@media(max-width:1000px){.v38 .v30-mission{width:calc(100% - 2 * var(--v30-gutter))}.v38 .v30-mission h2{font-size:clamp(40px,5.4vw,56px)}}
@media(max-width:600px){
 .v38 .v30-mission{padding-top:56px}
 .v38 .v35-brand-intro{font-size:20px}
 .v38 .v30-mission>.v30-eyebrow>span:last-child{font-size:13px;letter-spacing:0}
 .v38 .v30-mission h2{font-size:8.2vw;line-height:1.25;margin-top:26px}
 .v38 .v30-mission-note{margin-top:22px}
 .v38 .v30-mission-note p{font-size:17px;line-height:1.7}
 .v38 .v30-services{margin-top:38px;padding-bottom:44px}
 .v38 .v30-service-list>a::after{left:24px}
 .v38 .v30-project-grid{row-gap:36px}
 .v38 #projects .v33-category{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.v38 .v30-service-list>a::after{transition:none}}

.v38 #projects .v30-filters>button,.v38 #projects .v30-filters>button[data-filter="all"]{border-radius:0}

/* Plain colour markers, aligned near the top of the service-name row. */
.v38 .v30-service-list .v34-service-number{align-self:start;grid-row:1;margin-top:5px;transform:none}
.v38 .v30-service-list>a>.v33-category{font-size:clamp(14px,.7vw,20px)}
@media(max-width:600px){.v38 .v30-service-list .v34-service-number{margin-top:3px}}

/* Give the category marker more breathing room before the service name. */
.v38 .v30-service-list>a,.v38 .v30-service-list>a:first-child{grid-template-columns:24px minmax(0,1fr) auto;column-gap:16px}
.v38 .v30-service-list>a::after{left:40px}
@media(max-width:600px){
 .v38 .v30-service-list>a,.v38 .v30-service-list>a:first-child{grid-template-columns:18px minmax(0,1fr) auto;column-gap:10px}
 .v38 .v30-service-list>a::after{left:28px}
}
@media(max-width:420px){.v38 .v30-service-list>a,.v38 .v30-service-list>a:first-child{grid-template-columns:18px minmax(0,1fr)}}

/* A true 16:9 service preview, with four comfortably spaced rows alongside. */
.v38 .v33-service-preview{aspect-ratio:16/9;height:auto;min-height:0;max-height:none;align-self:start}
@media(min-width:1001px){
 .v38 .v33-services-layout{grid-template-columns:32% minmax(0,1fr);column-gap:4%;align-items:stretch}
 .v38 .v30-service-list{display:flex;flex-direction:column;justify-content:center;align-self:center;gap:clamp(14px,.65vw,24px)}
 .v38 .v30-service-list>a,.v38 .v30-service-list>a:first-child,.v38 .v30-service-list>a:last-child{padding-block:3px;margin-top:0}
}
@media(min-width:601px) and (max-width:1000px){.v38 .v33-services-layout{grid-template-columns:32% minmax(0,1fr);align-items:center}}
/* Reduce gutters; use readable, inset captions to separate the work. */
.v38 .v30-project-grid{column-gap:clamp(8px,.55vw,16px);row-gap:clamp(21px,1.15vw,32px)}
.v38 .v30-card-info,.v38 .v30-card[data-slot] .v30-card-info{padding:18px clamp(12px,.75vw,24px) 8px;gap:16px}
.v38 .v30-card-info h3{font-size:clamp(18px,1vw,24px);line-height:1.4;margin-top:5px}
.v38 .v30-card-info>div:first-child>span{font-size:clamp(13px,.72vw,17px);line-height:1.5}
.v38 .v30-card-role{font-size:clamp(13px,.75vw,18px);line-height:1.55;max-width:none;margin-top:7px}
.v38 .v30-card .v30-card-year,.v38 .v30-card[data-slot] .v30-card-year{font-size:clamp(13px,.72vw,17px);line-height:1.5}
@media(min-width:601px){.v38 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-year{right:clamp(12px,.75vw,24px);top:18px}}
@media(max-width:600px){
 .v38 .v33-service-preview{width:100%;max-height:none;aspect-ratio:16/9}
 .v38 .v30-service-list>a,.v38 .v30-service-list>a:first-child,.v38 .v30-service-list>a:last-child{padding-block:10px}
 .v38 .v30-project-grid{row-gap:18px}
 .v38 .v30-card-info,.v38 .v30-card[data-slot] .v30-card-info{padding:16px 12px 8px}
}

/* A quiet raised surface for the persistent inquiry action. */
.v38 .v33-floating-contact{
 min-height:56px;padding-inline:27px;border:1px solid #171717;
 background:linear-gradient(180deg,#fff 0%,#fff 58%,#f2f2f0 100%);color:#111;
 font-weight:550;letter-spacing:-.02em;
 box-shadow:0 2px 3px #0000000d,0 8px 22px #0000001a,0 20px 44px #0000000f,inset 0 1px 0 #fff;
 transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.v38 .v33-floating-contact:hover{
 background:linear-gradient(180deg,#fff,#f6f6f4);color:#111;transform:translateY(-3px);
 box-shadow:0 3px 5px #0000000d,0 12px 28px #00000024,0 24px 48px #00000012,inset 0 1px 0 #fff;
}
.v38 .v33-floating-contact:active{transform:translateY(0) scale(.98);box-shadow:0 2px 7px #0000001a,inset 0 1px 3px #0000000d}
.v38 .v33-floating-contact:focus-visible{outline:2px solid #111;outline-offset:5px}
@media(max-width:600px){.v38 .v33-floating-contact{min-height:52px;padding-inline:23px}}
@media(prefers-reduced-motion:reduce){.v38 .v33-floating-contact{transition:none}.v38 .v33-floating-contact:hover,.v38 .v33-floating-contact:active{transform:none}}

/* Subtle project feedback, without scaling or shifting the photograph. */
.v38 .v30-card-media img{transition:filter .22s ease}
.v38 .v30-card-info{transition:background-color .22s ease}
.v38 .v30-card-info h3{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .22s ease}
.v38 .v30-card>a:focus-visible img{transform:none;filter:brightness(1.055)}
.v38 .v30-card>a:focus-visible .v30-card-info{background-color:#f4f4f2}
.v38 .v30-card>a:focus-visible h3{text-decoration-color:currentColor}
@media(hover:hover){
 .v38 .v30-card>a:hover img{transform:none;filter:brightness(1.055)}
 .v38 .v30-card>a:hover .v30-card-info{background-color:#f4f4f2}
 .v38 .v30-card>a:hover h3{text-decoration-color:currentColor}
}
@media(prefers-reduced-motion:reduce){.v38 .v30-card-media img,.v38 .v30-card-info,.v38 .v30-card-info h3{transition:none}}

/* Clean, unslashed numerals for project years. */
.v38 .v30-card .v30-card-year,.v38 .v30-card[data-slot] .v30-card-year{font-family:'Pretendard Variable','Helvetica Neue',Arial,sans-serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'zero' 0;letter-spacing:0}

/* Client names share the clean caption typography. */
.v38 .v30-card-info>div:first-child>span{font-family:'Pretendard Variable','Helvetica Neue',Arial,sans-serif;font-weight:500;letter-spacing:0;font-feature-settings:'zero' 0}

/* Give the hero division label a little more presence. */
.v38 .hero h1{font-size:26px;font-weight:600;padding:4px 12px 3px}
@media(max-width:600px){.v38 .hero h1{font-size:19px;padding:4px 11px 3px}}

/* Wide project captions use the same inset left alignment as other cards. */
.v38 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-info{display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;padding-inline:clamp(12px,.75vw,24px)}
.v38 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-role{margin-inline:0}
.v38 .v30-card:is([data-span="8"],[data-span="12"]) .v33-project-categories{justify-content:flex-start}
.v38 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-year{position:static;align-self:start;margin-top:0}

/* White landing background; KC Gray retained as a brand reference. */
html:has(body.v38:not(.contact-page)){background:#fff}
body.v38:not(.contact-page){--kc-gray:#ebebeb;background:#fff}
.v38:not(.contact-page) .site-nav,.v38:not(.contact-page) .site-nav .dmenu,.v38:not(.contact-page) .v33-footer,.v38:not(.contact-page) .v30-colophon{background:#fff}
.v38:not(.contact-page) .v30-search input,.v38:not(.contact-page) .v30-search select{background:transparent}
.v38:not(.contact-page) #projects .v33-category,.v38:not(.contact-page) #projects .v30-filters>button[aria-pressed="true"] .v33-category,.v38:not(.contact-page) #projects .v30-filters>button[data-filter="all"][aria-pressed="true"]{background:transparent}

/* Keep the inquiry action clear of the persistent shell's mobile view toggle. */
@media(max-width:860px){.v38 .v33-floating-contact{bottom:calc(66px + env(safe-area-inset-bottom,0px))}}

/* A phone's PC-view iframe is very tall after scaling. Keep the desktop
   hero's landscape composition instead of cropping it to a portrait screen. */
@media(min-width:861px) and (max-aspect-ratio:1/1){
 .v38 .hero{height:62.5vw;min-height:0}
}