/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
em{font-style:italic}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============ reveal system (JS-gated) ============ */
/* hidden states live only in :not(.is-visible) so the revealed end-state
   falls back to each element's designed styles (muted opacities etc.) */
@media (prefers-reduced-motion: no-preference){
  html.js [data-reveal]{
    transition:
      opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0ms),
      translate .8s cubic-bezier(.22,1,.36,1) var(--d,0ms),
      scale .9s cubic-bezier(.22,1,.36,1) var(--d,0ms),
      filter .9s cubic-bezier(.22,1,.36,1) var(--d,0ms);
  }
  html.js [data-reveal]:not(.is-visible){opacity:0}
  html.js [data-reveal="slide"]:not(.is-visible){translate:0 48px}
  html.js [data-reveal="blur"]:not(.is-visible){scale:.96;filter:blur(12px)}
}

/* ============ header ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.25rem;
}
.logo{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  text-decoration:none;letter-spacing:.02em;
}
.lang-toggle{
  display:none; /* shown only with JS */
  border:1px solid var(--hairline);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter:blur(8px);
}
html.js .lang-toggle{display:flex}
.lang-btn{
  padding:.35rem .8rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  opacity:.55;transition:opacity .2s, background .2s, color .2s;
}
.lang-btn.is-active{background:var(--ink);color:var(--paper);opacity:1}

/* ============ buttons ============ */
.btn{
  display:inline-block;text-decoration:none;
  padding:.9rem 2.2rem;border-radius:999px;
  font-weight:700;letter-spacing:.04em;font-size:.95rem;
  transition:transform .15s ease;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--brand);color:var(--accent-contrast)}

/* ============ placeholder frames ============ */
.placeholder-frame{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg, var(--brand-soft), var(--surface) 55%, var(--brand-soft));
  outline:1px solid var(--hairline);outline-offset:-1px;
}
.placeholder-frame::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--ink) 4%, transparent) 14px 15px);
}
.placeholder-note{
  position:absolute;inset:auto auto .75rem .75rem;z-index:1;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;opacity:.45;
}

/* ============ hero ============ */
.hero{
  min-height:100svh;
  display:grid;align-content:center;
  padding:6rem 1.25rem 3rem;
  position:relative;
  grid-template-columns:1fr;gap:2.5rem;
}
.hero-kicker{
  font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;opacity:.6;
}
.hero-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3rem, 14vw, 7.5rem);
  line-height:1.02;letter-spacing:-.01em;
}
.hero-title > span{display:block}
.hero-title .hero-dot{display:inline;color:var(--brand)}
.hero-line2{font-weight:400;font-size:.52em;display:inline-block}
.hero-line2 em{color:var(--brand)}
.hero-tagline{max-width:34ch;font-size:1.05rem;opacity:.8;margin:.75rem 0 1.5rem}
/* Height comes purely from width via the 4/5 ratio; the cap is a fixed
   rem, never a viewport-height unit — so a collapsing mobile address bar
   can't resize the photo. */
.hero-media{aspect-ratio:4/5;width:100%;max-height:28rem;border-radius:2px}
.hero-rule{
  position:absolute;top:0;bottom:0;right:1.25rem;width:1px;
  background:var(--hairline);
}
.hero-badge{
  position:absolute;right:2rem;bottom:2.5rem;width:92px;height:92px;
  animation:spin 22s linear infinite;
}
.hero-badge text{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  fill:var(--ink);opacity:.65;font-family:var(--font-body);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ shared section chrome ============ */
section{position:relative}
.section-inner{padding:5rem 1.25rem;max-width:1100px;margin:0 auto}
.section-label{
  position:sticky;top:40svh;float:left;margin-left:.25rem;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.4;
  pointer-events:none;
}
.section-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem, 7vw, 3.5rem);margin-bottom:2.5rem;
}

/* ============ desktop ============ */
@media (min-width: 820px){
  .hero{grid-template-columns:1.2fr .8fr;align-items:center;padding-inline:4rem}
  .hero-rule{right:44%}
  .site-header{padding:1.5rem 4rem}
  .section-inner{padding:7rem 4rem}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-badge{animation:none}
}

@property --draw{syntax:"<percentage>";inherits:false;initial-value:0%}

/* ============ services ============ */
.service-list{list-style:none}
.service{border-bottom:1px solid var(--hairline)}
html.js .service{
  border-image:linear-gradient(90deg, var(--hairline) var(--draw,0%), transparent 0) 1;
  transition:--draw 1s ease;
}
html.js .service.is-visible{--draw:100%}
.service-row{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;
  align-items:baseline;text-align:left;padding:1.4rem 0;
  transition:transform .15s ease;
}
.service-row:active{transform:scale(.985)}
.service-num{
  font-size:.75rem;color:var(--brand);font-weight:700;letter-spacing:.08em;
}
.service-name{
  font-family:var(--font-display);font-size:clamp(1.3rem, 4.5vw, 1.9rem);
}
.service-price{font-size:.85rem;opacity:.65;white-space:nowrap}
.service-desc{overflow:hidden}
html.js .service-desc{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1);
}
html.js .service-desc > .service-desc-inner{overflow:hidden;min-height:0}
html.js .service.is-open .service-desc{grid-template-rows:1fr}
.service-desc p{
  max-width:52ch;font-size:.95rem;opacity:.75;padding:0 0 1.4rem 2.1rem;
}
@media (prefers-reduced-motion: reduce){
  html.js .service-desc{transition:none}
  html.js .service{border-image:none;transition:none}
}

/* ============ gallery ============ */
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:1.5rem}
.gallery-counter{
  font-size:.85rem;letter-spacing:.15em;display:flex;gap:.35rem;opacity:.7;
}
.counter-current{color:var(--brand);font-weight:700}
.gallery-track{
  display:flex;gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:0 1.25rem 2rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-item{
  flex:0 0 min(72vw, 340px);aspect-ratio:3/4;
  scroll-snap-align:center;border-radius:2px;
}
.gallery-item > img, .gallery-item > .placeholder-note{
  transform:translateX(var(--px, 0px));
  transition:transform .1s linear;
}
@media (min-width:820px){
  .gallery-track{padding-inline:4rem}
}
@media (prefers-reduced-motion: reduce){
  .gallery-item > img, .gallery-item > .placeholder-note{transform:none;transition:none}
}

/* ============ contact ============ */
.contact-grid{display:grid;gap:2.5rem}
.contact-line{display:grid;gap:.15rem;margin-bottom:1.2rem}
.contact-k{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.contact-actions{display:grid;gap:.75rem}
.contact-action{
  display:grid;gap:.1rem;text-decoration:none;
  padding:1.1rem 1.3rem;border:1px solid var(--hairline);border-radius:2px;
  transition:transform .15s ease, border-color .2s;
}
.contact-action:active{transform:scale(.98)}
.contact-action:hover{border-color:var(--brand)}
.contact-action-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);font-weight:700}
.contact-action-value{font-family:var(--font-display);font-size:1.15rem}
@media (min-width:820px){
  .contact-grid{grid-template-columns:1fr 1.2fr;align-items:start}
}

/* ============ footer ============ */
.site-footer{overflow:hidden;padding-top:3rem}
.footer-watermark{
  font-family:var(--font-display);font-weight:600;text-align:center;
  font-size:clamp(6rem, 28vw, 18rem);line-height:.85;
  color:var(--brand);opacity:.12;user-select:none;
}
.footer-note{text-align:center;font-size:.8rem;opacity:.55;padding:1rem 0 1.5rem}

/* ============ floating CTA + sheet ============ */
.fab{
  position:fixed;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom));z-index:30;
  transform:translate(-50%, 150%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.fab.is-shown{transform:translate(-50%, 0)}
html:not(.js) .fab{display:none}
.sheet-overlay{
  position:fixed;inset:0;z-index:40;
  background:color-mix(in srgb, var(--ink) 45%, transparent);
  opacity:0;transition:opacity .3s;
}
.sheet-overlay.is-open{opacity:1}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--paper);border-radius:14px 14px 0 0;
  padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  display:grid;gap:.75rem;
  transform:translateY(105%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  max-width:560px;margin-inline:auto;
}
.sheet.is-open{transform:none}
.sheet-title{font-family:var(--font-display);font-size:1.25rem;margin-bottom:.25rem}
@media (prefers-reduced-motion: reduce){
  .fab,.sheet,.sheet-overlay{transition:none}
}