/* ============================================================
   Kaido Studios — shared stylesheet
   Used by index.html and every portfolio-*.html page
   ============================================================ */

  :root{
    --bg: #121110;
    --bg-alt: #1a1815;
    --bg-raised: #201d18;
    --ink: #f2ede2;
    --ink-dim: #a89f8f;
    --ink-faint: #6f695d;
    --gold: #c9a35f;
    --gold-soft: #dbc191;
    --sage: #7c8663;
    --sage-dark: #454b38;
    --line: rgba(242,237,226,0.11);
    --line-strong: rgba(242,237,226,0.22);
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:200;
    opacity:0.035;
    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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    letter-spacing:0.005em;
  }

  a{color:inherit; text-decoration:none;}

  img{max-width:100%; display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold-soft);
    font-weight:500;
  }

  .script{
    font-family:'Petit Formal Script', cursive;
    font-weight:400;
    color:var(--gold-soft);
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    padding:22px 0;
    background:linear-gradient(to bottom, rgba(18,17,16,0.92), rgba(18,17,16,0));
    transition:background 0.4s ease, padding 0.4s ease;
  }
  header.scrolled{
    background:rgba(18,17,16,0.88);
    backdrop-filter:blur(10px);
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-mark{
    width:auto;
    height:36px;
    flex-shrink:0;
    mix-blend-mode:screen;
  }
  .brand-text{
    font-family:'Fraunces', serif;
    font-size:1.02rem;
    letter-spacing:0.14em;
    line-height:1.05;
  }
  .brand-text small{
    display:block;
    font-family:'Work Sans', sans-serif;
    font-size:0.56rem;
    letter-spacing:0.32em;
    color:var(--ink-dim);
    margin-top:3px;
  }
  .nav-links{
    display:flex;
    gap:38px;
    font-size:0.82rem;
    letter-spacing:0.05em;
    color:var(--ink-dim);
  }
  .nav-links a{
    position:relative;
    padding-bottom:4px;
    transition:color 0.25s ease;
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:0;
    height:1px; background:var(--gold);
    transition:right 0.3s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{right:0;}
  .nav-cta{
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--line-strong);
    padding:9px 20px;
    font-size:0.76rem;
    letter-spacing:0.08em;
    border-radius:2px;
    transition:border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  }
  .nav-cta svg{ color:#25D366; flex-shrink:0; }
  .nav-cta:hover{ border-color:var(--gold); color:var(--gold-soft); background:rgba(201,163,95,0.08); }
  .nav-toggle{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    padding-top:120px;
    padding-bottom:80px;
    background:
      radial-gradient(ellipse 70% 55% at 78% 30%, rgba(124,134,99,0.14), transparent 60%),
      radial-gradient(ellipse 60% 50% at 15% 85%, rgba(201,163,95,0.09), transparent 60%),
      var(--bg);
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  .hero-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
  }
  .hero-eyebrow .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--sage);
    box-shadow:0 0 0 3px rgba(124,134,99,0.2);
  }
  .hero h1{
    font-size:clamp(2.6rem, 5vw, 4.4rem);
    line-height:1.04;
    font-weight:400;
    color:var(--ink);
  }
  .hero h1 em{
    font-style:italic;
    color:var(--gold-soft);
    font-weight:300;
  }
  .hero p.lede{
    margin-top:26px;
    max-width:480px;
    font-size:1.05rem;
    color:var(--ink-dim);
    line-height:1.75;
  }
  .hero-actions{
    margin-top:38px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    font-size:0.84rem;
    letter-spacing:0.05em;
    border-radius:2px;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  .btn-primary{
    background:var(--sage);
    color:#12140f;
    font-weight:500;
    border:1px solid var(--sage);
  }
  .btn-primary:hover{
    background:var(--gold);
    border-color:var(--gold);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(201,163,95,0.18);
  }
  .btn-ghost{
    border:1px solid var(--line-strong);
    color:var(--ink);
  }
  .btn-ghost:hover{
    border-color:var(--ink-dim);
    transform:translateY(-2px);
  }
  .hero-stats{
    margin-top:56px;
    display:flex;
    gap:44px;
  }
  .hero-stats div span{
    display:block;
    font-family:'Fraunces', serif;
    font-size:1.6rem;
    color:var(--gold-soft);
  }
  .hero-stats div small{
    display:block;
    margin-top:4px;
    font-size:0.72rem;
    letter-spacing:0.06em;
    color:var(--ink-faint);
  }

  /* Aperture / lens signature element */
  .aperture-outer{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .aperture-stage{
    position:relative;
    aspect-ratio:1/1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    will-change:transform;
    transform-origin:50% 50%;
  }
  .aperture-svg{
    width:92%;
    height:92%;
    animation:apertureBreathe 8s ease-in-out infinite;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(124,134,99,0.10));
  }
  @keyframes apertureBreathe{
    0%,100%{ transform:rotate(0deg) scale(1); }
    50%{ transform:rotate(3deg) scale(0.985); }
  }

  .pola{ transform-box:fill-box; transform-origin:center; opacity:0; }
.p1{ animation:polaDrop  15s linear infinite; }
.p2{ animation:polaDrop2 15s linear infinite 5s; }
.p3{ animation:polaDrop3 15s linear infinite 10s; }

@keyframes polaDrop{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  3%{ opacity:1; }
  15%{ transform:translate(0,120px) rotate(-3deg); }
  55%{ transform:translate(-20px,140px) rotate(-9deg); opacity:1; }
  85%{ transform:translate(-36px,155px) rotate(-14deg); opacity:.35; }
  100%{ transform:translate(-46px,166px) rotate(-17deg); opacity:0; }
}
@keyframes polaDrop2{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  3%{ opacity:1; }
  15%{ transform:translate(0,122px) rotate(2deg); }
  55%{ transform:translate(16px,142px) rotate(7deg); opacity:1; }
  85%{ transform:translate(30px,157px) rotate(12deg); opacity:.35; }
  100%{ transform:translate(40px,168px) rotate(15deg); opacity:0; }
}
@keyframes polaDrop3{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  3%{ opacity:1; }
  15%{ transform:translate(0,118px) rotate(-1deg); }
  55%{ transform:translate(-4px,138px) rotate(3deg); opacity:1; }
  85%{ transform:translate(-8px,153px) rotate(6deg); opacity:.35; }
  100%{ transform:translate(-10px,164px) rotate(8deg); opacity:0; }
}

  /* ---------- SECTION SHARED ---------- */
  section{
    padding:120px 0;
    position:relative;
  }
  .section-head{
    max-width:620px;
    margin-bottom:64px;
  }
  .section-head h2{
    font-size:clamp(2rem, 3.4vw, 2.9rem);
    margin-top:14px;
    font-weight:400;
  }
  .section-head p{
    margin-top:18px;
    color:var(--ink-dim);
    font-size:1rem;
    max-width:520px;
  }
  .divider{
    height:1px;
    background:linear-gradient(to right, var(--line-strong), transparent);
    width:70px;
  }

  /* ---------- ABOUT ---------- */
  .about{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .about-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
    align-items:center;
  }
  .about-frame{
    aspect-ratio:4/5;
    border:1px solid var(--line-strong);
    padding:18px;
    position:relative;
  }
  .about-frame-inner{
    width:100%; height:100%;
    background:
      linear-gradient(155deg, rgba(124,134,99,0.35), rgba(18,17,16,0.9) 60%),
      linear-gradient(320deg, rgba(201,163,95,0.28), transparent 55%);
    display:flex;
    align-items:flex-end;
    padding:26px;
  }
  .about-frame-inner span{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:1.3rem;
    color:var(--ink);
    line-height:1.3;
  }
  .about-copy p{
    color:var(--ink-dim);
    margin-bottom:20px;
    font-size:1.02rem;
    line-height:1.85;
  }
  .about-copy p:first-of-type{
    color:var(--ink);
    font-size:1.12rem;
  }
  .about-tags{
    margin-top:30px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .about-tags span{
    font-size:0.72rem;
    letter-spacing:0.05em;
    padding:8px 14px;
    border:1px solid var(--line-strong);
    border-radius:20px;
    color:var(--ink-dim);
  }

  /* ---------- SERVICES ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--bg);
    padding:38px 34px;
    transition:background 0.3s ease;
    position:relative;
  }
  .service-card:hover{ background:var(--bg-raised); }
  .service-card .num{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:0.85rem;
    color:var(--sage);
    margin-bottom:22px;
    display:block;
  }
  .service-card h3{
    font-size:1.18rem;
    font-weight:400;
    margin-bottom:10px;
  }
  .service-card p{
    font-size:0.88rem;
    color:var(--ink-faint);
    line-height:1.6;
  }
  /* ---------- PORTFOLIO ---------- */
  .portfolio{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
  .portfolio-card{
    display:block;
    aspect-ratio:3/4;
    border:1px solid var(--line-strong);
    position:relative;
    overflow:hidden;
    transition:transform 0.35s ease, border-color 0.3s ease;
  }
  .portfolio-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
  .portfolio-card:nth-child(1){ background:linear-gradient(160deg,#3a3f2c,#181712 70%); }
  .portfolio-card:nth-child(2){ background:linear-gradient(200deg,#4d4531,#161512 70%); }
  .portfolio-card:nth-child(3){ background:linear-gradient(140deg,#5a4a37,#171512 70%); }
  .portfolio-card:nth-child(4){ background:linear-gradient(180deg,#404a3a,#151511 70%); }
  .portfolio-thumb{
    position:absolute; inset:0;
  }
  .portfolio-thumb img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.6s ease;
  }
  .portfolio-card:hover .portfolio-thumb img{ transform:scale(1.06); }
  .portfolio-card-label{
    position:absolute; left:0; right:0; bottom:0;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  }
  .portfolio-card-label span{
    font-family:'Fraunces', serif;
    font-size:1.05rem;
    color:var(--ink);
    line-height:1.25;
  }
  .portfolio-card-label svg{
    color:var(--gold-soft);
    flex-shrink:0;
    transition:transform 0.3s ease;
  }
  .portfolio-card:hover .portfolio-card-label svg{ transform:translate(3px,-3px); }
  .portfolio-cta{
    margin-top:44px;
    display:flex;
    align-items:center;
    gap:16px;
    color:var(--ink-dim);
    font-size:0.92rem;
  }
  .portfolio-cta a{
    color:var(--gold-soft);
    border-bottom:1px solid var(--gold-soft);
    padding-bottom:2px;
  }

  /* ---------- PRICING ---------- */
  .pricing-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:28px;
    align-items:stretch;
  }
  
  .pricing-badge{
    position:absolute;
    top:-13px; left:50%;
    transform:translateX(-50%);
    background:var(--gold);
    color:#12140f;
    font-size:0.66rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:20px;
    white-space:nowrap;
  }
  .pricing-head h3{
    font-size:1.5rem;
    font-weight:400;
    margin-bottom:6px;
  }
  .pricing-sub{
    font-size:0.78rem;
    letter-spacing:0.05em;
    color:var(--ink-faint);
    text-transform:uppercase;
  }
  .pricing-price{
    margin:28px 0;
    display:flex;
    align-items:baseline;
    gap:4px;
  }
  .price-currency{
    font-family:'Fraunces', serif;
    font-size:1.35rem;
    color:var(--gold-soft);
  }
  .price-count{
    font-family:'Fraunces', serif;
    font-size:3rem;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
    color:var(--ink);
    line-height:1;
  }
  .pricing-price small{
    font-size:0.72rem;
    color:var(--ink-faint);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-left:4px;
    align-self:flex-end;
  }
  .pricing-list{
    list-style:none;
    margin:0 0 32px;
    padding:0;
  }
  .pricing-list li{
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:0.92rem;
    color:var(--ink-dim);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .pricing-list li:last-child{ border-bottom:none; }
  .pricing-list li::before{
    content:"\2713";
    color:var(--gold-soft);
    font-size:0.82rem;
    flex-shrink:0;
  }
  .pricing-cta{
    width:100%;
    justify-content:center;
  }
  .pricing-note{
    margin-top:28px;
    font-size:0.78rem;
    color:var(--ink-faint);
    text-align:center;
  }

  .pricing-card{
    background:var(--bg-raised);
    border:1px solid var(--line-strong);
    border-radius:4px;
    padding:40px 32px;
    position:relative;
    transition:transform 0.35s cubic-bezier(.34,1.56,.64,1), border-color 0.35s ease, box-shadow 0.35s ease;
  }
  .pricing-card:hover{
    transform:translateY(-14px);
    border-color:var(--gold);
    box-shadow:0 24px 50px rgba(0,0,0,0.35);
  }
  .pricing-card.featured{
    border-color:var(--gold);
    background:linear-gradient(160deg, rgba(201,163,95,0.09), var(--bg-raised) 62%);
    transform:translateY(-14px);
  }
  .pricing-card.featured:hover{
    transform:translateY(-28px);
    box-shadow:0 28px 60px rgba(0,0,0,0.4);
  }

  /* ---------- CONTACT ---------- */
  .contact{
    background:
      radial-gradient(ellipse 60% 60% at 85% 20%, rgba(124,134,99,0.12), transparent 60%),
      var(--bg-alt);
    border-top:1px solid var(--line);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:70px;
  }
  .contact h2{
    font-size:clamp(2.1rem, 4vw, 3.2rem);
    font-weight:400;
    line-height:1.12;
  }
  .contact-lede{
    margin-top:20px;
    color:var(--ink-dim);
    max-width:460px;
    font-size:1rem;
    line-height:1.8;
  }
  .contact-methods{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .method{
    background:var(--bg);
    padding:22px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:background 0.25s ease;
  }
  .method:hover{ background:var(--bg-raised); }
  .method-label{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .method-label .ico{
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-soft);
    flex-shrink:0;
  }
  .method-label div small{
    display:block;
    color:var(--ink-faint);
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-bottom:3px;
  }
  .method-label div span{
    font-size:1rem;
  }
  .method .go{
    color:var(--ink-faint);
    font-size:0.8rem;
    transition:color 0.25s ease, transform 0.25s ease;
  }
  .method:hover .go{ color:var(--gold-soft); transform:translateX(3px); }

  .contact-card{
    border:1px solid var(--line-strong);
    padding:44px 38px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:rgba(124,134,99,0.05);
  }
  .contact-card .top small{
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--sage);
  }
  .contact-card .top p{
    margin-top:16px;
    font-family:'Fraunces', serif;
    font-size:1.3rem;
    line-height:1.5;
    color:var(--ink);
  }
  .contact-card .bottom{
    margin-top:40px;
  }
  .contact-card .bottom .btn{
    width:100%;
    justify-content:center;
  }
  .contact-card .bottom small{
    display:block;
    margin-top:14px;
    text-align:center;
    color:var(--ink-faint);
    font-size:0.78rem;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:48px 0;
    border-top:1px solid var(--line);
  }
  .footer-grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-grid .brand-text{ font-size:0.9rem; }
  .footer-links{
    display:flex;
    gap:28px;
    font-size:0.82rem;
    color:var(--ink-dim);
  }
  .footer-links a:hover{ color:var(--gold-soft); }
  .footer-note{
    font-size:0.76rem;
    color:var(--ink-faint);
  }

  /* ---------- SCROLL REVEAL ---------- */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:2px;
    width:0%;
    background:linear-gradient(to right, var(--sage), var(--gold));
    z-index:300;
    transition:width 0.1s linear;
  }
  .reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-left{
    opacity:0;
    transform:translateX(-26px);
    transition:opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  }
  .reveal-left.in-view{ opacity:1; transform:translateX(0); }
  .reveal-right{
    opacity:0;
    transform:translateX(26px);
    transition:opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  }
  .reveal-right.in-view{ opacity:1; transform:translateX(0); }
  .reveal-scale{
    opacity:0;
    transform:scale(0.92);
    transition:opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  }
  .reveal-scale.in-view{ opacity:1; transform:scale(1); }
  .reveal-line{
    width:0;
    transition:width 0.9s cubic-bezier(.22,1,.36,1);
  }
  .reveal-line.in-view{ width:70px; }
  .stat-count{ display:inline-block; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; gap:70px; }
    .aperture-outer{ max-width:280px; margin:0 auto; }
    .about-grid{ grid-template-columns:1fr; }
    .about-frame{ max-width:340px; }
    .service-card{ padding:26px 18px; }
    .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
    .pricing-grid{ grid-template-columns:1fr; gap:22px; }
    .pricing-card.featured{ transform:none; }
    .pricing-card.featured:hover{ transform:translateY(-6px); }
    .contact-grid{ grid-template-columns:1fr; }
    .nav-links{ display:none; }
  }
  @media (max-width: 560px){
    .wrap{ padding:0 20px; }
    section{ padding:80px 0; }
    .service-card{ padding:16px 8px; }
    .service-card .num{ font-size:0.62rem; margin-bottom:8px; }
    .service-card h3{ font-size:0.76rem; line-height:1.25; margin-bottom:0; }
    .service-card p{ display:none; }
    .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
    .hero-stats{ gap:28px; }
    .nav-cta{ padding:8px 14px; font-size:0.7rem; }
  }

  /* ---------- GALLERY HERO ---------- */
  .gallery-hero{
    padding-top:160px;
    padding-bottom:60px;
    background:
      radial-gradient(ellipse 70% 55% at 78% 20%, rgba(124,134,99,0.12), transparent 60%),
      var(--bg);
  }
  .gallery-hero h1{
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    margin-top:14px;
    font-weight:400;
  }
  .gallery-hero p{
    margin-top:18px;
    color:var(--ink-dim);
    font-size:1.02rem;
    max-width:560px;
    line-height:1.75;
  }
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:32px;
    font-size:0.85rem;
    color:var(--ink-dim);
    border-bottom:1px solid transparent;
    transition:color 0.25s ease, border-color 0.25s ease;
  }
  .back-link:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

  /* ---------- EVENTS / PHOTO GRID ---------- */
  .gallery-events{
    padding-top:20px;
    padding-bottom:140px;
  }
  .event-block{
    margin-bottom:88px;
  }
  .event-block:last-child{ margin-bottom:0; }
  .event-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:28px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .event-header h2{
    font-size:1.6rem;
    font-weight:400;
  }
  .event-header p{
    font-size:0.85rem;
    letter-spacing:0.04em;
    color:var(--ink-faint);
    text-transform:uppercase;
  }
  .photo-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .photo-tile{
    aspect-ratio:  3 / 2;
    border:1px solid var(--line-strong);
    overflow:hidden;
    position:relative;
    background:linear-gradient(155deg, rgba(124,134,99,0.16), rgba(18,17,16,0.9) 65%);
  }
  .photo-tile img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.6s ease;
  }
  .photo-tile:hover img{ transform:scale(1.05); }
  .photo-tile.photo-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--ink-faint);
  }
  .photo-tile.photo-empty svg{ opacity:0.55; }
  .photo-tile.photo-empty span{
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .empty-state{
    padding:60px 0;
    text-align:center;
    color:var(--ink-faint);
    font-size:0.95rem;
    border:1px dashed var(--line-strong);
  }

  @media (max-width: 900px){
    .photo-grid{ gap:14px; }
    .nav-links{ display:none; }
  }
  @media (max-width: 560px){
    .gallery-hero{ padding-top:130px; }
    .photo-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    .event-header{ flex-direction:column; align-items:flex-start; }
  }

/* pricing hover hop — must outrank .reveal-scale.in-view */
.pricing-grid .pricing-card.in-view{ transform:translateY(0); }
.pricing-grid .pricing-card.featured.in-view{ transform:translateY(0); }
.pricing-grid .pricing-card.in-view:hover{ transform:translateY(-14px); }
.pricing-grid .pricing-card.featured.in-view:hover{ transform:translateY(-28px); }


/* ---------- TESTIMONIALS ---------- */
.testimonials{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:clip}

.tcarousel{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  grid-template-areas:
    "prev track next"
    ".    dots  .";
  column-gap:40px;
  row-gap:44px;
  align-items:center;
}
.ttrack{grid-area:track;display:grid}
.tprev{grid-area:prev}
.tnext{grid-area:next}
.tdots{grid-area:dots}

.tslide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(28px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),visibility .5s;
  display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:center}
.tslide.is-active{opacity:1;visibility:visible;transform:none}
.tslide.park-left:not(.is-active){transform:translateX(-28px)}
.tslide.park-right:not(.is-active){transform:translateX(28px)}

.tphoto{width:200px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:1px solid var(--line-strong);
  background:linear-gradient(155deg,rgba(201,163,95,.18),rgba(18,17,16,.9) 65%);
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
.tphoto img{width:100%;height:100%;object-fit:cover;display:block}
.tphoto .tinitial{font-family:'Fraunces',serif;font-size:2.4rem;color:var(--gold-soft)}
.tquote{font-family:'Fraunces',serif;font-size:1.12rem;line-height:1.75;color:var(--ink);font-style:italic}
.tquote::before{content:"\201C";display:block;font-size:3rem;line-height:.6;color:var(--gold-soft);opacity:.5;margin-bottom:12px}
.tmeta{margin-top:22px}
.tmeta strong{display:block;font-family:'Fraunces',serif;font-weight:400;font-size:1.1rem;color:var(--gold-soft)}
.tmeta span{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

.tnav{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--ink-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s ease}
.tnav:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,163,95,.08)}
.tdots{display:flex;justify-content:center;gap:12px}
.tdot{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;padding:0;transition:all .3s ease}
.tdot:hover{border-color:var(--gold-soft)}
.tdot.is-active{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}

@media(max-width:820px){
  .tcarousel{
    grid-template-areas:
      "track track track"
      "prev  dots  next";
    column-gap:12px;
    row-gap:28px;
  }
  .tslide{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .tphoto{width:120px}
  .tquote{font-size:1rem}
}
/* About portrait: fixed to the frame, cropped from the top */
.about-frame-inner{
  position:absolute;
  inset:18px;               /* same as the frame's padding */
  width:auto; height:auto;
  overflow:hidden;
}
.about-frame-inner img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 100%;   /* anchor to the bottom = crops the top */
  transform:scale(1.12); transform-origin:center bottom;
}
.about-frame-inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(18,17,16,.88),rgba(18,17,16,0) 55%);
}
.about-frame-inner span{position:relative; z-index:1}

/* ============ MOBILE LAYOUT ============ */
html{ -webkit-text-size-adjust:100%; }
section[id]{ scroll-margin-top:110px; }

/* tablets + phones: logo and Enquire on top, page links on a second row */
@media (max-width:900px){
  header{ padding:12px 0; }
  header.scrolled{ padding:10px 0; }
  nav{ flex-wrap:wrap; row-gap:8px; }
  .nav-links{
    display:flex; order:3; flex:0 0 100%;
    justify-content:space-between; gap:0;
    padding-top:8px; border-top:1px solid var(--line);
    font-size:.74rem;
  }
  .brand-mark{ height:30px; }
  .brand-text{ font-size:.92rem; letter-spacing:.12em; }
  .brand-text small{ font-size:.5rem; letter-spacing:.2em; }

  .hero{ min-height:auto; padding-top:150px; padding-bottom:130px; }
  .hero-grid{ gap:48px; }
  .aperture-outer{ max-width:320px; }
}

/* phones */
@media (max-width:560px){
  .hero p.lede{ font-size:1rem; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-stats{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px; margin-top:40px;
  }
  .hero-stats div span, .hero-stat-value{ font-size:1.15rem; }
  .hero-stats small{ font-size:.64rem; letter-spacing:.02em; }

  .section-head{ margin-bottom:40px; }
  .about-grid{ gap:36px; }
  .about-frame{ width:100%; max-width:320px; margin:0 auto; }
  .about-tags span{ font-size:.68rem; padding:7px 12px; }

  .portfolio-grid{ gap:10px; }
  .portfolio-card-label{ padding:12px; }
  .portfolio-card-label span{ font-size:.88rem; }

  .pricing-card{ padding:32px 24px; }
  .price-count{ font-size:2.6rem; }

  .tdots{ gap:16px; }

  .contact-grid{ gap:40px; }
  .contact-card{ padding:30px 22px; }
  .method{ padding:16px; }
  .method-label{ gap:12px; min-width:0; }
  .method-label div{ min-width:0; }
  .method-label div span{ font-size:.88rem; overflow-wrap:anywhere; }
  .method .go{ display:none; }

  .footer-grid{ flex-direction:column; text-align:center; }
  .gallery-hero{ padding-top:160px; }
}

/* touch screens: no "stuck" hover lifts after a tap */
@media (hover:none){
  .pricing-grid .pricing-card.in-view:hover,
  .pricing-grid .pricing-card.featured.in-view:hover{ transform:none; }
  .portfolio-card:hover{ transform:none; }
}