/* public/css/style.css */
:root{
  --ink:#07060a; --section-1:#0b0908; --section-2:#131010;
  --card:rgba(255,255,255,0.035); --line:rgba(255,255,255,0.09);
  --gold:#d8ad63; --gold-soft:#e9cf9a; --paper:#f4ecdd;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; padding:0; background:var(--ink); color:var(--paper); font-family:'Jost', sans-serif; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ===== HEADER / NAV ===== */
.banner{ position:fixed; top:0; left:0; width:100%; z-index:50; }
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 20px clamp(18px,5vw,56px);
  background:linear-gradient(180deg, rgba(7,6,10,0.82), rgba(7,6,10,0));
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.nav.scrolled{ background:rgba(7,6,10,0.92); padding:12px clamp(18px,5vw,56px); box-shadow:0 10px 30px rgba(0,0,0,0.45); backdrop-filter:blur(8px); }
.log a{ display:flex; align-items:center; text-decoration:none; }
.logo{ height:74px; width:auto; }
.logo-text{ display:none; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.6rem; letter-spacing:0.05em; color:var(--gold-soft); }
.manu{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); }
.manu1{ font-size:0.92rem; letter-spacing:0.02em; opacity:0.82; cursor:pointer; position:relative; white-space:nowrap; }
.manu1 a{ text-decoration:none; }
.manu1::after{ content:''; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--gold); transition:width .3s ease; }
.manu1:hover{ opacity:1; } .manu1:hover::after{ width:100%; }

.btn1,.btn2,.btn3{ font-family:'Jost'; font-size:0.82rem; letter-spacing:0.06em; padding:12px 26px; border-radius:999px; cursor:pointer; transition:all .3s ease; border:1px solid transparent; }
.btn1{ background:var(--gold); color:#120d08; border-color:var(--gold); }
.btn1:hover{ background:transparent; color:var(--gold-soft); border-color:var(--gold-soft); }
.btn2{ background:transparent; color:var(--paper); border-color:rgba(245,236,221,0.45); }
.btn2:hover{ border-color:var(--gold); color:var(--gold-soft); }
.btn3{ background:var(--gold); color:#120d08; border-color:var(--gold); }
.btn3:hover{ background:transparent; color:var(--gold-soft); border-color:var(--gold-soft); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:1.5px; background:var(--paper); display:block; }
@media (max-width:900px){
  .logo{ height:52px; }
  .manu{ position:fixed; top:0; right:0; height:100vh; width:min(72vw,320px); background:rgba(9,7,9,0.98); flex-direction:column; align-items:flex-start; padding:96px 32px 32px; gap:26px; transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); }
  .manu.open{ transform:translateX(0); }
  .btn1{ margin-top:6px; }
  .nav-toggle{ display:flex; }
}

/* ===== ANIMATED HERO ===== */
.hero{ position:relative; width:100%; height:100vh; min-height:620px; overflow:hidden;
  background: radial-gradient(120% 90% at 50% 22%, #241c14 0%, #120f0d 42%, #07060a 78%), linear-gradient(180deg, #08070a 0%, #0b0908 100%);
  isolation:isolate; background-size:cover; background-position:center; }

#starfield{ position:absolute; inset:0; width:100%; height:100%; z-index:1; transform: translate3d(calc(var(--px,0) * -6px), calc(var(--py,0) * -4px), 0); }
.dust-layer{ position:absolute; inset:0; pointer-events:none; z-index:2; transform: translate3d(calc(var(--px,0) * -14px), calc(var(--py,0) * -10px), 0); }
.dust{ position:absolute; border-radius:50%; background: radial-gradient(circle, rgba(233,207,154,0.55) 0%, rgba(233,207,154,0) 70%); animation: drift linear infinite; will-change: transform, opacity; }
@keyframes drift{ 0%{ transform: translateY(0) translateX(0); opacity:0; } 10%{ opacity: var(--dust-op, .5); } 90%{ opacity: var(--dust-op, .5); } 100%{ transform: translateY(-120px) translateX(30px); opacity:0; } }
.lens-glow{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; z-index:3; background: radial-gradient(circle at 62% 68%, rgba(216,173,99,0.16) 0%, rgba(216,173,99,0) 45%); transform: translate3d(calc(var(--px,0) * 10px), calc(var(--py,0) * 8px), 0); }
.stage{ position:absolute; inset:0; z-index:4; transform: translate3d(calc(var(--px,0) * -3px), calc(var(--py,0) * -2px), 0); }

.ground-shadow{ position:absolute; left:70%; bottom:11%; width:min(40vw,320px); height:22px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 72%); filter: blur(2px); opacity:0; transition: opacity 1.1s ease, left .6s ease; }
.hero[data-phase="0"] .ground-shadow{ opacity:0; }
.hero:not([data-phase="0"]):not([data-phase="14"]) .ground-shadow{ opacity:1; }

.studio-light{ position:absolute; z-index:2; left:81%; bottom:8%; width:min(20vw,240px); height:min(82vh,620px); transform:translate3d(120vw,0,0); opacity:0; pointer-events:none; transition:transform 3.1s cubic-bezier(.22,.68,.32,1), opacity 1.1s ease; }
.hero:not([data-phase="0"]) .studio-light{ transform:translate3d(-50%,0,0); opacity:1; }
.hero[data-phase="14"] .studio-light{ opacity:0; transition:opacity .85s ease; }
.umbrella-canopy{ position:absolute; right:3%; top:7%; width:clamp(100px,12vw,170px); height:clamp(90px,11vw,150px); overflow:hidden; border-radius:72% 72% 8% 8%; transform:rotate(8deg); background:radial-gradient(ellipse at 28% 45%, #fff9e9 0%, #f4e4c2 28%, #a18b68 58%, #211b14 100%); box-shadow:inset -18px -10px 24px rgba(25,18,12,0.65), 0 0 32px rgba(238,207,145,0.08); }
.umbrella-canopy::after{ content:''; position:absolute; inset:8% 8% 5%; border-radius:inherit; background:linear-gradient(120deg, rgba(255,255,255,0.72), rgba(255,255,255,0) 42% 70%, rgba(25,18,12,0.4)); }
.umbrella-rib{ position:absolute; z-index:1; left:10%; top:50%; width:90%; height:1px; background:rgba(74,55,32,0.55); transform-origin:left center; }
.rib-one{ transform:rotate(-24deg); } .rib-two{ transform:rotate(0deg); } .rib-three{ transform:rotate(24deg); }
.light-bulb{ position:absolute; z-index:2; right:42%; top:31%; width:clamp(18px,2vw,30px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, #fff 24%, #fff8d9 48%, #d8d9d2 68%, #303330 100%); box-shadow:0 0 16px 4px rgba(255,255,250,1), 0 0 72px 24px rgba(255,237,182,0.56); opacity:0; transition:opacity .7s ease, box-shadow .7s ease; }
.light-stand{ position:absolute; right:17%; bottom:0; width:10px; height:84%; }
.light-stand::before{ content:''; position:absolute; z-index:2; left:50%; top:-5px; width:18px; height:10px; transform:translateX(-50%); border-radius:3px; background:linear-gradient(180deg,#3e4140,#0b0d0d 62%,#555755); box-shadow:0 2px 4px rgba(0,0,0,.7); }
.stand-pole{ position:absolute; left:50%; top:0; width:7px; height:100%; transform:translateX(-50%); background:linear-gradient(90deg,#080a0a 0%,#343735 35%,#070908 68%,#4b4e4b 100%); border-radius:4px; box-shadow:2px 0 5px rgba(0,0,0,0.7), inset 1px 0 rgba(255,255,255,.16); }
.stand-leg{ position:absolute; z-index:1; bottom:0; left:50%; width:7px; height:39%; transform-origin:bottom center; background:linear-gradient(90deg,#070908 0%,#3c403e 38%,#080a09 72%,#555854 100%); border-radius:5px; box-shadow:2px 1px 4px rgba(0,0,0,.7); }
.stand-leg::after{ content:''; position:absolute; left:50%; bottom:-3px; width:13px; height:5px; transform:translateX(-50%); border-radius:3px; background:linear-gradient(180deg,#4d514e,#080a09); box-shadow:0 2px 3px rgba(0,0,0,.8); }
.stand-leg-one{ transform:translateX(-50%) rotate(-31deg); } .stand-leg-two{ transform:translateX(-50%) rotate(0deg); } .stand-leg-three{ transform:translateX(-50%) rotate(31deg); }
.light-stand::after{ content:''; position:absolute; z-index:-1; left:50%; bottom:-4px; width:clamp(58px,8vw,100px); height:12px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 72%); filter:blur(2px); }
.light-beam{ position:absolute; z-index:-1; left:-125%; top:17%; width:260%; height:58%; transform:rotate(-3deg); opacity:0; background:radial-gradient(ellipse at 54% 45%, rgba(255,255,244,0.52) 0%, rgba(255,226,167,0.27) 24%, rgba(216,173,99,0.1) 53%, rgba(216,173,99,0) 76%); filter:blur(13px); mix-blend-mode:screen; transition:opacity .9s ease; }
.hero[data-phase="5"] .light-bulb, .hero[data-phase="6"] .light-bulb, .hero[data-phase="7"] .light-bulb, .hero[data-phase="8"] .light-bulb, .hero[data-phase="9"] .light-bulb, .hero[data-phase="10"] .light-bulb, .hero[data-phase="11"] .light-bulb, .hero[data-phase="12"] .light-bulb, .hero[data-phase="13"] .light-bulb{ opacity:1; }
.hero[data-phase="5"] .light-beam, .hero[data-phase="6"] .light-beam, .hero[data-phase="7"] .light-beam, .hero[data-phase="8"] .light-beam, .hero[data-phase="9"] .light-beam, .hero[data-phase="10"] .light-beam, .hero[data-phase="11"] .light-beam, .hero[data-phase="12"] .light-beam, .hero[data-phase="13"] .light-beam{ opacity:1; }
.hero[data-phase="5"] .figure, .hero[data-phase="6"] .figure, .hero[data-phase="7"] .figure, .hero[data-phase="8"] .figure, .hero[data-phase="9"] .figure, .hero[data-phase="10"] .figure, .hero[data-phase="11"] .figure, .hero[data-phase="12"] .figure, .hero[data-phase="13"] .figure{ filter:brightness(1.36) contrast(1.06) drop-shadow(0 0 15px rgba(255,225,166,0.22)); }

.photographer{ position:absolute; left:70%; bottom:13%; font-size: clamp(7.5px, 1.35vw, 12.5px); width:0; height:0; transform: translate3d(-110vw, 0, 0); opacity:0; transition: transform 2.3s cubic-bezier(.22,.68,.32,1), opacity 1.1s ease, left .6s ease; }
.hero[data-phase="0"] .photographer{ transform: translate3d(-110vw,0,0); opacity:0; }
.hero:not([data-phase="0"]) .photographer{ transform: translate3d(-50%,0,0); opacity:1; }
.hero[data-phase="14"] .photographer{ opacity:0; transition: opacity .85s ease; }

.figure{ position:absolute; left:0; bottom:0; transform:translateX(-50%); width:8em; height:26em; }
.figure.walking .leg-left{ animation: step 0.62s ease-in-out infinite; }
.figure.walking .leg-right{ animation: step 0.62s ease-in-out infinite .31s; }
.figure.walking .arm-left{ animation: swing 0.62s ease-in-out infinite .31s; }
@keyframes step{ 0%,100%{ transform: rotate(6deg); } 50%{ transform: rotate(-10deg); } }
@keyframes swing{ 0%,100%{ transform: rotate(-8deg); } 50%{ transform: rotate(10deg); } }

.silhouette-part{ position:absolute; background: linear-gradient(150deg, #201b17 0%, #0a0908 62%, #050404 100%); box-shadow: inset -0.18em 0 0.3em rgba(216,173,99,0.28), inset 0.1em 0 0.2em rgba(0,0,0,0.6); }
.head{ width:3.1em; height:3.4em; left:2.45em; top:0; border-radius: 46% 46% 42% 42% / 52% 52% 46% 46%; }
.face-highlight{ position:absolute; right:0.1em; top:0.9em; width:0.55em; height:0.55em; border-radius:50%; background: radial-gradient(circle, rgba(233,207,154,0.9), rgba(233,207,154,0)); opacity:0; transition: opacity .5s ease; }
.hero[data-phase="5"] .face-highlight, .hero[data-phase="6"] .face-highlight, .hero[data-phase="7"] .face-highlight, .hero[data-phase="8"] .face-highlight{ opacity:1; }
.neck{ width:1.1em; height:0.7em; left:3.45em; top:3.1em; }
.torso{ width:5em; height:8.6em; left:1.5em; top:3.6em; border-radius: 1.4em 1.4em 0.6em 0.6em; clip-path: polygon(6% 0%, 94% 0%, 100% 92%, 84% 100%, 16% 100%, 0% 92%); }
.leg{ width:1.8em; height:9.6em; top:12em; border-radius:0.9em; transform-origin: top center; }
.leg-left{ left:2.1em; } .leg-right{ left:4.1em; }
.arm{ width:1.55em; height:8.1em; top:4em; border-radius:0.8em; transform-origin: top center; }
.arm-left{ left:0.35em; transform: rotate(-8deg); }
.arm-right{ left:6.15em; transform: rotate(9deg); transition: transform 1s cubic-bezier(.3,.6,.3,1); }
.hero[data-phase="4"] .arm-right{ transform: rotate(28deg); }
.hero[data-phase="8"] .arm-right{ transform: rotate(-42deg); }
.hero[data-phase="9"] .arm-right, .hero[data-phase="10"] .arm-right, .hero[data-phase="11"] .arm-right{ transform: rotate(-96deg); }

.camera{ position:absolute; width:3.1em; height:2em; left:-0.3em; top:7.3em; background: linear-gradient(150deg,#2a2521,#0c0a08 70%); border-radius:0.3em; box-shadow: inset 0 0 0.2em rgba(216,173,99,0.25), 0 0.15em 0.4em rgba(0,0,0,0.6); transition: transform 0.9s cubic-bezier(.3,.6,.3,1), left 0.9s ease, top 0.9s ease; transform-origin:center; }
.camera-lens{ position:absolute; width:1.3em; height:1.3em; border-radius:50%; left:0.9em; top:0.35em; background: radial-gradient(circle at 35% 35%, #4a6a7a, #0a0d0e 70%); box-shadow: 0 0 0 0.14em rgba(216,173,99,0.35); }
.camera-flash-dot{ position:absolute; left:1.2em; top:0.65em; width:0.7em; height:0.7em; border-radius:50%; background: radial-gradient(circle, #fff, rgba(255,255,255,0)); opacity:0; }
.hero[data-phase="12"] .camera-flash-dot{ opacity:1; animation: flashDot .35s ease-out; }
@keyframes flashDot{ 0%{opacity:0; transform:scale(0.4);} 30%{opacity:1; transform:scale(2.2);} 100%{opacity:0; transform:scale(3.2);} }
.hero[data-phase="4"] .camera, .hero[data-phase="5"] .camera, .hero[data-phase="6"] .camera, .hero[data-phase="7"] .camera{ left:2.9em; top:-8.2em; transform: rotate(0deg) scale(1.02); }
.hero[data-phase="8"] .camera{ left:-1.1em; top:6.4em; transform:rotate(-12deg); }
.hero[data-phase="9"] .camera, .hero[data-phase="10"] .camera, .hero[data-phase="11"] .camera{ left:-1.6em; top:0.6em; transform:rotate(-4deg) scale(1.12); }

.tripod{ position:absolute; left:2.6em; bottom:-1.6em; width:0; height:0; transition: left 1.1s cubic-bezier(.3,.6,.3,1), bottom 1.1s cubic-bezier(.3,.6,.3,1); }
.hero:not([data-phase="0"]):not([data-phase="1"]):not([data-phase="2"]) .tripod{ left:5.4em; bottom:0em; }
.tripod-leg{ position:absolute; left:0; top:-8.4em; width:0.35em; height:8.4em; background: linear-gradient(180deg,#2c2822,#0a0908); border-radius:0.2em; transform-origin: top center; transform: rotate(0deg); transition: transform 1s cubic-bezier(.34,1.2,.4,1), height .6s ease; }
.hero:not([data-phase="0"]):not([data-phase="1"]):not([data-phase="2"]) .leg-l{ transform: rotate(-19deg); }
.hero:not([data-phase="0"]):not([data-phase="1"]):not([data-phase="2"]) .leg-m{ transform: rotate(0deg); height:8.4em; }
.hero:not([data-phase="0"]):not([data-phase="1"]):not([data-phase="2"]) .leg-r{ transform: rotate(19deg); }
.tripod-head{ position:absolute; left:-0.55em; top:-8.9em; width:1.45em; height:0.45em; background: linear-gradient(90deg,#3a332a,#161310); border-radius:0.15em; }

.caption-wrap{ position:absolute; left:70%; bottom:17%; transform:translateX(-50%); max-width:38vw; display:flex; justify-content:center; padding:0 12px; pointer-events:none; z-index:6; }
.caption{ margin:0; text-align:center; color:var(--paper); font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing:0.04em; text-shadow: 0 0 22px rgba(216,173,99,0.35), 0 2px 18px rgba(0,0,0,0.6); opacity:0; transform: translateY(14px); transition: opacity 1s ease, transform 1s ease, letter-spacing 1.2s ease; }
.caption.visible{ opacity:1; transform:translateY(0); letter-spacing:0.06em; }

.vignette{ position:absolute; inset:0; pointer-events:none; z-index:5; background: radial-gradient(ellipse at 55% 60%, transparent 28%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.85) 100%); }

.hero-copy{ position:absolute; z-index:7; left:clamp(20px,6vw,72px); top:50%; transform: translateY(-48%); max-width:min(560px,42vw); }
.line1,.line3{ font-family:'Cormorant Garamond', serif; font-weight:500; margin:0; color:var(--paper); font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height:1.04; }
.line2{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; margin:0; color:var(--gold-soft); font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height:1.02; text-shadow:0 0 28px rgba(216,173,99,0.32); }
.line3{ margin-bottom:18px; }
.line4{ font-family:'Jost', sans-serif; font-weight:300; font-size: clamp(0.92rem,1.2vw,1.02rem); line-height:1.75; color:rgba(245,236,221,0.72); max-width:44ch; margin:0 0 30px; }
.twobtn{ display:flex; gap:16px; flex-wrap:wrap; }

@media (max-width:900px){
  .studio-light{ left:82%; width:min(31vw,190px); height:70%; bottom:10%; }
  .umbrella-canopy{ width:clamp(92px,22vw,142px); height:clamp(72px,17vw,108px); }
  .light-stand{ right:15%; }
  .photographer{ left:50%; } .ground-shadow{ left:50%; }
  .caption-wrap{ left:50%; bottom:6%; max-width:88vw; }
  .hero-copy{ left:50%; top:9%; transform:translateX(-50%); max-width:90vw; text-align:center; }
  .line4{ margin-left:auto; margin-right:auto; } .twobtn{ justify-content:center; }
}
@media (max-width:640px){ .photographer{ font-size: clamp(6px, 2.3vw, 8.5px); bottom:17%; } .hero-copy{ top:8%; } }

.flash-overlay{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:60; }
.hero[data-phase="12"] .flash-overlay{ animation: bigFlash .38s ease-out; }
@keyframes bigFlash{ 0%{opacity:0;} 18%{opacity:0.92;} 100%{opacity:0;} }
.shutter{ position:absolute; left:0; width:100%; height:52%; background:#050403; z-index:61; transition: transform 0.3s cubic-bezier(.7,0,.3,1); }
.shutter-top{ top:0; transform: translateY(-100%); } .shutter-bottom{ bottom:0; transform: translateY(100%); }
.hero[data-phase="13"] .shutter-top{ transform: translateY(0); } .hero[data-phase="13"] .shutter-bottom{ transform: translateY(0); }
.hero.no-transition .photographer, .hero.no-transition .arm-right, .hero.no-transition .camera, .hero.no-transition .tripod, .hero.no-transition .tripod-leg, .hero.no-transition .ground-shadow{ transition: none !important; }
.hero.static-hero .photographer, .hero.static-hero .caption-wrap, .hero.static-hero .stage{ display:none; }

@media (prefers-reduced-motion: reduce){
  .studio-light, .photographer, .arm-right, .camera, .tripod-leg, .tripod, .caption{ transition-duration: 0.4s !important; }
  .figure.walking .leg-left, .figure.walking .leg-right, .figure.walking .arm-left{ animation:none !important; }
  .dust{ animation-duration: 40s !important; }
}

/* ===== CONTENT SECTIONS ===== */
section[id]{ scroll-margin-top: 96px; }
.wrap{ max-width:1180px; margin:0 auto; padding: clamp(70px,10vw,120px) clamp(20px,6vw,56px); }
.sec-alt{ background:var(--section-2); }
.sec-heading{ font-family:'Cormorant Garamond', serif; font-weight:500; color:var(--paper); font-size:clamp(2rem,3.6vw,3rem); margin:0 0 18px; }
.sec-heading em{ font-style:italic; color:var(--gold-soft); }
.sec-text{ font-family:'Jost'; font-weight:300; line-height:1.85; color:rgba(245,236,221,0.75); max-width:64ch; font-size: clamp(0.98rem,1.1vw,1.05rem); white-space:pre-line; }

.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.about-frame{ aspect-ratio:4/5; border-radius:6px; background: linear-gradient(150deg,#241d16,#0c0a09); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:rgba(245,236,221,0.35); font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.1rem; overflow:hidden; }
.about-frame img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } .about-frame{ order:-1; max-width:360px; margin:0 auto; } }
.about-meta{ margin-top:18px; display:grid; gap:8px; font-size:0.92rem; color:rgba(245,236,221,0.7); }
.about-meta b{ color:var(--gold-soft); font-weight:500; }

.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.service-card{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:32px 28px; transition: border-color .3s ease, transform .3s ease; overflow:hidden; }
.service-card:hover{ border-color:rgba(216,173,99,0.5); transform:translateY(-4px); }
.service-card img{ width:100%; height:140px; object-fit:cover; border-radius:6px; margin-bottom:16px; }
.service-card h3{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.5rem; margin:0 0 10px; color:var(--gold-soft); }
.service-card p{ font-family:'Jost'; font-weight:300; font-size:0.92rem; line-height:1.7; color:rgba(245,236,221,0.68); margin:0; }
@media (max-width:920px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }

.style-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.style-chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:26px; }
.style-chip{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); text-align:center; }
.style-chip img{ width:100%; height:100px; object-fit:cover; }
.style-chip span{ display:block; padding:10px; font-size:0.85rem; letter-spacing:0.03em; color:var(--gold-soft); }
@media (max-width:820px){ .style-grid{ grid-template-columns:1fr; } }

.portfolio-block{ margin-top:48px; }
.portfolio-block:first-of-type{ margin-top:40px; }
.portfolio-block h3{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.5rem; color:var(--gold-soft); margin:0 0 6px; }
.portfolio-block p{ color:rgba(245,236,221,0.65); font-size:0.9rem; margin:0 0 18px; }
.portfolio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.portfolio-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; border:1px solid var(--line); transition: transform .3s ease; }
.portfolio-grid img:hover{ transform:scale(1.03); }
@media (max-width:920px){ .portfolio-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }

.experiences-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.experiences-list{ display:grid; gap:18px; margin-top:34px; }
.experience-card{ margin:0; padding:22px 24px; border-left:2px solid var(--gold); background:var(--card); }
.experience-card p{ margin:0 0 14px; color:rgba(245,236,221,0.78); line-height:1.8; white-space:pre-line; }
.experience-card cite{ color:var(--gold-soft); font-style:normal; font-size:0.9rem; }
.feedback-form-wrap{ padding:28px; border:1px solid var(--line); background:rgba(7,6,10,0.22); border-radius:8px; }
.feedback-form-wrap .sec-heading{ font-size:clamp(1.8rem,3vw,2.5rem); }
.feedback-form{ display:grid; gap:9px; margin-top:26px; }
.feedback-form label{ color:var(--gold-soft); font-size:0.88rem; }
.feedback-form label span{ color:rgba(245,236,221,0.5); }
.feedback-form input,.feedback-form textarea{ width:100%; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,0.04); color:var(--paper); padding:12px 13px; font:inherit; margin-bottom:9px; }
.feedback-form textarea{ resize:vertical; min-height:140px; }
.feedback-form input:focus,.feedback-form textarea:focus{ outline:1px solid var(--gold); border-color:var(--gold); }
.feedback-form button:disabled{ opacity:0.55; cursor:wait; }
.feedback-message{ min-height:1.4em; margin:4px 0 0; font-size:0.88rem; }
.feedback-message.success{ color:var(--gold-soft); }
.feedback-message.error{ color:#e0786c; }
@media (max-width:820px){ .experiences-grid{ grid-template-columns:1fr; } }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px; font-family:'Jost'; font-weight:300; color:rgba(245,236,221,0.78); }
.social-row{ display:flex; gap:14px; margin-top:18px; }
.social-row a{ width:40px; height:40px; display:grid; place-items:center; padding:9px; border:1px solid var(--line); border-radius:50%; text-decoration:none; }
.social-row a:hover{ border-color:var(--gold); color:var(--gold-soft); }
.social-row svg,.footer-social svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.social-row svg path,.footer-social svg path{ fill:currentColor; stroke:none; }
.social-row svg .social-play,.footer-social svg .social-play{ fill:var(--section-1); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

.cta-section{ text-align:center; background: radial-gradient(ellipse at 50% 30%, #1c150e 0%, #0b0908 70%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-section .sec-heading{ font-size:clamp(2.1rem,4.2vw,3.2rem); }
.cta-section .sec-text{ margin:0 auto 30px; }

footer{ padding:42px clamp(20px,5vw,56px) 24px; font-family:'Jost'; font-size:0.8rem; color:rgba(245,236,221,0.58); background:var(--section-1); border-top:1px solid var(--line); }
.footer-inner{ max-width:1180px; margin:0 auto 30px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; text-align:left; }
.footer-logo{ width:auto; height:56px; margin-bottom:10px; }
.footer-brand strong{ display:block; color:var(--gold-soft); font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:500; }
.footer-brand p{ margin:8px 0 0; max-width:280px; line-height:1.6; }
.footer-contact,.footer-social{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-contact a,.footer-contact span,.footer-social a{ color:inherit; text-decoration:none; }
.footer-contact a:hover,.footer-social a:hover,.footer-bottom a:hover{ color:var(--gold-soft); }
.footer-social{ flex-direction:row; flex-wrap:wrap; align-content:flex-start; }
.footer-social a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
.footer-bottom{ max-width:1180px; margin:0 auto; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px; }
.footer-bottom a{ color:var(--gold-soft); text-decoration:none; }
@media (max-width:700px){ .footer-inner{ grid-template-columns:1fr; gap:22px; } .footer-bottom{ flex-direction:column; } }
.skeleton{ color:rgba(245,236,221,0.4); font-style:italic; }