/* ==========================================================================
   Giri Photography — Global Stylesheet
   Fonts: Fraunces (headings) / Manrope (body)
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Manrope:wght@300;400;500;600;700&display=swap');

   /* ============ ROOT / PALETTE ============ */
   :root{
     --bg:#F7F3EC;
     --ink:#1a1a18;
     --muted:#6b6b66;
     --line:#dcd9d2;
     --alt-bg:#EEE8DD;
     --accent-green:#1f3d33;
   
     --font-heading:'Fraunces', serif;
     --font-body:'Manrope', sans-serif;
   
     --container-width:1200px;
     --gutter:24px;
     --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   /* ============ RESET ============ */
   *,
   *::before,
   *::after{
     box-sizing:border-box;
     margin:0;
     padding:0;
   }
   
   html{
     scroll-behavior:smooth;
     overflow-x:hidden;
     width:100%;
   }
   
   body{
     background:var(--bg);
     color:var(--ink);
     font-family:var(--font-body);
     font-size:16px;
     font-weight:400;
     line-height:1.6;
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
     width:100%;
   }
   
   img, picture, video, svg{ display:block; max-width:100%; }
   
   a{ color:inherit; text-decoration:none; }
   
   a:not([class]){
     text-underline-offset:3px;
     text-decoration:underline;
     text-decoration-color:var(--line);
     transition:text-decoration-color .25s, color .25s;
   }
   
   a:not([class]):hover{
     color:var(--muted);
     text-decoration-color:var(--muted);
   }
   
   .link{
     color:var(--ink);
     text-underline-offset:3px;
     text-decoration:underline;
     text-decoration-color:var(--line);
     transition:text-decoration-color .25s, color .25s;
   }
   
   .link:hover{ color:var(--muted); text-decoration-color:var(--muted); }
   
   ul, ol{ list-style:none; }
   
   button{ font-family:inherit; border:none; background:none; }
   
   /* ============ TYPOGRAPHY ============ */
   h1, h2, h3, h4, h5, h6{
     font-family:var(--font-heading);
     font-weight:500;
     color:var(--ink);
     line-height:1.15;
     letter-spacing:-.01em;
   }
   
   h1{ font-size:56px; font-weight:600; }
   h2{ font-size:40px; }
   h3{ font-size:28px; }
   h4{ font-size:20px; }
   h5{ font-size:16px; }
   h6{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; }
   
   p{
     font-family:var(--font-body);
     color:var(--ink);
     font-size:16px;
     line-height:1.7;
   }
   
   .eyebrow{
     font-family:var(--font-body);
     font-size:11px;
     letter-spacing:2.5px;
     text-transform:uppercase;
     color:var(--muted);
   }
   
   .muted{ color:var(--muted); }
   
   /* ============ LAYOUT HELPERS ============ */
   .container{
     width:100%;
     max-width:var(--container-width);
     margin:0 auto;
     padding:0 var(--gutter);
   }
   
   section{ padding:80px 0; }
   
   section.alt{ background:var(--alt-bg); }
   
   hr, .divider{ border:none; border-top:1px solid var(--line); }
   
   /* ============ FORMS ============ */
   label{
     display:block;
     font-family:var(--font-body);
     font-size:12px;
     letter-spacing:.5px;
     text-transform:uppercase;
     color:var(--muted);
     margin-bottom:8px;
   }
   
   input, textarea, select{
     width:100%;
     font-family:var(--font-body);
     font-size:15px;
     color:var(--ink);
     background:#fff;
     border:1px solid var(--line);
     padding:13px 16px;
     transition:border-color .25s, background .25s;
   }
   
   textarea{ min-height:140px; resize:vertical; }
   
   select{
     appearance:none;
     -webkit-appearance:none;
     background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
     background-position:calc(100% - 20px) center, calc(100% - 15px) center;
     background-size:5px 5px, 5px 5px;
     background-repeat:no-repeat;
     padding-right:40px;
     cursor:pointer;
   }
   
   input::placeholder, textarea::placeholder{ color:var(--muted); opacity:1; }
   
   input:hover, textarea:hover, select:hover{ border-color:var(--muted); }
   
   input:focus, textarea:focus, select:focus{
     outline:none;
     border-color:var(--ink);
     background:var(--bg);
   }
   
   input:disabled, textarea:disabled, select:disabled{
     background:var(--alt-bg);
     color:var(--muted);
     cursor:not-allowed;
   }
   
   .field{ margin-bottom:24px; }
   .field-row{ display:flex; gap:20px; }
   .field-row .field{ flex:1; }
   
   input[type="checkbox"], input[type="radio"]{
     width:auto;
     accent-color:var(--ink);
     cursor:pointer;
   }
   
   /* ============ HEADER / NAV ============ */
   header{
     background:var(--alt-bg);
     border-bottom:1px solid var(--line);
     padding:24px 0;
     position:sticky;
     top:0;
     z-index:150;
     transition:transform .45s var(--ease-premium), box-shadow .3s ease;
     /* FIX: no transform/filter here — keep it that way. A transform on
        this ancestor would re-anchor any position:fixed descendant
        to this box instead of the viewport, a common cause of panels
        bleeding into the page layout. */
   }
   
   header.scrolled{
     box-shadow:0 4px 16px rgba(26,26,24,.08);
   }
   
   header.header-hidden{
     transform:translateY(-100%);
   }
   
   .header-inner{ display:flex; align-items:center; justify-content:space-between; }
   
   .logo{ display:flex; flex-direction:column; gap:8px; margin-right:56px; }
   .logo-name{
     font-family:var(--font-heading);
     font-size:22px;
     font-weight:600;
     letter-spacing:.3px;
     white-space:nowrap;
     text-transform:uppercase;
   }
   .logo-giri{ color:#000000; }
   .logo-photo{ color:#1e5631; }
   .logo-social{ display:flex; align-items:center; gap:14px; }
   .logo-social a{
     display:flex;
     align-items:center;
     transition:opacity .2s ease;
   }
   .logo-social a i{ display:block; font-size:20px; line-height:1; }
   .logo-social a .yt-icon{ color:#FF0000; }
   .logo-social a .ig-icon{ background:linear-gradient(45deg,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
   .logo-social a:hover{ opacity:.75; }
   
   nav ul{
     display:flex;
     gap:36px;
     list-style:none;
     font-family:var(--font-body);
     font-size:14px;
     color:var(--ink);
   }
   
   nav a:hover{ color:var(--muted); }
   
   .nav-active{ border-bottom:1px solid var(--ink); padding-bottom:2px; }
   
   /* ============ MOBILE NAV TOGGLE ============ */
   .nav-toggle{
     display:none;
     width:56px;
     height:56px;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     z-index:210;
     flex-shrink:0;
   }
   
   .nav-toggle i{
     font-size:26px;
     color:var(--ink);
     line-height:1;
   }
   
   .mobile-nav{
     position:fixed;
     top:0;
     right:0;
     height:100vh;
     width:min(78%,320px);
     max-width:100vw; /* FIX: hard safety cap so this panel can never be
                          wider than the viewport, even mid-transition on
                          very narrow screens */
     display:flex;
     flex-direction:column;
     gap:0;
     background:var(--alt-bg);
     border-left:1px solid var(--line);
     box-shadow:-8px 0 24px rgba(26,26,24,.08);
     padding-top:96px;
     transform:translateX(100%);
     transition:transform .3s ease;
     z-index:200;
     overflow-y:auto;
     overflow-x:hidden; /* FIX: stop any oversized child inside the panel
                            from forcing this fixed element to widen or
                            scroll sideways */
   }
   
   .mobile-nav.nav-open{ transform:translateX(0); }
   
   .mobile-nav li{ border-bottom:1px solid var(--line); }
   
   .mobile-nav a{
     display:block;
     padding:18px var(--gutter);
     font-size:17px;
   }
   
   .mobile-nav a.nav-active{
     border-bottom:none;
     text-decoration:underline;
     text-underline-offset:4px;
   }
   
   .mobile-nav .btn{
     display:block;
     width:60%;
     margin:20px 0 0 var(--gutter);
     text-align:center;
   }
   
   /* ============ BUTTONS ============ */
   .btn{
     display:inline-block;
     padding:13px 26px;
     font-family:var(--font-body);
     font-size:13px;
     font-weight:500;
     letter-spacing:.5px;
     border:1px solid var(--ink);
     background:var(--ink);
     color:#fff;
     cursor:pointer;
     transition:.25s;
   }
   
   .btn:hover{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
   
   .btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
   .btn-outline:hover{ background:var(--ink); color:#fff; }
   
   .btn-accent{
     background:var(--accent-green);
     border:1px solid var(--accent-green);
     color:#fff;
     cursor:pointer;
     transition:.25s;
   }
   .btn-accent:hover{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
   
   /* ============ FOOTER ============ */
   footer{
     background:var(--alt-bg);
     padding:80px 0 30px;
     border-top:1px solid var(--line);
     margin-top:40px;
   }
   
   .footer-grid{
     display:grid;
     grid-template-columns:1.6fr 1fr 1fr 1.2fr;
     gap:40px;
     margin-bottom:60px;
   }
   
   .footer-grid h4{
     font-family:var(--font-heading);
     font-size:20px;
     margin-bottom:14px;
     color:var(--ink);
   }
   
   .footer-grid p{
     font-family:var(--font-body);
     font-size:13px;
     color:var(--muted);
     line-height:1.7;
     max-width:240px;
   }
   
   .foot-links{ font-family:var(--font-body); font-size:13px; color:var(--muted); }
   .foot-links .head{
     font-size:11px;
     letter-spacing:1.5px;
     color:var(--ink);
     text-transform:uppercase;
     margin-bottom:14px;
   }
   .foot-links li{ list-style:none; margin-bottom:10px; }
   
   .social{ display:flex; gap:10px; margin-top:20px; }
   .social span{
     width:34px;
     height:34px;
     border-radius:50%;
     border:1px solid var(--line);
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:13px;
     color:var(--ink);
     transition:background .25s, color .25s, border-color .25s;
   }
   .social a:hover span{
     background:var(--ink);
     border-color:var(--ink);
     color:#fff;
   }
   
   .visit-box{
     background:#fff;
     border:1px solid var(--line);
     border-radius:14px;
     padding:20px;
     font-family:var(--font-body);
     font-size:13px;
     overflow:hidden;
   }
   .visit-box p{ color:var(--ink); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
   .visit-box p i{ width:16px; text-align:center; color:var(--ink); font-size:13px; }
   .visit-box .get-dir{
     display:block;
     background:var(--ink);
     border:1px solid var(--ink);
     border-radius:8px;
     color:#fff;
     text-align:center;
     padding:12px;
     font-size:12px;
     letter-spacing:1px;
     margin-top:14px;
     cursor:pointer;
     transition:.25s;
   }
   .visit-box .get-dir:hover{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
   
   .foot-bottom{
     display:flex;
     justify-content:space-between;
     font-family:var(--font-body);
     font-size:12px;
     color:var(--muted);
     border-top:1px solid var(--line);
     padding-top:24px;
   }
   .foot-bottom a{ margin-left:24px; }

 
   /* ============ RESPONSIVE ============ */
   @media(max-width:900px){
     nav{ display:none; }
     .nav-toggle{ display:flex; width:50px; height:50px; }
     .nav-toggle i{ font-size:24px; }
     /* Hide the header's inline "Book a Shoot" button on mobile/tablet —
        it's already available inside the slide-out mobile-nav panel,
        so showing it twice next to the hamburger is redundant. */
     .header-inner > .btn{ display:none; }
     h1{ font-size:40px; }
     h2{ font-size:30px; }
     header{ padding:18px 0; }
     /* Single-row mobile header: social icons — centered logo — menu button,
        all on one line. .logo becomes a transparent wrapper so its two
        children (logo-social, logo-name) act as direct grid items alongside
        .nav-toggle. */
     .header-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
     .logo{ display:contents; margin-right:0; }
     .logo-social{ order:1; justify-self:start; gap:10px; }
     .logo-name{ order:2; justify-self:center; font-size:15px; white-space:nowrap; }
     .nav-toggle{ order:3; justify-self:end; }
     .mobile-nav{ padding-top:88px; }
     .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
   }

   @media(max-width:768px){
     h1{ font-size:36px; }
     h2{ font-size:28px; }
   }
   
   @media(max-width:600px){
     section{ padding:56px 0; }
     h1{ font-size:32px; }
     h2{ font-size:26px; }
     header{ padding:14px 0; }
     .logo{ gap:5px; }
     .logo-name{ font-size:17px; }
     .logo-social a{ font-size:20px; }
     .nav-toggle{ width:44px; height:44px; }
     .nav-toggle i{ font-size:22px; }
     .mobile-nav{ padding-top:76px; }
     .field-row{ flex-direction:column; gap:0; }
     .mobile-nav .btn{ width:70%; }
     .footer-grid{ grid-template-columns:1fr; }
     .foot-bottom{ flex-direction:column; gap:10px; }
     .foot-bottom a{ margin-left:0; margin-right:16px; }
   }

   @media(max-width:400px){
     header{ padding:12px 0; }
     .logo{ gap:4px; }
     .logo-name{ font-size:15px; }
     .logo-social a{ font-size:19px; }
     .nav-toggle{ width:40px; height:40px; }
     .nav-toggle i{ font-size:20px; }
     .mobile-nav{ padding-top:68px; }
   }
   
   @media(max-width:340px){
     .container{ padding:0 16px; }
     header{ padding:10px 0; }
     /* Keep logo + hamburger side-by-side instead of stacking them —
        stacking was pushing the toggle below the logo and eating
        vertical space above the fold. */
     .header-inner{
       flex-direction:row;
       align-items:center;
       justify-content:space-between;
       gap:10px;
     }
     .logo{ gap:4px; }
     .logo-name{ font-size:14px; }
     .logo-social a{ font-size:18px; }
     .nav-toggle{ width:38px; height:38px; }
     .nav-toggle i{ font-size:18px; }
     .mobile-nav{ width:min(85%,300px); padding-top:60px; }
     .btn{ width:100%; text-align:center; padding:11px 18px; font-size:12px; }
     footer{ padding:56px 0 24px; }
     .footer-grid{ grid-template-columns:1fr; gap:32px; margin-bottom:40px; }
     .footer-grid p{ max-width:100%; }
     .footer-grid h4{ font-size:18px; }
     .visit-box{ padding:16px; }
     .social{ flex-wrap:wrap; }
     .foot-bottom{ font-size:11px; }
     .foot-bottom a{ margin-right:12px; }
   }

   /* ============ CALL FLOATING BUTTON (global) ============ */
   .call-float{
     position:fixed;
     bottom:24px;
     right:24px;
     width:58px;
     height:58px;
     background:var(--ink);
     border-radius:50%;
     display:flex;
     align-items:center;
     justify-content:center;
     box-shadow:0 8px 20px rgba(0,0,0,0.2);
     z-index:50;
     transition:transform .2s;
   }
   .call-float:hover{ transform:scale(1.08); }
   .call-float svg{ width:26px; height:26px; }

   /* entrance + idle pulse */
   .call-float-enter{
     opacity:0;
     transform:scale(0.3);
     animation:
       callEnter .6s var(--ease-premium) 1s forwards,
       callPulse 2.6s ease-in-out 1.6s infinite;
   }
   @keyframes callEnter{
     0%{ opacity:0; transform:scale(0.3); }
     60%{ opacity:1; transform:scale(1.15); }
     100%{ opacity:1; transform:scale(1); }
   }
   @keyframes callPulse{
     0%, 100%{ transform:scale(1); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
     50%{ transform:scale(1.06); box-shadow:0 10px 26px rgba(0,0,0,0.28); }
   }

   @media(max-width:600px){
     .call-float{ width:50px; height:50px; bottom:16px; right:16px; }
     .call-float svg{ width:22px; height:22px; }
   }

   @media (prefers-reduced-motion: reduce){
     .call-float-enter{ opacity:1; transform:scale(1); }
   }