/* Readable captions and controls on every template. */
:root{--muted:#525e66}
body{font-size:17px}
.site-header{background:#fff}
.header-inner{gap:26px}
.main-nav{gap:25px;font-size:16px}
.header-contact .email{font-size:16px}
.eyebrow,.section-heading .eyebrow,.approach-section .eyebrow,.contact-section .eyebrow,.case-hero .eyebrow{font-size:14px;letter-spacing:.105em}
.hero-note,.proof-item p,.hero-project-detail,.micro-label,.project-meta,.letter-date,.service-number,.article-kicker,.case-sidebar .eyebrow,.result-note,.case-key-results p,.light-link small{font-size:15px}
.drawing-label{font-size:14px;letter-spacing:.035em}
.hero-coordinate{display:none}
.hero-description,.section-intro,.approach-copy,.contact-section h2+p{font-size:18px}
.button,.text-link,.service-link .service-tag,.case-link,.letter-card .text-link,.back-projects a,.light-link,.contact-person span,.contact-location,.contact-email button,.lightbox-close{font-size:16px}
.service p,.project-card p,.letter-card p,.how-grid p{font-size:17px;line-height:1.7}
.how-grid h3{font-size:21px;line-height:1.25}
.how-grid li>span{font-size:15px}
.case-tags a,.breadcrumb,.case-filters label,.results-count,.gallery-caption,.gallery-counter,.lightbox-caption,.lightbox-title,.footer-inner,.back-projects span{font-size:15px}
.case-tags a{padding:7px 11px}
.case-sidebar{font-size:16px}
.case-hero-figure figcaption{font-size:14px;max-width:175px;background:#f3f5f6e8;padding:4px 7px}
.contact-email button{min-height:44px;padding-inline:7px}
.contact-email{flex-wrap:wrap}
.lightbox-close{min-height:44px}
.footer-inner{gap:20px;flex-wrap:wrap}
.footer-inner a{padding-block:8px}
.letter-card{padding-right:102px;min-height:290px}
.letter-thumb{width:78px;height:112px}
.letter-card .text-link{min-height:44px}
.company-name{line-height:1.3}
.how-grid p{max-width:280px}
.reviews-directory{padding-bottom:85px}
.gallery-disclosure{font-size:15px;line-height:1.65;margin:0 0 20px}
.page:has(.reviews-directory) .standard-content:empty{display:none}
#reviews{scroll-margin-top:0}

/* The same illustration changes from a quiet CAD silhouette to colour. */
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service.service-illustrated{--service-surface:#fff;isolation:isolate;overflow:hidden;padding:28px;min-height:400px;background:var(--service-surface);transition:background .25s,border-color .25s}
.service.service-illustrated::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.12) 70px,rgba(255,255,255,.88) 160px,var(--service-surface) 240px)}
.service-visual{position:absolute;inset:0 0 auto;height:230px;z-index:-2;pointer-events:none}
.service-visual img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1);opacity:.38;transform:scale(1);transition:filter .45s ease,opacity .45s ease,transform .6s ease}
.service-illustrated .service-number{position:static;margin-bottom:91px;align-self:flex-start;font-size:15px;color:#49565e}
.service-illustrated h3{font-size:23px;line-height:1.25;max-width:340px;margin-bottom:15px;text-wrap:balance}
.service-illustrated p{max-width:360px}
.service-illustrated .service-tag{padding-top:23px;margin-top:auto;line-height:1.45;min-height:44px}
.service-illustrated:focus-visible{--service-surface:#f4f6f7;outline:3px solid #2275ad;outline-offset:-4px}
.service-illustrated:focus-visible .service-visual img{filter:grayscale(0);opacity:.96;transform:scale(1.055)}
@media(hover:hover) and (pointer:fine){
  .service.service-illustrated:hover{--service-surface:#f4f6f7;border-color:#b8c2c8}
  .service-illustrated:hover .service-visual img{filter:grayscale(0);opacity:.96;transform:scale(1.055)}
  .service-illustrated:hover .service-tag{color:#903c09}
}
@media(hover:none){.service-visual img{filter:grayscale(.2);opacity:.65}}

/* Native disclosure controls work with a mouse, touch, keyboard and without JS. */
details.engineering-step{display:block;padding:0;min-height:0;border:0;border-bottom:1px solid #566169;background:transparent;margin:0}
details.engineering-step summary{display:grid;grid-template-columns:26px minmax(0,1fr) 22px;gap:18px;align-items:center;list-style:none;cursor:pointer;padding:22px 18px;min-height:76px}
details.engineering-step summary::-webkit-details-marker{display:none}
details.engineering-step summary::marker{content:""}
details.engineering-step summary:hover{background:#ffffff09}
details.engineering-step summary:focus-visible{outline:3px solid #8dbfea;outline-offset:-3px}
details.engineering-step .step-number{font-size:15px;color:#bac6ce;font-variant-numeric:tabular-nums}
details.engineering-step strong{font-size:20px;font-weight:550;line-height:1.35}
details.engineering-step>p{font-size:16px;line-height:1.65;padding:0 58px 24px 62px;color:#d3dae0;margin:0}
.step-toggle{width:18px;height:18px;position:relative}
.step-toggle::before,.step-toggle::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.step-toggle::before{width:16px;height:2px;left:1px;top:8px}
.step-toggle::after{width:2px;height:16px;left:8px;top:1px}
details.engineering-step[open]{background:var(--orange);color:#20272b;border-color:var(--orange)}
details.engineering-step[open] summary{padding-bottom:10px}
details.engineering-step[open] .step-number,details.engineering-step[open]>p{color:#332b23}
details.engineering-step[open] .step-toggle::after{display:none}

@media(max-width:1100px){
  .approach-grid,.contact-grid{gap:54px}
  .hero-actions{gap:22px;flex-wrap:wrap}
  .letters-grid{grid-template-columns:1fr;gap:30px}
  .letter-card{min-height:200px;padding-right:135px}
  .letter-thumb{width:94px;height:133px}
  .letter-card p{max-width:680px}
}
@media(max-width:1040px){
  .header-inner{position:relative;min-height:86px;gap:25px}
  .brand{width:180px}
  .header-contact{margin-left:auto}
  .header-contact .phone{font-size:17px}
  .header-contact .email{font-size:15px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;flex-shrink:0;width:44px;height:44px;padding:10px;border:0;background:none}
  .menu-toggle span{width:24px;height:2px;background:var(--ink)}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:12px 22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 22px #20272b12;font-size:18px}
  .main-nav.is-open{display:flex}
  .main-nav a{padding:12px 0;min-height:48px}
  .main-nav a:after{display:none}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service.service-illustrated{padding:26px;min-height:410px}
  .proof-item{gap:16px;padding-inline:20px}
  .proof-word{font-size:19px}
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media(max-width:760px){
  .eyebrow,.section-heading .eyebrow,.approach-section .eyebrow,.contact-section .eyebrow,.case-hero .eyebrow{font-size:14px}
  .hero-description,.section-intro,.approach-copy,.contact-section h2+p,.article-block p,.wp-content{font-size:17px}
  .hero-note,.proof-item p,.hero-project-detail,.micro-label,.letter-date,.project-meta,.article-kicker,.case-key-results p,.light-link small,.gallery-caption,.gallery-counter,.breadcrumb,.case-tags a,.footer-inner{font-size:14px}
  .hero-actions .text-link,.hero-actions .button,.mobile-contact a,.letter-card .text-link,.case-link,.back-projects a{font-size:16px}
  .hero-project strong{font-size:20px;line-height:1.3}
  .hero-project{padding:18px;align-items:center}
  .micro-label{margin-bottom:5px}
  .drawing-label{font-size:14px;flex-wrap:wrap;gap:8px;line-height:1.5}
  .hero-model{padding-bottom:125px}
  .hero-visual{min-height:410px}
  .hero-project-detail{font-size:14px}
  .hero-project .round-arrow{width:34px;height:34px}
  .service p,.project-card p,.letter-card p,.how-grid p{font-size:17px}
  .proof-strip{grid-template-columns:1fr;gap:0}
  .proof-item,.proof-item:nth-child(2),.proof-item:first-child,.proof-item:last-child{border:0;padding:18px 0}
  .proof-item+.proof-item{border-top:1px solid var(--line)}
  .proof-item:nth-child(2){display:flex;align-items:center;gap:20px}
  .proof-item:nth-child(2)>strong{max-width:140px;white-space:normal}
  .proof-link>div{gap:24px}
  .proof-word{font-size:20px}
  .proof-number{font-size:46px}
  .case-key-results{grid-template-columns:1fr;padding-block:8px;gap:0}
  .case-key-results>div,.case-key-results>div:first-child{border-left:0;padding:18px 0;display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:20px}
  .case-key-results>div+div{border-top:1px solid var(--line)}
  .case-key-results strong{font-size:28px}
  .case-key-results p{margin:0}
  .case-sidebar{font-size:15px}
  .case-hero-figure{padding-bottom:62px}
  details.engineering-step summary{grid-template-columns:23px minmax(0,1fr) 18px;gap:13px;padding:21px 15px}
  details.engineering-step strong{font-size:19px}
  details.engineering-step>p{font-size:16px;padding:0 31px 23px 51px}
  .contact-person{font-size:21px}
  .contact-person span,.contact-location,.contact-email button{font-size:16px}
  .contact-phone{font-size:clamp(26px,6.8vw,38px)}
  .contact-email a{font-size:28px}
  .contact-email button{min-width:104px}
  .how-grid h3{font-size:21px}
  .letter-card{padding-right:103px;min-height:235px}
  .letter-thumb{width:78px;height:112px}
  .lightbox-title,.lightbox-caption,.back-projects span{font-size:14px}
  .lightbox-toolbar{gap:10px}
  .mobile-contact a{min-height:46px;padding-inline:8px}
  .footer-inner{gap:13px 25px;line-height:1.6}
  .reviews-directory{padding-bottom:60px}
}
@media(max-width:600px){
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:2px 16px;padding-block:10px;min-height:110px}
  .brand{width:163px;grid-column:1;grid-row:1}
  .menu-toggle{grid-column:2;grid-row:1}
  .header-contact{grid-column:1/-1;grid-row:2;margin:0;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .header-contact .phone,.header-contact .email{font-size:15px;min-height:36px;display:flex;align-items:center}
  .main-nav{font-size:18px}
  .services-grid{grid-template-columns:1fr;border-left:1px solid var(--line)}
  .service.service-illustrated{padding:27px;min-height:365px;border-right:1px solid var(--line)}
  .service-illustrated .service-number{margin-bottom:91px}
  .service-illustrated h3{font-size:24px;max-width:none}
  .service-illustrated p{max-width:none}
  .how-grid{grid-template-columns:1fr;gap:27px}
  .how-grid li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:17px}
  .how-grid li>span{grid-row:1/3;padding-top:1px}
  .how-grid h3{margin:0 0 9px}
  .how-grid p{grid-column:2;max-width:none}
  .section{scroll-margin-top:0}
  html{scroll-padding-top:130px}
  #reviews{scroll-margin-top:0}
}
@media(max-width:440px){
  .hero-actions{gap:18px 24px}
  .hero-actions .button{font-size:16px;padding-inline:18px}
  .hero-actions .text-link{font-size:16px;min-height:44px}
  .service-link .service-tag{font-size:16px}
  .company-name{font-size:22px}
  .letter-card{padding-right:0;min-height:0;padding-top:20px;padding-bottom:23px}
  .letter-top{min-height:115px;padding-right:104px;justify-content:center;gap:8px}
  .letter-thumb{top:20px;width:81px;height:115px}
  .letter-card p{font-size:17px;margin-top:22px;max-width:none}
  .how-grid p{font-size:17px}
  .proof-item:nth-child(2){align-items:flex-start}
  .proof-word{font-size:19px}
  .back-projects{flex-wrap:wrap;gap:13px}
  .gallery-heading{align-items:center}
  .gallery-heading h2{font-size:23px}
  .gallery-counter{white-space:nowrap}
  .contact-email a{font-size:27px}
  .contact-section .eyebrow{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .service-visual img{transition:none!important;transform:none!important}
}
@media print{details.engineering-step>p{display:block!important}.service-visual{display:none}.service-illustrated .service-number{margin-bottom:20px}}

/* Owner-supplied wordmark without a miniature tagline. */
.brand{width:248px;max-width:100%;min-height:44px;display:flex;align-items:center}
@media(max-width:1180px){.brand{width:216px}}
@media(max-width:600px){.brand{width:206px}}
@media(max-width:360px){.brand{width:194px}}

/* Larger letter previews and image-filled case thumbnails. */
.service-owner-art .service-visual{left:16%;height:220px}
.service-owner-art .service-visual img{object-fit:contain;object-position:right top}
.letter-card{display:grid;grid-template-columns:minmax(0,1fr) 144px;align-items:start;gap:20px;min-height:0;padding:25px 0}
.letter-copy{min-width:0}
.letter-card .letter-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:0;padding:0}
.letter-card .company-name{font-size:22px;overflow-wrap:anywhere}
.letter-card p{margin:18px 0 20px;max-width:none}
.letter-card .text-link{gap:12px}
.letter-preview{display:block;padding:0;border:1px solid #e5e7e9;background:#fff;cursor:zoom-in;align-self:start;width:100%;aspect-ratio:210/297;overflow:hidden;box-shadow:0 5px 18px #20272b1a;transition:transform .2s ease}
.letter-preview .letter-thumb{position:static;display:block;width:100%;height:100%;object-fit:cover;box-shadow:none;border:0}
.letter-preview:hover{transform:translateY(-3px)}
.letter-preview:focus-visible{outline:3px solid #b24600;outline-offset:4px}
.gallery-thumb,.gallery-thumb[aria-current="true"]{padding:0;border:0;overflow:hidden}
.gallery-thumb img{object-fit:cover}
.gallery-thumb::after{content:"";position:absolute;inset:0;border:1px solid #dbe0e3;pointer-events:none;border-radius:inherit}
.gallery-thumb[aria-current="true"]::after{border:2px solid var(--orange)}
.gallery-thumb:focus-visible{outline:3px solid #b24600;outline-offset:3px}
@media(max-width:1100px){.letter-card{grid-template-columns:minmax(0,1fr) 156px;gap:28px}}
@media(max-width:600px){
  .letter-card{grid-template-columns:minmax(0,1fr) 120px;gap:18px;align-items:start}
  .letter-copy{display:contents}
  .letter-card .letter-top{grid-column:1/-1;grid-row:1}
  .letter-card p{grid-column:1;grid-row:2;margin:0;font-size:17px;line-height:1.65}
  .letter-card .text-link{grid-column:1/-1;grid-row:3;justify-self:start}
  .letter-preview{grid-column:2;grid-row:2}
}
@media(max-width:360px){.letter-card{grid-template-columns:minmax(0,1fr) 108px;gap:16px}}
@media(prefers-reduced-motion:reduce){.letter-preview{transition:none;transform:none}}
.pagination{flex-wrap:wrap}
.gallery-single .gallery-arrow,.gallery-single .gallery-thumbs{display:none}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;white-space:nowrap}
@media(max-width:760px){.pagination{gap:8px}.pagination .page-numbers{padding-inline:12px}}

/* Industry navigation links also expose useful landing pages to crawlers. */
.industry-links{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:0 0 30px;font-size:16px;line-height:1.5}
.industry-links>span{color:var(--muted,#59666f)}
.industry-links>a{text-decoration:underline;text-decoration-color:#d4dadf;text-underline-offset:5px}
.industry-links>a:hover{color:#b64a00}
.breadcrumb.wrap+.page-intro{padding-top:30px}

/* Legal links remain readable and separate from the main footer navigation. */
.footer-legal{display:flex;flex-wrap:wrap;gap:12px 32px;padding-block:16px 28px;border-top:1px solid #465056;font-size:15px;line-height:1.6}
.footer-legal a{padding-block:8px;text-underline-offset:4px}
.footer-legal a:hover{text-decoration:underline;color:#fff}
.legal-document .page-intro h1{max-width:950px;font-size:clamp(34px,4.2vw,56px);text-wrap:balance}
.legal-document .standard-content{max-width:var(--wrap,1280px)}
.legal-document .standard-content p,.legal-document .standard-content li{overflow-wrap:break-word}
.legal-version{color:var(--muted);font-size:16px}
.legal-navigation{display:flex;flex-wrap:wrap;gap:12px 28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
@media(max-width:760px){.site-footer .footer-inner{padding-bottom:20px}.footer-legal{padding-bottom:100px;gap:8px;font-size:15px}.footer-legal a{flex-basis:100%;min-height:44px}}

.case-filters .button:disabled{cursor:wait;opacity:.75}.filter-status{margin:0 0 18px;color:var(--muted)}.filter-status[hidden]{display:none}.contact-channel{margin-block:18px}

/* Telegram channel in the shared header and contact links. */
.telegram-icon{display:block;flex:none;width:28px;height:28px}
.telegram-link{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.telegram-link .telegram-icon{transition:transform .18s ease}
.telegram-link:hover .telegram-icon{transform:translateY(-2px)}
.header-telegram{justify-content:center;flex:none;width:44px;height:44px;margin-left:-8px;border-radius:50%}
.header-telegram .telegram-icon{width:34px;height:34px}
.contact-channel .telegram-link{gap:12px}
.footer-inner .telegram-link{white-space:nowrap}
@media(min-width:1041px) and (max-width:1180px){.header-inner{gap:18px}.main-nav{gap:18px;font-size:15px}}
@media(max-width:600px){.header-inner{grid-template-columns:minmax(0,1fr) 44px 44px;column-gap:10px}.header-telegram{grid-column:2;grid-row:1;margin:0}.menu-toggle{grid-column:3;grid-row:1}}
@media(prefers-reduced-motion:reduce){.telegram-link .telegram-icon{transition:none;transform:none}}