/* ============================================================
   G PICTORIA — shared stylesheet
   Linked by index.html and portfolio.html
   ============================================================ */

:root{
  --bg:      #0D0D0F;
  --bg-2:    #141417;
  --bg-3:    #1B1B1F;
  --ivory:   #ECE6D8;
  --muted:   #8F887A;
  --gold:    #C6A15B;
  --gold-lo: #9E7F42;
  --line:    rgba(198,161,91,.28);
  --line-2:  rgba(236,230,216,.10);

  --f-disp: "Cormorant Garamond", Georgia, serif;
  --f-body: "Jost", system-ui, sans-serif;
  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ivory);
  font-family:var(--f-body); font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.label{ font-family:var(--f-body); font-weight:400; font-size:.7rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); }
.display{ font-family:var(--f-disp); font-weight:500; line-height:1; letter-spacing:.005em; }

/* ---------- scene placeholders (swap with real <img>) ---------- */
.scene{ position:relative; overflow:hidden; background:#1a1712; }
.scene::before{ content:""; position:absolute; inset:0; z-index:0; }
.scene > img{ position:relative; z-index:1; }
.scene-golden::before{ background:radial-gradient(120% 100% at 22% 18%, rgba(214,161,91,.60), transparent 55%),radial-gradient(90% 90% at 85% 95%, rgba(30,16,8,.85), transparent),linear-gradient(150deg,#6f4c29,#241710); }
.scene-wed::before{ background:radial-gradient(110% 90% at 70% 20%, rgba(236,220,200,.5), transparent 55%),linear-gradient(160deg,#5a4a3c,#211812); }
.scene-shore::before{ background:radial-gradient(120% 100% at 80% 15%, rgba(214,180,120,.45), transparent 50%),linear-gradient(200deg,#173842,#0f2129 60%,#3a2c1c); }
.scene-city::before{ background:radial-gradient(90% 80% at 50% 110%, rgba(198,161,91,.45), transparent 55%),linear-gradient(180deg,#14202e,#0c1119); }
.scene-studio::before{ background:radial-gradient(90% 90% at 30% 30%, rgba(180,150,110,.4), transparent 55%),linear-gradient(150deg,#2a251f,#0f0d0b); }
.scene-family::before{ background:radial-gradient(110% 90% at 25% 80%, rgba(214,161,91,.5), transparent 55%),linear-gradient(150deg,#5c4327,#1c140d); }
.scene-mist::before{ background:radial-gradient(100% 90% at 60% 30%, rgba(200,190,175,.4), transparent 55%),linear-gradient(170deg,#3a4247,#14181c); }
.scene-rose::before{ background:radial-gradient(110% 90% at 30% 20%, rgba(224,170,150,.45), transparent 55%),linear-gradient(150deg,#5a3a34,#1e1512); }
.scene::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.5)); }

/* ---------- nav ---------- */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; transition:background .4s ease, padding .4s ease, border-color .4s ease; border-bottom:1px solid transparent; }
header.nav.solid{ background:rgba(13,13,15,.78); backdrop-filter:blur(12px); padding:15px 0; border-bottom:1px solid var(--line-2); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; }
.brand{ font-family:var(--f-disp); font-weight:600; font-size:1.7rem; letter-spacing:.02em; display:flex; align-items:baseline; gap:.06em; }
.brand .g{ color:var(--gold); font-style:italic; }
.brand small{ font-family:var(--f-body); font-weight:300; font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); margin-left:10px; align-self:center; }
.nav__links{ display:flex; gap:38px; align-items:center; }
.nav__links a{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:400; color:var(--ivory); position:relative; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold); transition:width .3s ease; }
.nav__links a:hover::after, .nav__links a:focus-visible::after{ width:100%; }
.nav__cta{ border:1px solid var(--gold); padding:11px 22px !important; color:var(--gold) !important; transition:all .3s ease; }
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--gold); color:var(--bg) !important; }

/* ---------- buttons ---------- */
.btn{ display:inline-block; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; padding:16px 34px; border:1px solid var(--gold); color:var(--gold); transition:all .3s ease; cursor:pointer; }
.btn--fill{ background:var(--gold); color:var(--bg); }
.btn--fill:hover{ background:transparent; color:var(--gold); }
.btn--line:hover{ background:var(--gold); color:var(--bg); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,13,15,.86) 0%, rgba(13,13,15,.55) 45%, rgba(13,13,15,.35) 100%); }
.hero__in{ position:relative; z-index:3; padding-top:80px; }
.hero .label{ margin-bottom:30px; opacity:0; animation:rise .9s ease .2s forwards; }
.hero h1{ font-size:clamp(3.2rem, 8.5vw, 8rem); margin:0 0 30px; max-width:15ch; }
.hero h1 .ln{ display:block; opacity:0; transform:translateY(28px); animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 .ln:nth-child(1){ animation-delay:.35s; }
.hero h1 .ln:nth-child(2){ animation-delay:.5s; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero__sub{ max-width:46ch; color:var(--muted); font-size:1.08rem; letter-spacing:.02em; margin:0 0 40px; opacity:0; animation:rise .9s ease .7s forwards; }
.hero__cta{ display:flex; gap:18px; flex-wrap:wrap; opacity:0; animation:rise .9s ease .85s forwards; }
.hero__side{ position:absolute; right:34px; bottom:120px; z-index:3; writing-mode:vertical-rl; font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:16px; }
.hero__side::before{ content:""; width:1px; height:60px; background:var(--line); }
.scroll-cue{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3; font-size:.62rem; letter-spacing:.35em; text-transform:uppercase; color:var(--muted); text-align:center; opacity:0; animation:rise 1s ease 1.1s forwards; }
.scroll-cue span{ display:block; width:1px; height:46px; background:linear-gradient(var(--gold),transparent); margin:12px auto 0; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- marquee ---------- */
.marquee{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--bg-2); padding:22px 0; overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:36px; animation:slide 26s linear infinite; }
.marquee span{ font-family:var(--f-disp); font-style:italic; font-size:1.6rem; color:var(--ivory); }
.marquee b{ color:var(--gold); font-weight:400; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- section shell ---------- */
section.block{ padding:120px 0; }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
.head h2{ font-size:clamp(2.4rem,5vw,4rem); margin:14px 0 0; max-width:16ch; }
.head .head__r{ color:var(--muted); font-size:.95rem; max-width:34ch; text-align:right; }

/* ---------- gallery (home preview) ---------- */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:16px; }
.tile{ position:relative; overflow:hidden; cursor:pointer; }
.tile .scene{ position:absolute; inset:0; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tile:hover .scene{ transform:scale(1.08); }
.tile__cap{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background:linear-gradient(transparent 45%, rgba(9,9,11,.82)); opacity:0; transition:opacity .4s ease; }
.tile:hover .tile__cap, .tile:focus-within .tile__cap{ opacity:1; }
.tile__cap .k{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.tile__cap .t{ font-family:var(--f-disp); font-size:1.5rem; margin-top:4px; }
.t-a{ grid-column:span 4; grid-row:span 3; }
.t-b{ grid-column:span 2; grid-row:span 3; }
.t-c{ grid-column:span 2; grid-row:span 2; }
.t-d{ grid-column:span 2; grid-row:span 2; }
.t-e{ grid-column:span 2; grid-row:span 2; }
.gallery__more{ text-align:center; margin-top:44px; }

/* ---------- services ---------- */
#services{ background:var(--bg-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.svc__row{ display:grid; grid-template-columns:90px 1fr auto; gap:30px; align-items:center; padding:36px 6px; border-top:1px solid var(--line-2); transition:padding-left .35s ease, background .35s ease; }
.svc__row:last-child{ border-bottom:1px solid var(--line-2); }
.svc__row:hover{ padding-left:22px; background:linear-gradient(90deg, rgba(198,161,91,.06), transparent 60%); }
.svc__no{ font-family:var(--f-disp); font-style:italic; font-size:2.2rem; color:var(--gold); }
.svc__main h3{ font-family:var(--f-disp); font-weight:500; font-size:2rem; margin:0 0 6px; }
.svc__main p{ margin:0; color:var(--muted); max-width:60ch; font-size:1rem; }
.svc__tags{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:right; }
.svc__tags span{ color:var(--gold); }

/* ---------- pricing ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price{ position:relative; background:var(--bg-2); border:1px solid var(--line-2); padding:42px 34px; display:flex; flex-direction:column; transition:transform .35s ease, border-color .35s ease; }
.price:hover{ transform:translateY(-6px); border-color:var(--line); }
.price--feat{ background:linear-gradient(180deg, rgba(198,161,91,.10), var(--bg-2) 60%); border-color:var(--line); }
.price__tag{ position:absolute; top:-1px; right:24px; background:var(--gold); color:var(--bg); font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; padding:6px 14px; }
.price__k{ font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.price__name{ font-family:var(--f-disp); font-weight:500; font-size:2rem; margin:12px 0 4px; }
.price__val{ font-family:var(--f-disp); font-size:3rem; color:var(--ivory); line-height:1; margin:18px 0 6px; }
.price__val small{ font-family:var(--f-body); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.price__desc{ color:var(--muted); font-size:.95rem; margin:0 0 24px; }
.price__list{ list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line-2); }
.price__list li{ padding:12px 0; border-bottom:1px solid var(--line-2); font-size:.92rem; color:#c9c2b3; display:flex; gap:12px; align-items:flex-start; }
.price__list li::before{ content:"—"; color:var(--gold); }
.price .btn{ margin-top:auto; text-align:center; }
.pricing__note{ text-align:center; margin-top:38px; color:var(--muted); font-size:.95rem; }
.pricing__note b{ color:var(--gold); font-weight:400; }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.about__img{ position:relative; }
.about__img .scene{ aspect-ratio:4/5; border:1px solid var(--line); }
.about__img .badge{ position:absolute; right:-22px; bottom:34px; background:var(--gold); color:var(--bg); font-family:var(--f-disp); font-style:italic; font-size:1.3rem; padding:16px 26px; line-height:1.1; text-align:center; }
.about__img .badge small{ display:block; font-family:var(--f-body); font-weight:400; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; margin-top:4px; }
.about h2{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin:16px 0 24px; }
.about p{ color:#c9c2b3; font-size:1.1rem; margin:0 0 18px; max-width:56ch; font-weight:300; }
.about .sign{ font-family:var(--f-disp); font-style:italic; font-size:2rem; color:var(--gold); margin-top:26px; }

/* ---------- contact + form ---------- */
#contact{ position:relative; overflow:hidden; }
#contact > .scene{ position:absolute; inset:0; z-index:0; opacity:.22; }
#contact .wrap{ position:relative; z-index:2; }
.contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.contact__h{ font-family:var(--f-disp); font-weight:500; font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; margin:16px 0 22px; }
.contact__h em{ font-style:italic; color:var(--gold); }
.contact__lead{ color:var(--muted); font-size:1.05rem; max-width:42ch; margin:0 0 26px; }
.mail{ display:inline-block; font-family:var(--f-disp); font-style:italic; font-size:clamp(1.5rem,3.4vw,2.2rem); color:var(--gold); margin:0 0 12px; border-bottom:1px solid transparent; transition:border-color .3s; }
.mail:hover{ border-color:var(--gold); }
.contact__loc{ color:var(--muted); letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; }

.form{ background:var(--bg-2); border:1px solid var(--line-2); padding:40px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line-2); color:var(--ivory);
  font-family:var(--f-body); font-weight:300; font-size:.95rem; padding:13px 14px; border-radius:0; transition:border-color .25s ease;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 20px) 20px, calc(100% - 14px) 20px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.form .btn{ width:100%; text-align:center; border:none; background:var(--gold); color:var(--bg); }
.form .btn:hover{ background:var(--gold-lo); }
.hp{ position:absolute; left:-9999px; }
.form__status{ margin-top:16px; font-size:.9rem; min-height:1.2em; }
.form__status.ok{ color:var(--gold); }
.form__status.err{ color:#d98a6a; }

/* ---------- sub-page hero (portfolio) ---------- */
.subhero{ position:relative; padding:180px 0 80px; overflow:hidden; border-bottom:1px solid var(--line-2); }
.subhero .scene{ position:absolute; inset:0; z-index:0; opacity:.35; }
.subhero__in{ position:relative; z-index:2; }
.subhero h1{ font-family:var(--f-disp); font-weight:500; font-size:clamp(3rem,7vw,6rem); line-height:1; margin:18px 0 0; }
.subhero p{ color:var(--muted); max-width:48ch; margin:22px 0 0; font-size:1.05rem; }

/* ---------- filters ---------- */
.filters{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0 0 44px; }
.filters button{ background:none; border:1px solid var(--line-2); color:var(--ivory); font-family:var(--f-body); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; padding:11px 22px; cursor:pointer; transition:all .28s ease; }
.filters button:hover{ border-color:var(--gold); color:var(--gold); }
.filters button.active{ background:var(--gold); border-color:var(--gold); color:var(--bg); }

/* ---------- portfolio grid ---------- */
.port-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.port-item{ position:relative; overflow:hidden; aspect-ratio:4/5; cursor:pointer; }
.port-item.tall{ grid-row:span 1; aspect-ratio:4/6; }
.port-item .scene{ position:absolute; inset:0; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.port-item:hover .scene{ transform:scale(1.07); }
.port-item .tile__cap{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; background:linear-gradient(transparent 45%, rgba(9,9,11,.85)); opacity:0; transition:opacity .4s ease; }
.port-item:hover .tile__cap, .port-item:focus-within .tile__cap{ opacity:1; }
.port-item.hide{ display:none; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line-2); padding:44px 0; }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot .brand{ font-size:1.4rem; }
.foot__meta{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.foot__meta.gold{ color:var(--gold); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:940px){
  .about{ grid-template-columns:1fr; gap:40px; }
  .contact{ grid-template-columns:1fr; gap:40px; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .t-a{ grid-column:span 2; grid-row:span 2; }
  .t-b,.t-c,.t-d,.t-e{ grid-column:span 1; grid-row:span 1; }
  .hero__side{ display:none; }
  .pricing{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .port-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .nav__links a:not(.nav__cta){ display:none; }
  .svc__row{ grid-template-columns:60px 1fr; }
  .svc__tags{ display:none; }
  .head{ flex-direction:column; align-items:flex-start; }
  .head .head__r{ text-align:left; }
  .about__img .badge{ right:14px; }
  .form__row{ grid-template-columns:1fr; }
  .form{ padding:28px; }
  .port-grid{ grid-template-columns:1fr; }
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  [style*="animation"]{ opacity:1 !important; transform:none !important; }
  .hero .ln{ opacity:1 !important; transform:none !important; }
}