/* GEOFAMA 1.0.9 — motion with restraint. Never enlarges or moves photographs. */
:root { --gf-ease: cubic-bezier(.22,1,.36,1); --gf-motion: 680ms; }
.gf-scroll-track { position:absolute;bottom:-1px;left:0;right:0;height:2px;z-index:1;pointer-events:none;overflow:hidden; }
.gf-scroll-fill { height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#b88758,var(--gold-light) 65%,#fff2d9);box-shadow:0 0 10px rgba(241,201,152,.5);will-change:transform; }
.hero .gf-hero-glow{position:absolute;z-index:1;inset:0 auto 0 0;width:63%;pointer-events:none;background:radial-gradient(360px circle at var(--gf-hero-x,38%) var(--gf-hero-y,49%), rgba(238,190,126,.083), transparent 73%);opacity:0;transition:opacity .5s ease}
@media(hover:hover) and (pointer:fine){.hero.gf-pointer-active .gf-hero-glow{opacity:1}}
/* Cinematic copy entrance on first view; image dimensions never change. */
@media(prefers-reduced-motion:no-preference){
  .js .hero .hero-kicker{animation:gf-fade-up .85s .12s both var(--gf-ease)}
  .js .hero h1{animation:gf-fade-up .9s .23s both var(--gf-ease)}
  .js .hero .hero-description{animation:gf-fade-up .9s .37s both var(--gf-ease)}
  .js .hero .actions{animation:gf-fade-up .9s .49s both var(--gf-ease)}
  @keyframes gf-fade-up{from{opacity:0;transform:translateY(18px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
}
/* Purely decorative travel line on section labels. */
.eyebrow::before{transform-origin:left;transition:transform .8s var(--gf-ease)}
.js .eyebrow.gf-cue::before{transform:scaleX(.32)}
.js .eyebrow.gf-cue.gf-in-view::before{transform:scaleX(1)}
.section-title{transition:color .45s ease}
/* Individual image curtains remove themselves only once the card is actually in view.
   The image itself remains at 100% container size and at native resolution or smaller. */
.service-visual::before,.portfolio-picture::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,#3a3b3f 0%,#434347 72%,#d2aa7a 100%);
  transform:translateX(102%);transition:none;
}
@media(prefers-reduced-motion:no-preference){
  .js .service-card:not(.is-visible) .service-visual::before,
  .js .portfolio-card:not(.is-visible) .portfolio-picture::before{transform:translateX(0)}
  .js .service-card.is-visible .service-visual::before,
  .js .portfolio-card.is-visible .portfolio-picture::before{
    transform:translateX(102%);transition:transform .82s var(--gf-ease);
  }
  .js .service-card:nth-child(5n+2) .service-visual::before,.js .portfolio-card:nth-child(3n+2) .portfolio-picture::before{transition-delay:.07s}
  .js .service-card:nth-child(5n+3) .service-visual::before,.js .portfolio-card:nth-child(3n+3) .portfolio-picture::before{transition-delay:.13s}
}
/* A warm light follows the pointer across the card, not the photo. */
.service-card,.portfolio-card{--gf-card-x:50%;--gf-card-y:40%;isolation:isolate}
.service-card::after,.portfolio-card::after{content:'';position:absolute;inset:-2px;z-index:0;pointer-events:none;
  opacity:0;background:radial-gradient(260px circle at var(--gf-card-x) var(--gf-card-y),rgba(230,183,120,.105),transparent 75%);
  transition:opacity .3s ease}
@media(hover:hover) and (pointer:fine){.service-card:hover::after,.portfolio-card:hover::after{opacity:1}}
.service-card>* , .portfolio-card>*{position:relative;z-index:1}
/* Respect the diagonal mask and never zoom the photographs. */
.service-card:hover .service-visual img,.portfolio-card:hover .portfolio-picture img{transform:none!important}
/* Small, responsive button impact for touch / keyboard without altering layout. */
.btn,.back-to-top{isolation:isolate}
.gf-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:2;background:rgba(255,255,255,.32);transform:translate(-50%,-50%) scale(0);animation:gf-ripple-out .6s ease-out forwards}
@keyframes gf-ripple-out{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(hover:hover) and (pointer:fine){.btn.gf-magnetic:hover{transform:translate3d(var(--gf-mx,0px),calc(var(--gf-my,0px) - 3px),0)}}
/* Gallery controls: real buttons, keyboard arrows, swipe and a project count. */
.gf-gallery-image{position:relative;display:grid;place-items:center;background:#202123;min-height:180px;max-height:min(65vh,680px);overflow:hidden}
.gf-gallery-image #modal-img{max-width:100%;max-height:min(65vh,680px);width:auto;height:auto;object-fit:contain;margin:auto}
.gf-gallery-controls{position:absolute;z-index:2;left:12px;right:12px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;gap:16px;pointer-events:none}
.gf-gallery-arrow{width:44px;height:44px;border:1px solid rgba(250,216,168,.7);background:rgba(31,33,36,.78);color:#ffe5bd;backdrop-filter:blur(7px);border-radius:50%;font-size:35px;font-weight:300;line-height:1;display:grid;place-items:center;padding:0 0 5px;pointer-events:auto;transition:background .25s,transform .25s,border-color .25s}
.gf-gallery-arrow:hover,.gf-gallery-arrow:focus-visible{background:#e9c18f;color:#242629;transform:scale(1.07)}
.gf-gallery-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:10px;color:var(--gold-light)}
.gf-gallery-hint{color:#bfc0bf;font-weight:400;letter-spacing:.02em;text-transform:none}
#detail-modal.gf-gallery-single .gf-gallery-controls,#detail-modal.gf-gallery-single .gf-gallery-hint{display:none}
.gf-gallery-image.gf-changing img{animation:gf-photo-fade .23s ease-out}
@keyframes gf-photo-fade{from{opacity:.35}to{opacity:1}}
/* Form focus / feedback: calmer and clearer, especially on mobile. */
:is(.quote-field,.contact-form label):focus-within{color:var(--gold-light)}
.quote-status[data-state="success"],#form-status[data-state="success"]{font-weight:600}
/* Header, navigation and section progress remain accessible at each breakpoint. */
.main-nav a[aria-current="location"]{color:var(--gold-light)}
.footer-links a,.main-nav a{transition:color .28s ease,transform .28s ease}
@media(max-width:780px){
  .gf-gallery-arrow{width:38px;height:38px;font-size:30px}
  .gf-gallery-controls{left:7px;right:7px}
  .gf-gallery-meta{font-size:9px}
  .gf-gallery-hint{display:none}
}
@media(max-width:430px){.gf-gallery-image{min-height:120px}}
@media(prefers-reduced-motion:reduce){
  .hero .gf-hero-glow{display:none}
  .gf-ripple{display:none}
  .eyebrow::before{transform:none!important}
  .service-visual::before,.portfolio-picture::before{display:none!important}
  .gf-gallery-image.gf-changing img{animation:none}
  .gf-gallery-arrow{transition:none}
}
