/* Collection 04: content-led composition, with restrained interaction feedback. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); }
html { scrollbar-color:#80909a #eef1f3; }
.r4-arrow { width:22px; height:22px; flex-shrink:0; }
body button,body a { touch-action:manipulation; }
body :focus-visible { outline:3px solid #477bb0; outline-offset:5px; }
body .contact-section :focus-visible { outline-color:#fff; }
body .dialog { overscroll-behavior:contain; }
body .site-header .brand { letter-spacing:-.03em; }
body .v3-button { transition:background .2s, color .2s, box-shadow .2s; }
body .v3-button svg { transition:transform .3s var(--ease-out); }
body .v3-button:hover svg { transform:translateX(4px); }
body .text-link { gap:18px; }
body .project-card .card-open { transition:transform .4s var(--ease-out),background .2s; }
body .project-card:hover .card-open { transform:rotate(-35deg); }
body .contact-form label { font-size:14px; }
body .contact-form input,body .contact-form select,body .contact-form textarea { font-size:16px; }
body .form-status { color:inherit; }
/* Mason: a leading architectural project; supporting work stays easy to compare. */
body.mason #projects { padding-top:70px; }
body.mason #projects #mason-projects { display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start; }
body.mason #projects #mason-projects .project-card:first-child { grid-row:span 2; }
body.mason #projects #mason-projects .project-card:first-child img { height:650px; }
body.mason #projects #mason-projects .project-card:not(:first-child) img { height:250px; }
body.mason #projects #mason-projects .project-card h3 { font-weight:600; font-size:25px; }
body.mason #projects #mason-projects .project-card:first-child h3 { font-size:34px; }
body.mason #projects #mason-projects:has(.project-card[hidden]) { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.mason #projects #mason-projects:has(.project-card[hidden]) .project-card { grid-row:auto; }
body.mason #projects #mason-projects:has(.project-card[hidden]) .project-card img { height:400px; }
body.mason .mason-process .split { grid-template-columns:1fr; gap:40px; }
body.mason .mason-process .split>div:last-child { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
body.mason .process-row { grid-template-columns:35px 1fr; gap:20px 10px; }
body.mason .process-row p { grid-column:2; }
body.mason .v3-service-photos article>img { height:220px; }
/* Current: the person doing the job leads; service selection gets an immediate response. */
.r4-current-hero { background:#f6f4ed; }
.r4-current-hero>.wrap { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; padding-block:40px; }
.r4-current-copy h1 { font-size:clamp(46px,5.2vw,74px); font-weight:750; }
.r4-current-copy p { margin:25px 0 30px; font-size:16px; color:#43596c; max-width:40ch; }
.r4-current-promise { display:flex; gap:24px; margin-top:35px; font-size:12px; border-top:1px solid #cbd1d4; padding-top:20px; }
.r4-current-image { position:relative; }
.r4-current-image>img { width:100%; height:570px; object-position:55% center; border-radius:3px; }
.r4-photo-note { position:absolute; bottom:24px; right:-20px; padding:22px 28px; background:#fff; color:#172e47; font-size:14px; line-height:1.65; box-shadow:0 12px 24px #172e4714; }
.r4-photo-note strong { font-weight:650; }
body.current #services .grid-3 { gap:0; }
body.current .service-card { padding:30px 35px 10px; border-left:1px solid #dce3ea; }
body.current .service-card:first-child { padding-left:0; border-left:0; }
body.current .service-card h3 { margin-bottom:12px; }
body.current .service-card p { min-height:105px; }
body.current #how .split { grid-template-columns:.8fr 1.2fr; }
body.current .booking-strip strong { font-size:23px; }
/* Forge: a precisely drawn assembly connects the picture to practical outputs. */
body.forge .v3-forge-grid h1 { font-weight:750; font-size:clamp(52px,5.5vw,80px); }
body.forge .v3-forge-image { padding-bottom:0; }
body.forge .v3-forge-caption { right:0; left:0; bottom:0; background:#c9372df0; }
body.forge .capability-switch { grid-template-columns:.7fr 1.3fr; gap:35px; }
body.forge .capability-panel { position:relative; padding:32px; min-height:480px; }
.r4-blueprint { height:200px; position:relative; overflow:hidden; margin:-10px 0 25px; border-bottom:1px solid #c5cdd3; color:#697c8c; }
.r4-blueprint svg { height:200px; width:100%; }
.r4-blueprint span { position:absolute; left:0; bottom:12px; font-size:10px; }
body.forge .capability-panel h3 { margin-top:12px; font-size:32px; max-width:20ch; }
.r4-cap-outputs { display:flex; flex-wrap:wrap; gap:8px 25px; padding:20px 0 0; margin-top:20px; list-style:none; border-top:1px solid #c5cdd3; font-size:12px; color:#344655; }
.r4-cap-outputs li::before { content:'•'; margin-right:8px; color:#a62b24; }
body.forge .forge-strip { font-family:'DM Sans',sans-serif; text-transform:none; }
/* Form & Field: portfolio images get different scales, captions supply the rationale. */
body.agency .agency-work { grid-template-columns:1.2fr 1fr; gap:70px 55px; }
body.agency .agency-work .project-card:nth-child(even) { padding-top:110px; }
body.agency .agency-work .project-card:first-child img { aspect-ratio:1/1; }
body.agency .agency-work .project-card:nth-child(2) img { aspect-ratio:4/5; }
body.agency .agency-work .project-card h3 { font-size:38px; margin-top:25px; }
body.agency .r4-work-copy { font-size:15px; max-width:40ch; color:#494355; margin:12px 0; }
body.agency .agency-work .project-card .small { font-size:11px; color:#655c70; }
body.agency .v3-agency-art { transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out); }
body.agency .v3-agency-art:hover,body.agency .v3-agency-art:focus-visible { transform:rotate(0deg) translateY(-7px); box-shadow:0 22px 60px #0d09264d; }
body.agency .agency-services .split { gap:100px; }
/* Still: keep the calm room story; complete the decision-making information. */
.r4-buying { padding-block:65px 90px; display:grid; grid-template-columns:1fr 1.1fr; gap:100px; border-top:1px solid #cfd2c9; }
.r4-buying h2 { font-family:'Cormorant Garamond',serif; font-size:52px; }
.r4-buying>div>p { font-size:15px; color:#52604e; margin-top:22px; max-width:35ch; }
.r4-product-specs { font-variant-numeric:tabular-nums; }
body.still .r4-product-note { font-size:12px; margin-top:22px; color:#596151; }
body.still .product-grid .product-info h3 { font-family:'DM Sans',sans-serif; }
body.still .product-image { overflow:hidden; }
body.still .product-image img { transition:transform .7s var(--ease-out); }
body.still .product-image:hover img { transform:scale(1.035); }
/* Northline: an editorial business practice, with tangible engagement choices. */
body.northline { --paper:#f5f4ee; --ink:#262f2c; --accent:#c6532c; --muted:#5c655f; --line:#cfd3ca; background:#f5f4ee; color:#262f2c; }
body.northline .v3-header { background:#f5f4ee; color:#262f2c; }
body.northline .v3-mark { color:#b94824; }
body.northline .v3-button { background:#b94824; color:#fff; }
.r4-north-hero { padding-top:60px; }
.r4-north-heading { display:grid; grid-template-columns:1.5fr .7fr; gap:100px; align-items:end; margin-bottom:55px; }
body.northline .r4-north-heading h1 { font-size:clamp(54px,6vw,86px); font-weight:600; }
.r4-north-heading>div { padding-bottom:10px; }
.r4-north-heading p:first-child { font-size:21px; font-weight:600; margin-bottom:18px; }
.r4-north-heading p+p { font-size:15px; color:#5c655f; margin-bottom:30px; }
.r4-north-picture { display:grid; grid-template-columns:1.4fr 1fr; background:#e3e7da; }
.r4-north-picture>img { width:100%; height:340px; object-position:center 48%; }
.r4-north-picture>div { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:50px; font-family:'Cormorant Garamond',serif; font-size:48px; line-height:1.1; }
.r4-north-picture svg { width:85%; height:40px; color:#a94727; }
body.northline #expertise .section-head h2 { max-width:620px; }
body.northline .northline-capabilities h3 { font-size:29px; }
body.northline .northline-industries { background:#2b3832; color:#fff; --muted:#d6dfd7; }
body.northline .northline-industries p { color:#d6dfd7; }
body.northline .northline-industries .filter-bar button { color:#fff; border-color:#87958a; }
body.northline .northline-industries .filter-bar button[aria-pressed=true] { background:#e0e7d6; color:#26352b; border-color:#e0e7d6; }
body.northline .northline-industries .industry-panel h3 { font-family:'Cormorant Garamond',serif; font-size:46px; font-weight:500; }
.r4-engagements { display:grid; grid-template-columns:1fr 1.2fr; gap:100px; }
.r4-engagements>div>p { margin-top:25px; color:#5c655f; max-width:35ch; font-size:15px; }
.r4-engagement-list article { border-top:1px solid #bfc6ba; padding:25px 0 30px; }
.r4-engagement-list article:last-child { border-bottom:1px solid #bfc6ba; }
.r4-engagement-list h3 { font-size:29px; }
.r4-engagement-list p { margin:14px 0 18px; color:#5c655f; font-size:15px; }
.r4-engagement-list a { font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
body.northline .contact-section,body.northline .site-footer { background:#26392f; color:#fff; }
body.northline .contact-section .btn { background:#e0e7d6; color:#26352b; }
body.northline .insight-grid { gap:30px; }
body.northline .insight h3 { font-size:23px; margin-block:18px; }
/* Serein: a treatment menu with meaningful duration and a quiet portrait. */
.r4-ritual-layout { display:grid; grid-template-columns:.65fr 1.25fr; gap:75px; align-items:center; }
.r4-ritual-layout figure { margin:0; }
.r4-ritual-layout figure img { height:410px; width:100%; object-position:47% center; border-radius:150px 150px 0 0; }
.r4-ritual-layout figcaption { font-size:12px; font-style:italic; color:#536148; margin-top:18px; text-align:center; }
body.serein .ritual summary { grid-template-columns:1fr 100px 24px; }
body.serein .ritual summary>span:first-child { display:none; }
body.serein .ritual summary>span:nth-of-type(2) { display:block; font-family:'DM Sans',sans-serif; font-size:12px; color:#536148; }
body.serein .ritual h3 { font-size:34px; }
body.serein .ritual summary>i { font-style:normal; font-size:24px; transition:transform .25s var(--ease-out); }
body.serein .ritual[open] summary>i { transform:rotate(45deg); }
body.serein .ritual>div { padding:0 20px 25px 0; }
body.serein .contact-section .btn { background:#f4f3e9; color:#33432e; }
/* Relay: interactive architecture, not another row of generic service cards. */
.r4-systems { background:#eef2f4; color:#202e39; }
.r4-systems .section-head p { color:#526472; }
.r4-system-map { display:grid; grid-template-columns:1fr 70px 1fr 70px 1fr; align-items:center; margin-top:60px; }
.r4-system-map button { background:transparent; border:1px solid #acbcc6; padding:35px 20px; border-radius:12px; display:flex; flex-direction:column; align-items:center; color:#334d5c; transition:background .3s,color .3s,border-color .3s; }
.r4-system-map button[aria-pressed=true] { background:#243c4b; color:#fff; border-color:#243c4b; }
.r4-system-map svg { fill:none; stroke:currentColor; stroke-width:1.5; width:65px; height:65px; margin-bottom:22px; }
.r4-system-map button>span { font-size:27px; font-weight:600; }
.r4-system-map small { font-size:12px; margin-top:10px; }
.r4-connector { height:1px; background:#8094a0; position:relative; }
.r4-connector::after { content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid #8094a0; border-top:1px solid #8094a0; transform:rotate(45deg); }
.r4-system-description { display:grid; grid-template-columns:1fr 1.2fr; gap:24px 70px; border-top:1px solid #bfccd3; padding-top:35px; margin-top:45px; }
.r4-system-description h3 { font-size:30px; max-width:20ch; }
.r4-system-description p { font-size:16px; color:#526472; }
.r4-system-description a { grid-column:2; justify-self:start; }
@media(min-width:1000px) and (prefers-reduced-motion:no-preference) {
 .agency .v3-agency-art { animation:art-settle 1.1s var(--ease-out) both; }
 @keyframes art-settle { from {transform:rotate(11deg) translateY(15px)} to {transform:rotate(7deg) translateY(0)} }
}
@media(max-width:1050px) {
 .r4-north-heading { gap:40px; grid-template-columns:1.4fr 1fr; }
 .r4-current-hero>.wrap { gap:35px; }
 .r4-current-copy h1 { font-size:55px; }
 .r4-current-image>img { height:510px; }
 body.forge .capability-switch { grid-template-columns:.7fr 1fr; }
 .r4-ritual-layout { gap:40px; }
 body.serein .ritual h3 { font-size:28px; }
 .r4-buying,.r4-engagements { gap:45px; }
}
@media(max-width:760px) {
 body.mason #projects #mason-projects { gap:32px; grid-template-columns:1fr; }
 body.mason #projects #mason-projects .project-card:first-child { grid-row:auto; }
 body.mason #projects #mason-projects .project-card:first-child img { height:390px; }
 body.mason #projects #mason-projects .project-card:not(:first-child) img { height:250px; }
 body.mason #projects #mason-projects .project-card:first-child h3 { font-size:29px; }
 body.mason #projects #mason-projects:has(.project-card[hidden]) { grid-template-columns:1fr; }
 body.mason .mason-process .split>div:last-child { grid-template-columns:1fr; gap:0; }
 .r4-current-hero>.wrap { grid-template-columns:1fr; padding-block:30px 0; gap:30px; }
 .r4-current-copy h1 { font-size:48px; }
 .r4-current-copy p { font-size:16px; }
 .r4-current-image>img { height:350px; }
 .r4-photo-note { bottom:20px; right:0; padding:16px 20px; font-size:12px; }
 .r4-current-promise { margin-top:28px; }
 body.current .service-card { padding:25px 0; border:0; border-bottom:1px solid #dce3ea; }
 body.current .service-card p { min-height:0; }
 body.current #how .split { grid-template-columns:1fr; }
 body.forge .v3-forge-grid h1 { font-size:clamp(43px,13.5vw,53px); }
 body.forge .capability-switch { grid-template-columns:1fr; }
 body.forge .capability-tabs { display:flex; gap:0; }
 body.forge .capability-tabs button { flex:1; padding:18px 8px; font-size:13px; min-width:0; }
 body.forge .capability-tabs button span { display:none; }
 body.forge .capability-panel { min-height:0; padding:24px; }
 .r4-blueprint { height:160px; }
 .r4-blueprint svg { height:160px; }
 body.agency .agency-work { grid-template-columns:1fr; gap:45px; }
 body.agency .agency-work .project-card:nth-child(even) { padding-top:0; }
 body.agency .agency-work .project-card h3 { font-size:31px; }
 .r4-buying { grid-template-columns:1fr; gap:30px; padding-block:50px; }
 .r4-buying h2 { font-size:44px; }
 .r4-north-hero { padding-top:30px; }
 .r4-north-heading { grid-template-columns:1fr; gap:28px; margin-bottom:30px; }
 body.northline .r4-north-heading h1 { font-size:49px; }
 .r4-north-heading p:first-child { font-size:19px; }
 .r4-north-picture { grid-template-columns:1fr; }
 .r4-north-picture>img { height:270px; }
 .r4-north-picture>div { flex-direction:row; padding:25px; font-size:25px; gap:15px; align-items:center; }
 .r4-north-picture svg { width:50px; }
 .r4-engagements { grid-template-columns:1fr; gap:35px; }
 body.northline .northline-industries .industry-panel h3 { font-size:38px; }
 .r4-ritual-layout { grid-template-columns:1fr; gap:35px; }
 .r4-ritual-layout figure { max-width:240px; margin-inline:auto; }
 .r4-ritual-layout figure img { height:280px; }
 body.serein .ritual summary { grid-template-columns:1fr 24px; gap:8px; }
 body.serein .ritual summary>span:nth-of-type(2) { grid-row:2; grid-column:1; }
 body.serein .ritual summary>i { grid-column:2; grid-row:1; }
 .r4-system-map { grid-template-columns:1fr; margin-top:30px; }
 .r4-system-map button { padding:20px; display:grid; grid-template-columns:50px 1fr; text-align:left; gap:5px 18px; }
 .r4-system-map svg { grid-row:span 2; width:45px; height:45px; margin:0; }
 .r4-system-map button>span { font-size:23px; }
 .r4-system-map small { margin:0; }
 .r4-connector { width:1px; height:25px; margin:auto; }
 .r4-connector::after { right:-3px; top:auto; bottom:0; transform:rotate(135deg); }
 .r4-system-description { grid-template-columns:1fr; gap:18px; }
 .r4-system-description h3 { font-size:29px; }
 .r4-system-description a { grid-column:1; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.r4-product-specs { margin-top:24px; border-top:1px solid #ccd2c5; }
.r4-product-specs>div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #ccd2c5; font-size:14px; }
.r4-product-specs dt { color:#596151; }
.r4-product-specs dd { margin:0; text-align:right; }
/* Keep white action labels above 4.5:1 on the automation red. */
body.relay .v3-button,body.relay .contact-section .btn { background:#c4372c; color:#fff; }