/* Shared finish for the website and design studio. Runtime tokens are canonical. */
:root {
  --action-top: #ad583d;
  --action-bottom: #8d402b;
  --action-edge: #8f442f;
  --action-radius: 3px;
  --action-shadow: 0 5px 12px -7px rgb(77 37 22 / .5), inset 0 1px 0 rgb(255 255 255 / .2);
  --surface-shadow: 0 20px 42px -30px rgb(54 44 30 / .35);
  --finish-speed: 220ms;
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--action-radius);
  line-height: 1.35;
  letter-spacing: .015em;
  transition: box-shadow var(--finish-speed) ease, border-color var(--finish-speed) ease, transform var(--finish-speed) ease;
}
.button:not(.outline) {
  background: linear-gradient(135deg, var(--action-top), var(--terra) 48%, var(--action-bottom));
  border-color: var(--action-edge);
  box-shadow: var(--action-shadow);
  color: #fff;
}
.button:not(.outline)::before,
.button:not(.outline)::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% auto -30% -70%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 242 218 / .19), transparent);
  transform: translateX(0) skewX(-20deg);
  pointer-events: none;
}
/* One quiet sweep on arrival; subsequent sweeps only follow hover or keyboard focus. */
.hero-actions .button:not(.outline)::before {
  animation: paver-light 1.6s ease-out .6s 1 both;
}
.button:not(.outline):not(:disabled):not([aria-disabled=true]):is(:hover,:focus-visible)::after {
  animation: paver-light 1.4s ease-out 1 both;
}
.button:not(.outline):not(:disabled):not([aria-disabled=true]):hover {
  background: linear-gradient(135deg, var(--terra), var(--action-bottom));
  box-shadow: 0 8px 18px -9px rgb(77 37 22 / .55), inset 0 1px 0 rgb(255 255 255 / .22);
  transform: translateY(-1px);
}
.button:not(:disabled):not([aria-disabled=true]):active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgb(48 24 15 / .14);
}
.button.outline {
  background: linear-gradient(140deg, rgb(255 255 255 / .55), rgb(255 255 255 / .08));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65);
  border-color: var(--line);
}
.button.outline:not(:disabled):hover {
  background: var(--ivory);
  border-color: var(--terra);
  transform: translateY(-1px);
}
.button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 4px;
}
.button:disabled,
.button[aria-disabled=true] {
  opacity: .48;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.button:disabled::before,
.button:disabled::after,
.button[aria-disabled=true]::before,
.button[aria-disabled=true]::after { animation: none; display: none; }
@keyframes paver-light {
  from { transform: translateX(0) skewX(-20deg); }
  to { transform: translateX(500%) skewX(-20deg); }
}

/* Compact navigation preserves the primary hero action's visual hierarchy. */
.site-header:not(.studio-header) .header-actions .button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 15px;
  gap: 15px;
  font-size: 12px;
  white-space: nowrap;
}
.site-header .language-toggle,
.site-header .mobile-menu {
  min-height: 44px;
  border-radius: var(--action-radius);
  background: transparent;
  box-shadow: none;
  font-weight: 500;
}
.site-header .language-toggle { border-color: var(--line); }
.site-header .language-toggle:hover { color: var(--terra); border-color: var(--terra); }

/* Wider photography, soft material depth, and quiet section transitions. */
.hero {
  grid-template-columns: 39% minmax(0,61%);
  background: radial-gradient(ellipse at 22% 20%, var(--paper), transparent 65%);
  padding-bottom: 32px;
}
.hero-copy { min-width: 0; padding-right: 32px; }
.hero h1 { font-size: clamp(48px,5.3vw,84px); }
.hero figure { position: relative; box-shadow: var(--surface-shadow); }
.hero figure img { height: clamp(390px,36vw,600px); object-position: center 54%; }
.hero figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / .18);
  pointer-events: none;
}
.studio-promo { background: linear-gradient(135deg, #efe9de, var(--ivory)); }
.studio-promo .comparison { box-shadow: var(--surface-shadow); }
.contact-intro { background: linear-gradient(135deg, #e9e1d3, var(--ivory)); }
.contact-form { background: linear-gradient(135deg, var(--paper), var(--ivory)); }
.contact-form input:not([type=checkbox]),
.contact-form select,
.contact-form textarea {
  background: rgb(255 255 255 / .58);
  border-radius: var(--action-radius);
  box-shadow: inset 0 1px 2px rgb(54 44 30 / .035);
}
.service-grid a { transition: border-color var(--finish-speed) ease; }
.service-grid a:hover { border-color: var(--terra); }

@media (max-width: 760px) {
  .site-header:not(.studio-header) { padding-block: 16px; row-gap: 10px; }
  .site-header:not(.studio-header) .logo { width: 168px; }
  .site-header:not(.studio-header) .header-actions { justify-content: space-between; gap: 12px; }
  .site-header:not(.studio-header) .header-actions .button { min-height: 44px; padding: 10px 14px; }
  .site-header:not(.studio-header) .header-actions .language-toggle {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 12px;
  }
  .hero { padding-bottom: 0; background: none; }
  .hero-copy { padding: 24px 22px 30px; }
  .hero h1 { font-size: clamp(45px,10.4vw,75px); }
  .hero-actions { gap: 20px; }
  .hero-actions .button { padding: 13px 19px; gap: 20px; }
  .hero figure { box-shadow: 0 12px 25px -22px rgb(54 44 30 / .3); }
  .hero figure img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .service-grid a { transition: none; }
  .button::before, .button::after { animation: none !important; display: none; }
  .button:not(:disabled):hover { transform: none; }
}
@media (forced-colors: active) {
  .button:not(.outline) { background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none; }
  .button::before, .button::after, .hero figure::after { display: none; }
}

/* Direct call contact closes the header; the icon remains a simple line mark. */
.site-header .header-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;flex-shrink:0;font-size:13px;white-space:nowrap;text-underline-offset:4px}
.site-header .header-phone svg{width:16px;height:16px;flex:none}
.site-header .header-phone:hover{color:var(--terra)}
@media(min-width:761px) and (max-width:1100px){
  .site-header:not(.studio-header){flex-wrap:wrap;gap:12px}
  .site-header:not(.studio-header) .logo{width:160px}
  .site-header .header-phone{margin-left:auto}
}
@media(max-width:760px){
  .site-header:not(.studio-header) .logo{order:0;width:clamp(130px,40vw,168px);margin-right:auto}
  .site-header .header-phone{order:1;font-size:12px;gap:6px}
  .site-header .header-phone svg{width:14px;height:14px}
  .site-header:not(.studio-header) .header-actions{order:2;width:calc(100% - 68px);flex:1 0 calc(100% - 68px);gap:8px}
  .site-header:not(.studio-header) .header-actions .button{padding:10px;font-size:11px;gap:10px}
  .site-header:not(.studio-header) .header-actions .language-toggle{padding:9px 8px;font-size:11px}
  .site-header:not(.studio-header) .mobile-menu{order:3;margin-left:0;padding:8px 10px;font-size:14px}
}

.site-header:not(.studio-header){position:relative}
@media(max-width:760px){.site-header:not(.studio-header) nav{top:100%}}