/* Shared controls: adjust these values to tune the site's scale and motion. */
.clean-home {
 --title-max:110px;
 --motion-duration:240ms;
 --motion-ease:cubic-bezier(.22,.61,.36,1);
 --section-space:64px;
}
#smooth-content {display:flow-root; width:100%}
html.uses-smoother {scroll-behavior:auto}
.has-smoother.inner-page .site-header {position:fixed; inset:0 0 auto}
.has-smoother.inner-page #smooth-content {padding-top:var(--header-height,104px)}
.clean-home :is(a,button,input,textarea,select):focus-visible {
 outline:2px solid #c63222; outline-offset:5px;
}
.clean-home button {font-family:inherit; cursor:pointer}
.clean-home button:disabled {cursor:default}

/* The banner blends into the portfolio without a fixed-size transition. */
.clean-home .home-hero {
 height:auto; min-height:100svh; max-height:none;
 padding:clamp(140px,18vh,180px) var(--page-gutter) 120px;
}
.clean-home .home-hero__copy {width:min(100%,1000px); position:relative; z-index:1}
.clean-home .home-hero h1 {
 font-size:clamp(56px,7.7vw,var(--title-max)); line-height:1.02; letter-spacing:-.035em;
}
.clean-home .home-hero h1 em {letter-spacing:inherit}
.clean-home .home-hero::after {
 background:linear-gradient(0deg,var(--paper),transparent 24%),linear-gradient(90deg,#faf9f640,transparent 65%);
}
.clean-home .home-hero__bottom {bottom:30px; z-index:2}
.clean-home .home-showcase {padding-top:40px; border-top:0}
.clean-home .contact-title {font-size:clamp(48px,8vw,var(--title-max)); letter-spacing:-.045em}
.clean-home .contact {min-height:0; padding-block:64px; border:0}
.clean-home .inner-cta {border:0; padding-block:56px}
.clean-home .inner-cta h2 {font-size:clamp(48px,7.5vw,var(--title-max))}
.clean-home :is(.brands,.home-services,.culture,.home-blog) {border-top:0; padding-block:52px}
.clean-home .brands {background:var(--paper); overflow:visible}
.clean-home .culture {padding-top:48px}
.clean-home .culture-message {border:0}

/* Intentional hover feedback, with no looping or duplicate arrows. */
.clean-home :is(.text-link,.home-hero__cta,.work-caption__all,.home-blog__all,.footer-contact,.contact-bottom>a) {
 min-height:44px; align-items:center; transition:color var(--motion-duration),border-color var(--motion-duration);
}
.clean-home :is(.text-link,.home-hero__cta,.work-caption__all,.home-blog__all,.footer-contact,.contact-bottom>a):hover {
 color:#bd3425; border-color:currentColor;
}
.clean-home :is(.text-link,.home-hero__cta,.work-caption__all,.home-blog__all,.footer-contact,.contact-bottom>a)>span,
.clean-home .home-service-links b {
 display:inline-block; transition:transform var(--motion-duration) var(--motion-ease);
}
@media(hover:hover) and (pointer:fine) {
 .clean-home :is(.text-link,.home-hero__cta,.work-caption__all,.home-blog__all,.footer-contact,.contact-bottom>a):hover>span,
 .clean-home .home-service-links a:hover b {transform:translate(3px,-3px)}
 .clean-home .site-start:hover span {transform:translate(2px,-2px); background:#c63222}
 .clean-home .home-blog-card__link:hover {transform:translateY(-3px)}
}
.clean-home .home-service-links a {transition:color var(--motion-duration),background var(--motion-duration); border-bottom-color:#e7e1d8}
.clean-home .home-service-links a:hover {background:#f0ede666}
.clean-home .home-service-links>a:last-child:nth-child(odd) {grid-column:1/-1}
.clean-home .home-blog-card__link {transition:transform var(--motion-duration) var(--motion-ease),background var(--motion-duration)}
.clean-home .action-button {
 display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:54px;
 padding:16px 22px; border:0; border-radius:8px; background:#d93624; color:#fff;
 font-size:17px; line-height:1.3; font-weight:700; text-decoration:none;
 transition:background var(--motion-duration),box-shadow var(--motion-duration);
}
.clean-home .action-button span {font-size:23px; transition:transform var(--motion-duration) var(--motion-ease)}
.clean-home .action-button:hover {background:#ac291b; box-shadow:0 6px 18px #aa2c1d18}
@media(hover:hover) {.clean-home .action-button:hover span {transform:translate(3px,-3px)}}
.clean-home .application-submit {transition:background var(--motion-duration),box-shadow var(--motion-duration)}
.clean-home .application-submit:hover:not(:disabled) {background:#ac291b; box-shadow:0 6px 18px #aa2c1d18}
.detail-blog table {display:block; max-width:100%; overflow-x:auto; border-collapse:collapse}
.detail-blog :is(th,td) {min-width:120px; padding:10px 12px; text-align:left; border-bottom:1px solid #dedad1}

/* Three quiet, continuous rows: left / right / left, with direct dragging. */
.brand-gallery {display:grid; gap:12px}
.brand-gallery__row {overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain}
.brand-gallery__row::-webkit-scrollbar {display:none}
.brand-gallery__row.has-marquee {overflow:hidden; touch-action:pan-y pinch-zoom; cursor:grab}
.brand-gallery__row.is-dragging,.brand-gallery__row.is-dragging * {cursor:grabbing; user-select:none}
.brand-gallery__track {display:flex; width:max-content; position:relative}
.brand-gallery__row.has-marquee .brand-gallery__track {will-change:transform}
.brand-gallery__group {display:flex; gap:20px; padding-right:20px; flex-shrink:0}
.brand-gallery__item {display:flex; align-items:center; justify-content:center; flex:0 0 220px; width:220px; height:90px; overflow:hidden; padding:12px 20px; border-radius:10px}
.brand-gallery__item img {display:block; flex-shrink:0; width:100%; max-width:210px; height:auto; object-fit:contain; filter:brightness(0); mix-blend-mode:multiply; opacity:.85; transition:opacity var(--motion-duration)}
.brand-gallery__item img:is([src$=".jpg" i],[src$=".jpeg" i]) {filter:grayscale(1)}
.brand-gallery__item img[src*="/upload/brands/updated-20261027/"] {width:74%; height:70%; max-width:132px; max-height:44px; object-fit:contain; filter:brightness(0)}
.client-logo img[src*="/upload/brands/updated-20261027/"] {width:76%; height:64%; object-fit:contain; filter:brightness(0); mix-blend-mode:multiply; opacity:.85}
a.brand-gallery__item {transition:background var(--motion-duration)}
a.brand-gallery__item:hover {background:#f0ede7}
a.brand-gallery__item:hover img {opacity:1}

/* A nearby, clear invitation replaces the scattered ruled contact layout. */
.contact-page .contact-hero {display:grid; grid-template-columns:1.2fr 1fr; gap:8%; align-items:center; padding:42px 0 32px}
.contact-page .page-intro {padding:0; max-width:none}
.contact-page .page-intro h1 {font-size:clamp(48px,6.2vw,88px); line-height:1.06; letter-spacing:-.035em}
.contact-page .page-intro>p {font-size:19px; max-width:40ch; line-height:1.55; margin:24px 0 0}
.contact-page .contact-direct {display:flex; flex-direction:column; gap:8px; padding:24px 0 0; align-items:flex-start}
.contact-page .contact-direct a {border:0; padding:8px 0; min-height:44px; font-size:clamp(20px,2vw,28px); gap:28px; transition:color var(--motion-duration)}
.contact-page .contact-direct a:hover {color:#bd3425}
.contact-page .meeting-callout {display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; border:0; border-radius:24px; padding:40px; background:#f0e8dd}
.contact-page .meeting-callout h2 {font-size:clamp(32px,3.3vw,46px); line-height:1.08; letter-spacing:-1px; max-width:12ch}
.contact-page .meeting-callout p {font-size:18px; line-height:1.5; color:#62594f; margin:0; max-width:32ch}
.contact-page .office-grid {gap:20px; padding:28px 0 0}
.contact-page .office-grid article {border:0; padding:28px; background:#f2efe9; border-radius:16px}
.contact-page .office-grid h2 {font-size:29px; margin-bottom:18px}
.contact-page .office-grid address {min-height:0; font-size:17px; margin-bottom:20px}
.contact-page .office-grid .text-link {font-size:15px; border:0; padding:0}
.contact-page {padding-bottom:64px}

@media(max-width:1000px) {
 .contact-page .contact-hero {gap:32px; grid-template-columns:1fr 1fr}
 .contact-page .meeting-callout {padding:28px}
 .contact-page .office-grid {grid-template-columns:1fr}
}
@media(max-width:700px) {
 .clean-home {--section-space:48px}
 .clean-home .home-hero {min-height:660px; padding:136px var(--page-gutter) 110px}
 .clean-home .home-hero h1 {font-size:clamp(42px,11vw,72px); letter-spacing:-.035em; line-height:1.07}
 .clean-home .home-hero__copy p {max-width:30ch}
 .clean-home .home-hero__bottom {bottom:24px}
 .clean-home .home-showcase {padding-block:28px 40px}
 .clean-home :is(.brands,.home-services,.culture,.home-blog) {padding-block:36px}
 .clean-home .contact {padding-block:44px}
 .clean-home .inner-cta {padding-block:40px; gap:20px}
 .clean-home .contact-title {font-size:clamp(44px,10.8vw,76px)}
 .brand-gallery {gap:8px}
 .brand-gallery__group {gap:12px; padding-right:12px}
 .brand-gallery__item {flex-basis:165px; width:165px; height:76px; padding:10px 16px}
 .brand-gallery__item img {height:auto; max-width:160px}
 .contact-page .contact-hero {grid-template-columns:1fr; gap:28px; padding-top:24px}
 .contact-page .page-intro h1 {font-size:clamp(42px,10.6vw,68px)}
 .contact-page .page-intro>p {font-size:17px; margin-top:20px}
 .contact-page .contact-direct {padding-top:16px; gap:2px}
 .contact-page .contact-direct a {font-size:22px}
 .contact-page .meeting-callout {padding:28px; gap:18px; border-radius:18px}
 .contact-page .meeting-callout h2 {max-width:none; font-size:32px}
 .contact-page .meeting-callout p {font-size:17px}
 .contact-page .action-button {width:100%; font-size:16px; gap:16px}
 .contact-page .office-grid {padding-top:0; gap:14px}
 .contact-page .office-grid article {padding:24px}
 .clean-home .culture-gallery img {aspect-ratio:auto; background:transparent}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto!important}
 .clean-home *, .clean-home *::before, .clean-home *::after {animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
