/* ISCA PAVING — restrained refinement layer.
   The visual language comes from paving, survey marks and job sheets—not UI effects. */

:root{
  --refine-duration:520ms;
  --refine-ease:cubic-bezier(.22,1,.36,1);
}

html,body{overscroll-behavior:none}
*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink-600) 42%,transparent) transparent}

/* Calm, consistent entrances. No blur, masks, pointer tracking or parallax. */
.site-ready .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--refine-duration) var(--refine-ease),transform var(--refine-duration) var(--refine-ease);
}
.site-ready .reveal.is-in{opacity:1; transform:translateY(0)}

/* Fewer bubble shapes and shallower elevation make the site feel built, not generated. */
.hero__stage,.page-hero__media,.showcase-strip figure,.materials__figure,.cta,.footer__grid{border-radius:var(--radius-lg)}
.card,.proj,.review-card,.crew-card,.ba figure,.form{border-radius:var(--card-radius)}
.card__media,.proj__media,.ba__img{border-radius:var(--card-media-radius)}

.card,.proj,.ba figure,.form{
  border-color:color-mix(in srgb,var(--ink-900) 9%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.form{box-shadow:0 12px 34px rgba(9,9,9,.055)}

/* Privacy page: a calm information panel is more appropriate than project photography. */
.privacy-hero__panel{
  min-height:520px; padding:clamp(32px,4vw,56px); border-radius:var(--card-radius); color:var(--text-on-inverse);
  background-color:var(--surface-inverse); background-image:linear-gradient(135deg,rgba(197,82,33,.18),transparent 42%),linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.055) 50%,transparent 50.5%),linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px; display:flex; flex-direction:column; align-items:flex-start;
}
.privacy-hero__mark{width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--accent); margin-bottom:auto}
.privacy-hero__mark svg{width:28px; height:28px; fill:none; stroke:var(--white); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.privacy-hero__panel .label{color:var(--limestone-400); margin:var(--space-12) 0 var(--space-4)}
.privacy-hero__list{width:100%; border-top:1px solid rgba(255,255,255,.18)}
.privacy-hero__list div{display:grid; grid-template-columns:minmax(135px,.9fr) 1.1fr; gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid rgba(255,255,255,.18)}
.privacy-hero__list strong{font-family:var(--font-display); font-size:clamp(21px,2vw,28px); line-height:1; font-weight:400}
.privacy-hero__list span,.privacy-hero__foot{font-size:var(--text-body-sm); color:var(--limestone-400)}
.privacy-hero__foot{margin:var(--space-8) 0 0}

/* The process reads as one job sheet instead of four unrelated floating cards. */
.steps{
  gap:1px;
  overflow:hidden;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--card-radius);
}
.step{
  border:0;
  border-radius:0;
  box-shadow:none;
  transition:background-color 220ms ease;
}

/* Assurance items are proof points, not another row of generic cards. */
.assure{
  min-height:180px;
  padding:var(--space-6) 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--line-soft);
  border-radius:0;
  box-shadow:none;
  transition:border-color 220ms ease;
}

/* Explicit interaction states. Movement stays shallow and is pointer-only. */
@media (hover:hover) and (pointer:fine){
  .card:hover,.proj:hover,.crew-card:hover,.ba figure:hover{transform:translateY(-2px); box-shadow:0 14px 38px rgba(9,9,9,.07)}
  .site-ready .card.reveal.is-in:hover,.site-ready .proj.reveal.is-in:hover,.site-ready .crew-card.reveal.is-in:hover,.site-ready .ba figure.reveal.is-in:hover{transform:translateY(-2px)}
  .site-ready .step.reveal.is-in:hover,.site-ready .assure.reveal.is-in:hover{transform:translateY(0)}
  .step:hover{transform:none; background:var(--limestone-200); box-shadow:none}
  .assure:hover{transform:none; box-shadow:none; border-color:var(--ink-600)}
  .page-hero:hover .page-hero__media img,.card:hover .card__media img,.proj:hover .proj__media img,.crew-card:hover .crew-card__image img,.showcase-strip figure:hover img{transform:scale(1.012)}
}

.btn{transition-duration:220ms}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.48; cursor:not-allowed; pointer-events:none; filter:saturate(.45)}
.btn--primary:focus-visible{box-shadow:0 0 0 3px var(--surface-raised),0 0 0 6px var(--accent-pressed)}
.btn--secondary:focus-visible{box-shadow:0 0 0 3px var(--surface-raised),0 0 0 6px var(--ink-600)}

.field input,.field select,.field textarea{border-color:var(--border-control); transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 13%,transparent)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--limestone-200); color:var(--text-muted); cursor:not-allowed}

/* The menu is a quick utility curtain, not a staged showpiece. */
@media (max-width:900px){
  .nav__panel:not([hidden]){display:flex; transform-origin:top center; animation:menu-in 260ms var(--refine-ease) both}
  .nav__panel:not([hidden]) a{opacity:1; transform:none; animation:none}
  body.nav-open{overflow:hidden}
  .page-hero__grid{gap:var(--space-6)}
  .page-hero__copy{max-width:680px}
}

/* Tablet is its own composition: controlled hero proportions and two-column content. */
@media (min-width:641px) and (max-width:900px){
  :root{--gutter:32px; --card-padding:var(--space-8)}
  .hero__stage{min-height:690px}
  .hero__title-panel{width:59%; min-height:36%; padding-right:var(--space-6)}
  .hero__detail-panel{width:54%; min-height:37%; padding-left:var(--space-6)}
  .hero__head{font-size:clamp(62px,10.2vw,82px)}
  .page-hero__media{min-height:440px}
  .cta{padding:var(--space-16) var(--space-8)}
  .cta>.hero__actions{width:100%}
}

@media (max-width:640px){
  :root{
    --gutter:24px;
    --card-radius:20px;
    --card-media-radius:12px;
    --stat-radius:20px;
  }
  .card,.proj,.review-card,.crew-card,.ba figure,.form{border-radius:var(--card-radius)}
  .steps{border-radius:var(--card-radius)}
  .card:hover,.proj:hover,.crew-card:hover,.ba figure:hover{transform:none; box-shadow:none}
  .cta{align-items:flex-start}
  .cta>.hero__actions{width:100%}
}

@media (max-width:560px){
  .privacy-hero__panel{min-height:440px; padding:var(--space-6)}
  .privacy-hero__panel .label{margin-top:var(--space-8)}
  .privacy-hero__list div{grid-template-columns:1fr; gap:var(--space-2)}
  .hero__head{font-size:clamp(50px,14.5vw,64px)}
  .hero__actions .btn{min-height:52px}
}

@media (max-width:340px){.hero__head{font-size:48px}}

/* Responsive rhythm: keep the editorial breathing room without forcing desktop-sized
   transitions and media blocks onto tablets and phones. */
@media (min-width:641px) and (max-width:900px){
  :root{--section-y:56px; --gap-block:36px}
  .hero{padding-top:104px}
  .hero__stage{min-height:660px}
  .page-hero{padding-top:104px}
  .page-hero__grid{gap:20px}
  .page-hero__copy{padding:var(--space-6) 0 var(--space-4)}
  .page-hero__media{min-height:0; aspect-ratio:4/3}
  .service-section{padding-block:56px}
  .hero + .section,.page-hero + .section,.page-hero + .service-section,
  .section + .section,.section + .section--compact,.section--compact + .section,
  .service-section + .service-section,.service-section + .section{padding-top:32px}
  .cta{padding:var(--space-12) var(--space-8)}
  .footer{padding-bottom:56px}
}

@media (max-width:640px){
  :root{--section-y:44px; --gap-block:32px; --card-padding:var(--space-6)}
  .section--compact{padding-block:40px}
  .service-section{padding-block:44px}
  .hero + .section,.page-hero + .section,.page-hero + .service-section,
  .section + .section,.section + .section--compact,.section--compact + .section,
  .service-section + .service-section,.service-section + .section{padding-top:28px}
  .hero{padding-top:96px}
  .hero__stage{min-height:700px}
  .hero__figure{inset:210px 0 230px}
  .hero__title-panel{min-height:210px; padding-bottom:var(--space-6)}
  .hero__detail-panel{min-height:230px; padding-top:var(--space-6)}
  .hero__location{bottom:254px}
  .page-hero{padding-top:88px}
  .page-hero__grid{gap:var(--space-4)}
  .page-hero__copy{padding:var(--space-4) 0}
  .page-hero__title{margin-bottom:var(--space-4)}
  .page-hero__lead{margin-bottom:20px}
  .page-hero__media{min-height:0; aspect-ratio:4/3}
  .showcase-strip{gap:var(--space-3)}
  .showcase-strip figure{min-height:260px}
  .grid-2,.grid-3,.grid-4,.materials__row,.ba,.form__grid,.crew-grid{gap:var(--space-4)}
  .materials__row{margin-top:var(--space-8)}
  .card__media{margin-bottom:var(--space-6)}
  .card p{margin-bottom:var(--space-4)}
  .service-section .materials__figure{min-height:280px}
  .assure{min-height:0; padding:20px 0}
  .cta{padding:var(--space-12) var(--space-6)}
  .form__actions{margin-top:var(--space-8)}
  .about-spec{min-height:132px}
  .about-demo-note{margin-top:var(--space-8)}
  .footer{padding-bottom:40px}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-4); row-gap:var(--space-8); padding:var(--space-8) var(--space-6); text-align:center}
  .footer__grid > div:first-child,.footer__grid > div:last-child{grid-column:1 / -1}
  .footer__brand{justify-content:center}
  .footer__grid .body-sm{margin-inline:auto}
  .footer h4{margin-bottom:var(--space-3)}
  .footer ul{align-items:center}
  .footer li a{justify-content:center}
  .footer__grid > div:last-child ul{flex-direction:row; flex-wrap:wrap; justify-content:center; column-gap:var(--space-4)}
  .footer__legal{justify-content:center; margin-top:var(--space-6); padding-top:20px; text-align:center}
}

@media (max-width:599px){
  .service-section .materials__figure{min-height:0; aspect-ratio:4/3}
  #materials .materials__row{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-4); row-gap:var(--space-6)}
  #materials .materials__row > div{padding-top:var(--space-3); border-top:1px solid var(--line-soft)}
  #materials .materials__row > div:last-child{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-4); align-items:baseline}

  #assurances .grid-4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft)}
  #assurances .assure{justify-content:flex-start; min-height:0; padding:var(--space-6) 20px; border:0; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); border-radius:0; background:transparent}
  #assurances .assure .icon-badge{margin-bottom:var(--space-6)}
}

@media (max-width:359px){
  #assurances .grid-4{grid-template-columns:1fr}
  #assurances .assure{display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:var(--space-4); row-gap:var(--space-2)}
  #assurances .assure .icon-badge{grid-row:1 / span 2; margin:0}
}

/* A 600–640px device is a small tablet, not a narrow phone. Retaining two columns
   avoids oversized single cards and several screens of unnecessary scrolling. */
@media (min-width:600px) and (max-width:640px){
  .grid-2,.grid-3,.grid-4,.materials__row,.ba,.form__grid{grid-template-columns:repeat(2,1fr)}
  .crew-grid{grid-template-columns:repeat(2,1fr)}
  .crew-card:last-child{width:calc(50% - var(--space-2)); grid-column:1 / -1; justify-self:center}
}

@keyframes menu-in{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .site-ready .reveal{opacity:1; transform:none; transition:none}
  .nav__panel:not([hidden]){animation:none}
}