:root{
    --navy:#003579; --navy-deep:#002250; --navy-ink:#000c1f;
    --gold:#ffde59; --gold-deep:#e7c33d;
    --cream:#fafafa; --paper:#f5f7fb; --warm:#e9edf4;
    --grey:#8b94a8; --line:rgba(255,255,255,.13);
    --maxw:1280px;
    --ease:cubic-bezier(.22,1,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Manrope',sans-serif;
    background:var(--navy-deep); color:var(--cream);
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
    line-height:1.6;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
  h1,h2,h3{font-weight:400; line-height:1.04; letter-spacing:-.01em}
  .serif{font-family:'Cormorant Garamond',serif}
  .eyebrow{
    font-family:'Cinzel',serif; font-size:13px; letter-spacing:.32em;
    text-transform:uppercase; color:var(--gold); font-weight:500;
    display:inline-flex; align-items:center; gap:14px;
  }
  .eyebrow::before{content:""; width:34px; height:1px; background:var(--gold); opacity:.7}
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%}
  .star{color:var(--gold)}

  /* ---------- NAV ---------- */
  header{position:fixed; top:0; left:0; right:0; z-index:100;
    transition:background .4s var(--ease), backdrop-filter .4s, padding .4s var(--ease), border-color .4s;
    border-bottom:1px solid transparent; padding:22px 0;}
  header.scrolled{background:rgba(8,18,42,.82); backdrop-filter:blur(16px) saturate(1.3);
    border-bottom-color:var(--line); padding:14px 0;}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:32px}
  .brand{display:flex; align-items:center; gap:14px}
  .brand img{height:54px; width:auto; transition:height .4s var(--ease)}
  header.scrolled .brand img{height:46px}
  .brand .wm{display:flex; flex-direction:column; line-height:1}
  .brand .wm b{font-family:'Cinzel',serif; font-weight:600; font-size:18px; letter-spacing:.16em; color:#fff}
  .brand .wm span{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; letter-spacing:.08em; color:var(--grey); margin-top:3px}
  .nav-links{display:flex; align-items:center; gap:38px; list-style:none}
  .nav-links a{font-size:14px; letter-spacing:.02em; color:rgba(247,243,234,.75); position:relative; padding:4px 0; transition:color .3s}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold); transition:width .35s var(--ease)}
  .nav-links a:hover{color:#fff}
  .nav-links a:hover::after{width:100%}
  .btn{display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:14px;
    letter-spacing:.02em; padding:13px 24px; border-radius:100px; cursor:pointer; border:1px solid transparent;
    transition:all .35s var(--ease); white-space:nowrap}
  .btn-gold{background:var(--gold); color:var(--navy-ink)}
  .btn-gold:hover{background:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(235,197,60,.25)}
  .btn-ghost{border-color:rgba(247,243,234,.3); color:var(--cream)}
  .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
  .btn .arr{transition:transform .35s var(--ease)}
  .btn:hover .arr{transform:translate(3px,-3px)}
  .hamb{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none}
  .hamb span{width:24px; height:2px; background:var(--cream); transition:.3s}

  /* ---------- HERO ---------- */
  .hero{position:relative; min-height:100vh; display:flex; align-items:center; padding:132px 0 64px; overflow:hidden}
  .hero-bg{position:absolute; inset:0; z-index:0}
  .hero-bg img{width:100%; height:100%; object-fit:cover}
  .hero-bg::after{content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(8,18,42,.72) 0%, rgba(8,18,42,.55) 35%, rgba(8,18,42,.92) 100%);}
  .hero-grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
    background:radial-gradient(1200px 600px at 75% 0%, rgba(235,197,60,.10), transparent 60%);}
  .hero .wrap{position:relative; z-index:3; width:100%}
  .hero h1{font-family:'Cormorant Garamond',serif; font-size:clamp(44px,6.4vw,92px); font-weight:500; max-width:14ch}
  .hero h1 em{font-style:italic; color:var(--gold)}
  .hero p.lede{max-width:54ch; margin-top:40px; font-size:clamp(16px,1.5vw,20px); color:rgba(247,243,234,.82); font-weight:300}
  .hero-cta{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap}
  .hero-eyebrow{margin-bottom:26px}
  .scrollcue{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3;
    font-family:'Cinzel',serif; font-size:11px; letter-spacing:.3em; color:var(--grey); display:flex; flex-direction:column; align-items:center; gap:10px}
  .scrollcue .ln{width:1px; height:42px; background:linear-gradient(var(--gold),transparent); animation:cue 2.2s var(--ease) infinite}
  @keyframes cue{0%{transform:scaleY(.3);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.3}}

  /* ---------- MARQUEE ---------- */
  .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; background:var(--navy-ink)}
  .marquee-track{display:flex; gap:64px; white-space:nowrap; width:max-content; animation:scroll-x 32s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee span{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:26px; color:rgba(247,243,234,.55); display:inline-flex; align-items:center; gap:64px}
  .marquee span::after{content:"✦"; color:var(--gold); font-size:14px; font-style:normal}

  /* ---------- CLIENTS ---------- */
  .clients{background:var(--navy-deep); padding:clamp(54px,7vw,84px) 0}
  .clients-eyebrow{text-align:center; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:8px}
  .clients-sub{text-align:center; color:rgba(247,243,234,.55); font-size:15px; font-weight:300; margin-bottom:44px}
  .logo-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:1120px; margin:0 auto}
  .logo-cell{aspect-ratio:11/6; border-radius:14px; overflow:hidden; background:#fff; display:block;
    box-shadow:0 6px 22px rgba(0,0,0,.22); transition:transform .4s var(--ease), box-shadow .4s}
  .logo-cell:hover{transform:translateY(-5px); box-shadow:0 14px 34px rgba(0,0,0,.32)}
  .logo-cell img{width:100%; height:100%; object-fit:contain; display:block; padding:20px 30px; box-sizing:border-box}
  .logo-cell img.tall{padding:26px 30px; transform:scale(.82)}
  @keyframes scroll-x{to{transform:translateX(-50%)}}

  /* ---------- SECTIONS ---------- */
  section{position:relative}
  .pad{padding:clamp(80px,11vw,150px) 0}
  .sec-head{max-width:760px; margin-bottom:64px}
  .sec-head h2{font-family:'Cormorant Garamond',serif; font-size:clamp(36px,5vw,68px); font-weight:500; margin-top:22px}
  .sec-head h2 em{font-style:italic; color:var(--gold)}
  .sec-head p{margin-top:20px; color:rgba(247,243,234,.7); font-size:18px; font-weight:300; max-width:60ch}

  /* INTRO triad */
  .intro{background:var(--navy)}
  .triad{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden}
  .triad>div{padding:48px 40px; border-right:1px solid var(--line); transition:background .4s}
  .triad>div:last-child{border-right:none}
  .triad>div:hover{background:rgba(235,197,60,.06)}
  .triad .num{font-family:'Cinzel',serif; color:var(--gold); font-size:15px; letter-spacing:.2em}
  .triad h3{font-family:'Cormorant Garamond',serif; font-size:32px; margin:18px 0 12px; font-weight:500}
  .triad p{color:rgba(247,243,234,.66); font-size:15px; font-weight:300}

  /* SERVICES */
  .services{background:var(--navy-deep)}
  .svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
  .svc-card{border:1px solid var(--line); border-radius:18px; padding:42px 40px; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
    transition:transform .5s var(--ease), border-color .5s, background .5s; position:relative; overflow:hidden}
  .svc-card::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
  .svc-card:hover{transform:translateY(-6px); border-color:rgba(235,197,60,.4)}
  .svc-card:hover::before{transform:scaleX(1)}
  .svc-card .cat-no{font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em; color:var(--gold)}
  .svc-card h3{font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:500; margin:14px 0 22px}
  .svc-list{list-style:none; display:flex; flex-direction:column; gap:13px}
  .svc-list li{display:flex; align-items:flex-start; gap:13px; font-size:15.5px; color:rgba(247,243,234,.82); font-weight:300}
  .svc-list li::before{content:"✦"; color:var(--gold); font-size:11px; margin-top:5px; flex-shrink:0}

  /* WORK / GALLERY */
  .work{background:var(--navy-ink)}
  .filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px}
  .filters button{font-family:'Manrope',sans-serif; font-size:13.5px; letter-spacing:.02em; padding:10px 20px; border-radius:100px;
    border:1px solid var(--line); background:none; color:rgba(247,243,234,.65); cursor:pointer; transition:all .3s}
  .filters button:hover{color:#fff; border-color:var(--gold)}
  .filters button.active{background:var(--gold); color:var(--navy-ink); border-color:var(--gold)}
  .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .proj{position:relative; border-radius:16px; overflow:hidden; cursor:pointer; min-height:320px; transition:opacity .5s, transform .5s var(--ease)}
  .proj.hide{display:none}
  .proj image-slot{width:100%; height:100%; position:absolute; inset:0}
  .proj .slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .proj .slides{position:absolute; inset:0; z-index:1}
  .proj .slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease)}
  .proj .slide.on{opacity:1}
  .proj .dots{position:absolute; top:18px; left:18px; z-index:3; display:flex; gap:6px}
  .proj .dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); transition:all .4s var(--ease)}
  .proj .dots span.on{background:var(--gold); width:18px; border-radius:4px}
  .proj .veil{position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg,rgba(8,18,42,0) 40%, rgba(8,18,42,.88) 100%); transition:background .4s}
  .proj:hover .veil{background:linear-gradient(180deg,rgba(8,18,42,.2) 0%, rgba(12,26,56,.9) 100%)}
  .proj .meta{position:absolute; left:0; bottom:0; z-index:3; padding:26px; transform:translateY(8px); opacity:.92; transition:transform .45s var(--ease), opacity .45s}
  .proj:hover .meta{transform:translateY(0); opacity:1}
  .proj .meta .tag{font-family:'Cinzel',serif; font-size:11px; letter-spacing:.2em; color:var(--gold)}
  .proj .meta h4{font-family:'Cormorant Garamond',serif; font-size:25px; font-weight:500; color:#fff; margin-top:6px; line-height:1.1}
  .proj .plus{position:absolute; top:18px; right:18px; z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
    display:grid; place-items:center; color:#fff; opacity:0; transform:scale(.7) rotate(-30deg); transition:.45s var(--ease); background:rgba(8,18,42,.35); backdrop-filter:blur(4px)}
  .proj:hover .plus{opacity:1; transform:scale(1) rotate(0)}
  .g-tall,.g-wide,.g-reg,.g-half{grid-column:auto; grid-row:auto}

  /* PROCESS */
  .process{background:var(--navy)}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step}
  .step{padding:40px 30px 40px 0; border-top:2px solid var(--line); position:relative; transition:border-color .4s}
  .step:hover{border-top-color:var(--gold)}
  .step .n{font-family:'Cinzel',serif; font-size:14px; letter-spacing:.2em; color:var(--gold)}
  .step h3{font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:500; margin:18px 0 12px}
  .step p{color:rgba(247,243,234,.65); font-size:14.5px; font-weight:300}

  /* TESTIMONIALS */
  .tmt{background:var(--navy-deep); overflow:hidden}
  .quote-big{font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4vw,52px); font-weight:500; line-height:1.18; max-width:22ch}
  .quote-big em{font-style:italic; color:var(--gold)}
  .tcards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:60px}
  .tcard{border:1px solid var(--line); border-radius:16px; padding:34px; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); transition:transform .5s var(--ease), border-color .5s}
  .tcard:hover{transform:translateY(-5px); border-color:rgba(235,197,60,.35)}
  .tcard .stars{color:var(--gold); letter-spacing:3px; font-size:13px}
  .tcard p{font-size:16px; color:rgba(247,243,234,.85); font-weight:300; margin:18px 0 24px; font-style:italic; font-family:'Cormorant Garamond',serif; font-size:20px; line-height:1.4}
  .tcard .who{display:flex; align-items:center; gap:13px}
  .tcard .av{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--gold)); display:grid; place-items:center; font-family:'Cinzel',serif; color:#fff; font-size:15px}
  .tcard .who b{font-size:14.5px; font-weight:600; color:#fff; display:block}
  .tcard .who span{font-size:12.5px; color:var(--grey)}

  /* CONTACT */
  .contact{background:linear-gradient(180deg,var(--navy-deep),var(--navy-ink)); position:relative; overflow:hidden}
  .contact .glow{position:absolute; top:-20%; right:-5%; width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle,rgba(235,197,60,.14),transparent 65%); pointer-events:none}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; position:relative; z-index:2}
  .contact h2{font-family:'Cormorant Garamond',serif; font-size:clamp(40px,5.5vw,76px); font-weight:500; line-height:1.02}
  .contact h2 em{font-style:italic; color:var(--gold)}
  .contact .sub{margin-top:24px; color:rgba(247,243,234,.72); font-size:18px; font-weight:300; max-width:42ch}
  .cdetails{margin-top:42px; display:flex; flex-direction:column; gap:22px}
  .cdetail{display:flex; gap:16px; align-items:center}
  .cdetail .ic{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); flex-shrink:0}
  .cdetail b{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); font-family:'Cinzel',serif}
  .cdetail span{font-size:16px; color:var(--cream); font-weight:300}
  .cdetail .clink{font-size:16px; color:var(--cream); font-weight:300; transition:color .3s}
  .cdetail .clink:hover{color:var(--gold)}
  a.ic{text-decoration:none; transition:border-color .3s, color .3s, background .3s}
  a.ic:hover{border-color:var(--gold); background:rgba(235,197,60,.08)}

  /* WHATSAPP FLOAT */
  .wa-float{position:fixed; bottom:26px; right:26px; z-index:160; display:flex; align-items:center; gap:0;
    background:#25D366; color:#fff; border-radius:100px; padding:0; height:60px; width:60px; overflow:hidden;
    box-shadow:0 12px 34px rgba(37,211,102,.45); transition:width .45s var(--ease), box-shadow .3s; text-decoration:none}
  .wa-float .wa-ic{width:60px; height:60px; flex-shrink:0; display:grid; place-items:center}
  .wa-float .wa-ic svg{width:32px; height:32px}
  .wa-float .wa-txt{font-family:'Manrope',sans-serif; font-weight:600; font-size:15px; white-space:nowrap; padding-right:24px; opacity:0; transition:opacity .3s}
  .wa-float:hover{width:232px; box-shadow:0 16px 40px rgba(37,211,102,.6)}
  .wa-float:hover .wa-txt{opacity:1}
  .wa-float::after{content:""; position:absolute; inset:0; border-radius:100px; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:wapulse 2.4s var(--ease) infinite}
  @keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
  @media(max-width:600px){.wa-float{bottom:20px; right:20px}}
  @media(prefers-reduced-motion:reduce){.wa-float::after{animation:none}}
  form{display:flex; flex-direction:column; gap:18px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:20px; padding:38px}
  .frow{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .field{display:flex; flex-direction:column; gap:8px}
  .field label{font-size:12px; letter-spacing:.06em; color:var(--grey); font-weight:500}
  .field input,.field select,.field textarea{font-family:'Manrope',sans-serif; font-size:15px; color:var(--cream); background:rgba(8,18,42,.5);
    border:1px solid var(--line); border-radius:10px; padding:14px 16px; transition:border-color .3s; resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
  .field select{appearance:none; cursor:pointer}
  .field.err input,.field.err select,.field.err textarea{border-color:#e07a5f}
  .field .msg{font-size:11.5px; color:#e07a5f; display:none}
  .field.err .msg{display:block}
  form .btn-gold{justify-content:center; margin-top:6px}
  .form-ok{display:none; text-align:center; padding:50px 20px}
  .form-ok.show{display:block}
  .form-ok .tick{width:64px; height:64px; border-radius:50%; background:var(--gold); color:var(--navy-ink); display:grid; place-items:center; margin:0 auto 22px; font-size:30px}
  .form-ok h3{font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:500}
  .form-ok p{color:var(--grey); margin-top:10px; font-weight:300}

  /* FOOTER */
  footer{background:var(--navy-ink); border-top:1px solid var(--line); padding:70px 0 30px}
  .foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line)}
  .foot-brand img{height:46px; margin-bottom:20px}
  .foot-brand .foot-tag{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:21px; color:var(--gold); margin-bottom:12px; font-weight:500}
  .foot-brand p{color:var(--grey); font-size:14.5px; font-weight:300; max-width:34ch}
  .fcol h5{font-family:'Cinzel',serif; font-size:12px; letter-spacing:.18em; color:var(--gold); margin-bottom:18px}
  .fcol a{display:block; color:rgba(247,243,234,.7); font-size:14.5px; margin-bottom:12px; transition:color .3s; font-weight:300}
  .fcol a:hover{color:var(--gold)}
  .foot-bot{display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:16px}
  .foot-bot p{color:var(--grey); font-size:13px; font-weight:300}
  .socials{display:flex; gap:12px}
  .socials a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--cream); transition:all .3s}
  .socials a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px)}

  /* LIGHTBOX */
  .lb{position:fixed; inset:0; z-index:200; background:rgba(8,18,42,.94); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:40px}
  .lb.open{display:flex}
  .lb-inner{max-width:1000px; width:100%; text-align:center}
  .lb-inner image-slot{width:100%; height:60vh; border-radius:14px; margin-bottom:24px}
  .lb-inner img{width:100%; height:60vh; object-fit:cover; border-radius:14px; margin-bottom:24px; display:block}
  .lb-inner .tag{font-family:'Cinzel',serif; color:var(--gold); letter-spacing:.2em; font-size:12px}
  .lb-inner h3{font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:500; margin-top:8px}
  .lb-close{position:absolute; top:26px; right:30px; width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background:none; color:#fff; font-size:22px; cursor:pointer; transition:.3s}
  .lb-close:hover{border-color:var(--gold); color:var(--gold); transform:rotate(90deg)}

  /* DIRECTION SWITCH */
  .dirswitch{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:150;
    display:flex; align-items:center; gap:4px; background:rgba(8,18,42,.85); backdrop-filter:blur(14px);
    border:1px solid var(--line); border-radius:100px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.4)}
  .dirswitch a{font-size:12.5px; font-weight:500; letter-spacing:.02em; padding:9px 18px; border-radius:100px; color:rgba(247,243,234,.7); transition:.3s; white-space:nowrap}
  .dirswitch a.on{background:var(--gold); color:var(--navy-ink)}
  .dirswitch a:not(.on):hover{color:#fff}
  .dirswitch .lbl{font-family:'Cinzel',serif; font-size:10px; letter-spacing:.18em; color:var(--grey); padding:0 10px 0 8px}

  /* reveal */
  .reveal{opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

  /* MOBILE MENU */
  .mobile-menu{position:fixed; inset:0; z-index:99; background:var(--navy-ink); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
    transform:translateY(-100%); transition:transform .5s var(--ease); opacity:0}
  .mobile-menu.open{transform:translateY(0); opacity:1}
  .mobile-menu a{font-family:'Cormorant Garamond',serif; font-size:38px; color:var(--cream); transition:color .3s}
  .mobile-menu a:hover{color:var(--gold)}
  .mobile-menu .btn{margin-top:24px; font-family:'Manrope'}

  @media(max-height:780px){.hero{align-items:flex-start}}
  @media(max-width:980px){
    .nav-links,.hero-cta .btn-ghost{display:none}
    .hamb{display:flex}
    .triad{grid-template-columns:1fr}
    .triad>div{border-right:none; border-bottom:1px solid var(--line)}
    .triad>div:last-child{border-bottom:none}
    .svc-grid,.tcards,.contact-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .g-tall,.g-wide,.g-reg,.g-half{min-height:240px}
    .foot-top{grid-template-columns:1fr 1fr}
    .logo-strip{grid-template-columns:repeat(3,1fr)}
  }
  @media(max-width:600px){
    .wrap{padding:0 20px}
    .frow{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .gallery{display:flex; flex-direction:column}
    .g-tall,.g-wide,.g-reg,.g-half{min-height:240px}
    .foot-top{grid-template-columns:1fr}
    .dirswitch .lbl{display:none}
    .logo-strip{grid-template-columns:repeat(2,1fr); gap:14px}
    .logo-cell{height:80px; padding:14px 16px}
  }

  /* contact form fallback */
  .form-fallback{margin-top:16px; font-size:14px; color:#d8dce6; line-height:1.5; text-align:center}
  .form-fallback a{color:var(--gold)}
  .fallback-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
  .fallback-btns .btn{font-size:14px}

  /* contact map */
  .map-wrap{margin-top:46px; border:1px solid var(--line); border-radius:20px; overflow:hidden; position:relative; z-index:2}
  .map-bar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:22px 26px; background:rgba(255,255,255,.035); border-bottom:1px solid var(--line)}
  .map-bar .addr{display:flex; align-items:center; gap:14px}
  .map-bar .addr .ic{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); flex-shrink:0; font-size:18px}
  .map-bar .addr b{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); font-family:'Cinzel',serif; margin-bottom:3px}
  .map-bar .addr span{font-size:16px; color:var(--cream); font-weight:300}
  .map-frame{width:100%; height:400px; border:0; display:block; filter:grayscale(.35) contrast(1.05) brightness(.95)}
  @media(max-width:600px){ .map-frame{height:300px} .map-bar{padding:18px} }

  /* Instagram feed */
  .insta{background:var(--navy-ink)}
  .insta .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; max-width:none; margin-bottom:46px}
  .insta .sec-head>div{max-width:620px}
  .behold-wrap{border-radius:16px; overflow:hidden; min-height:160px}
  behold-widget{display:block; width:100%}

  /* Wonderdrive entry */
  .work .sec-head{position:relative}
  .wd-cta{display:inline-flex; align-items:center; gap:12px; margin-top:26px; padding:13px 22px 13px 16px; border-radius:100px;
    border:1px solid rgba(78,166,255,.4); background:linear-gradient(100deg, rgba(0,53,121,.5), rgba(0,12,31,.5)); color:var(--cream);
    font-size:14px; font-weight:500; letter-spacing:.02em; transition:all .35s var(--ease); position:relative; overflow:hidden}
  .wd-cta:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,53,121,.5)}
  .wd-cta .orb{width:30px; height:30px; border-radius:50%; flex-shrink:0; position:relative;
    background:radial-gradient(circle at 35% 30%, #8fc4ff, #0a4fb0 60%, #021a3f);
    box-shadow:0 0 14px rgba(78,166,255,.7), inset -3px -3px 8px rgba(0,0,0,.5)}
  .wd-cta .orb::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(120,190,255,.4); animation:orbring 4s linear infinite}
  @keyframes orbring{to{transform:rotate(360deg)}}
  .wd-cta b{font-family:'Cinzel',serif; font-weight:500; letter-spacing:.08em}
  .wd-cta .arr{transition:transform .35s var(--ease); color:var(--gold)}
  .wd-cta:hover .arr{transform:translate(3px,-3px)}
  .wd-cta .tagsm{color:rgba(200,222,255,.6); font-size:12.5px}