/* Brand font: Sweet Sans Pro — web licence required from Type Network (typenetwork.com) */
/* Upload SweetSansPro-Medium.woff2 and SweetSansPro-Medium.woff to your server root */
@font-face{font-family:'Sweet Sans Pro';src:url('SweetSansPro-Medium.woff2') format('woff2'),url('SweetSansPro-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
:root{--ivory:#f3f3f3;--beige:#dcd0c3;--dark:#2f2b29;--brown:#836b5b;--slate:#7c8d9b;--off:#edebe7}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-weight:300;background:var(--ivory);color:var(--dark);overflow-x:hidden}
a{text-decoration:none;color:inherit;cursor:pointer}
img{display:block}
button{cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif}
.pg{display:block}.pg.on{display:block}

/* NAV */
#nav{position:fixed;inset:0 0 auto;height:72px;padding:0 60px;display:flex;align-items:center;justify-content:space-between;z-index:300;transition:background .4s}
#nav.solid{background:rgba(47,43,41,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,208,195,.07)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;opacity:1;transition:opacity .2s}.nav-logo:hover{opacity:.75}
.nav-logo img{height:32px;width:auto;display:block}
.nav-logo-divider{width:1px;height:22px;background:rgba(243,243,243,.18);flex-shrink:0}
.nav-logo-word{font-family:'Sweet Sans Pro',sans-serif;font-size:8px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:rgba(243,243,243,.5);transition:color .2s;padding-right:2px}
.nav-logo:hover .nav-logo-word{color:var(--beige)}
.nav-logo-wrap{display:flex;align-items:center;gap:12px}
.nav-logo-fb{font-family:'Sweet Sans Pro',sans-serif;font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;display:none;color:var(--ivory)}
.nav-links{display:flex;align-items:center;gap:40px}
.nl{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:all .2s;color:#ffffff}
.nl:hover{color:var(--beige);text-decoration:underline;text-underline-offset:5px}
#nav:not(.solid) .nl{color:#ffffff}
#nav.solid .nl{color:#ffffff}
#nav.solid .nl:hover{color:var(--beige)}
.nav-cta{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:11px 28px;background:var(--beige);color:var(--dark);transition:background .2s;cursor:pointer}
.nav-cta:hover{background:var(--ivory)}
.hbg{display:none;flex-direction:column;gap:6px;padding:6px;cursor:pointer}
.hbg span{display:block;width:22px;height:1px;background:var(--ivory)}
.nav-dropdown{position:relative}
/* invisible bridge fills the gap so hover doesn't break */
.nav-dropdown::after{content:'';position:absolute;top:100%;left:-20px;right:-20px;height:24px;background:transparent}
.nav-dropdown:hover .dropdown-menu{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.dropdown-menu{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:linear-gradient(160deg, #3a3532 0%, #2f2b29 100%);
  border:1px solid rgba(220,208,195,.18);
  border-top:2px solid var(--beige);
  min-width:240px;padding:8px 0;opacity:0;pointer-events:none;transition:all .28s cubic-bezier(.4,0,.2,1);z-index:400;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 2px 0 var(--beige)}
.dropdown-item{display:flex;align-items:center;gap:10px;font-family:'Sweet Sans Pro',sans-serif;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,243,243,.6);padding:14px 24px;transition:all .2s;cursor:pointer;white-space:nowrap;border-bottom:1px solid rgba(220,208,195,.06)}
.dropdown-item:last-child{border-bottom:none}
.dropdown-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brown);opacity:0;transition:opacity .2s;flex-shrink:0}
.dropdown-item:hover{color:#ffffff;background:rgba(220,208,195,.06);padding-left:28px}
.dropdown-item:hover::before{opacity:1}
.mob{display:none;position:fixed;inset:0;z-index:299;background:var(--dark);flex-direction:column;align-items:center;justify-content:center;gap:32px}
.mob.open{display:flex}
.mob-x{position:absolute;top:28px;right:28px;font-size:22px;color:rgba(243,243,243,.3);background:none;border:none;cursor:pointer}
.mob a{font-family:'Sweet Sans Pro',sans-serif;font-size:18px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,243,243,.6);transition:color .2s}
.mob a:hover{color:var(--ivory)}

/* HERO */
.hero-photo-wrap{width:100%;height:82vh;min-height:580px;position:relative;overflow:hidden;background:var(--dark)}
.hero-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.hero-photo-wrap::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(30,27,25,.45)}
.hero-photo-wrap::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,transparent 40%,rgba(47,43,41,.4) 68%,rgba(47,43,41,.85) 86%,var(--dark) 100%)}
.hero-text{background:var(--dark);padding:40px 60px 72px}
.hero-text h1{font-family:'Sweet Sans Pro',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(42px,7.5vw,110px);color:var(--ivory);margin-bottom:22px;line-height:0.92}
.hero-sub{font-size:15px;font-weight:300;color:rgba(243,243,243,.5);max-width:520px;line-height:1.8;margin-bottom:10px}
.hero-sub strong{font-weight:400;color:rgba(243,243,243,.7)}
.hero-trusted{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:rgba(243,243,243,.22);display:block;margin-bottom:32px}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-cta{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;background:var(--beige);color:var(--dark);padding:16px 32px;transition:opacity .2s;cursor:pointer;display:inline-block}
.hero-cta:hover{opacity:.85}
.hero-cta-ghost{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border:1px solid rgba(243,243,243,.25);color:rgba(243,243,243,.6);padding:15px 32px;transition:all .2s;cursor:pointer;display:inline-block}
.hero-cta-ghost:hover{border-color:var(--beige);color:var(--beige)}

/* KEYWORD SCROLL */
.kw-wrap{background:var(--ivory);border-bottom:1px solid rgba(47,43,41,.07);overflow:hidden;padding:4px 0}
.kw-row{overflow:hidden}
.kw-track{display:inline-flex;white-space:nowrap;animation:kw 24s linear infinite}
.kw-track.rev{animation-direction:reverse;animation-duration:28s}
.kw-word{font-family:'Sweet Sans Pro',sans-serif;font-size:clamp(11px,1.4vw,20px);font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--dark);padding-right:48px;display:inline-block;line-height:1.15;opacity:.08}
.kw-word.on{opacity:1}.kw-word.mid{opacity:.2}
@keyframes kw{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
section{padding:96px 60px}
.s-ivory{background:var(--ivory)}.s-off{background:var(--off)}.s-dark{background:var(--dark);color:var(--ivory)}.s-white{background:#fff}.s-beige{background:var(--beige)}
.wrap{max-width:1200px;margin:0 auto}
.eyebrow{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--brown);display:block;margin-bottom:16px}
.eyebrow-dim{color:rgba(220,208,195,.45)}
.body{font-size:15px;font-weight:300;line-height:1.85;color:#6d6358}
.body-lgt{color:rgba(243,243,243,.62)}

/* LAYOUT */
.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.two-start{align-items:start}
.two-flip>*:first-child{order:2}.two-flip>*:last-child{order:1}
.pf{overflow:hidden}.pf img{width:100%;height:100%;object-fit:cover;display:block}
.pf-tall{aspect-ratio:4/5}.pf-wide{aspect-ratio:3/2}
.photo-stack{display:flex;flex-direction:column;gap:3px}

/* DIFF GRID */
.diff{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:52px}
.diff-title{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid rgba(47,43,41,.09)}
.diff-body{font-size:14px;font-weight:300;color:#7a7068;line-height:1.7}

/* STRIP */
.strip{background:var(--dark);padding:13px 0;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(220,208,195,.06);border-bottom:1px solid rgba(220,208,195,.06)}
.strip-track{display:inline-flex;animation:kw 34s linear infinite}
.strip-item{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:rgba(220,208,195,.38);padding:0 40px;display:inline-flex;align-items:center;gap:40px}
.strip-item::after{content:'◆';font-size:4px}

/* SERVICE LIST ROWS */
.svc-list{margin-top:28px}
.svc-row{padding:19px 0;border-bottom:1px solid rgba(47,43,41,.09);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:padding-left .3s}
.svc-row:first-child{border-top:1px solid rgba(47,43,41,.09)}
.svc-row:hover{padding-left:10px}
.svc-name{font-family:'Sweet Sans Pro',sans-serif;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.svc-arr{font-size:14px;opacity:.25}

/* TESTIMONIALS */
.testi-wrap{overflow:hidden}
.testi-track{display:flex;transition:transform .65s cubic-bezier(.4,0,.2,1)}
.testi-slide{min-width:100%;padding:80px 60px;background:var(--dark)}
.testi-qm{font-size:72px;font-weight:200;font-family:'Inter',sans-serif;color:rgba(220,208,195,.14);line-height:1;margin-bottom:4px}
.testi-head{font-family:'Sweet Sans Pro',sans-serif;font-size:clamp(16px,2vw,24px);font-weight:400;text-transform:uppercase;letter-spacing:.07em;color:var(--ivory);line-height:1.4;max-width:820px;margin-bottom:16px}
.testi-body{font-size:15px;font-weight:300;color:rgba(243,243,243,.42);line-height:1.82;max-width:680px;margin-bottom:26px}
.testi-who{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--beige)}
.testi-ctrl{background:var(--dark);padding:0 60px 48px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(220,208,195,.07)}
.t-dots{display:flex;gap:8px}
.t-dot{width:26px;height:1px;background:rgba(220,208,195,.18);cursor:pointer;transition:background .3s}
.t-dot.on{background:var(--beige)}
.t-arrs{display:flex;gap:10px}
.t-arr{width:44px;height:44px;border:1px solid rgba(220,208,195,.16);display:flex;align-items:center;justify-content:center;color:rgba(243,243,243,.3);font-size:15px;cursor:pointer;transition:all .2s}
.t-arr:hover{border-color:var(--beige);color:var(--beige)}

/* PACKAGES — 3 col, aligned rows */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px}
.pkg{padding:44px 32px;display:flex;flex-direction:column}
.pkg-lt{background:#fff}.pkg-dk{background:#4a5a68}
.pkg-badge{font-family:'Sweet Sans Pro',sans-serif;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;background:var(--beige);color:var(--dark);padding:5px 12px;display:inline-block;margin-bottom:18px;visibility:hidden}
.pkg-badge.show{visibility:visible}
.pkg-name{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px}
.pkg-lt .pkg-name{color:var(--dark)}.pkg-dk .pkg-name{color:#fff}
.pkg-price{font-family:'Sweet Sans Pro',sans-serif;font-size:48px;font-weight:300;line-height:1;margin-bottom:4px}
.pkg-lt .pkg-price{color:var(--dark)}.pkg-dk .pkg-price{color:#f0e8de}
.pkg-period{font-size:11px;font-weight:300;letter-spacing:.04em;margin-bottom:24px;min-height:32px}
.pkg-lt .pkg-period{color:#aaa}.pkg-dk .pkg-period{color:rgba(255,255,255,.55)}
.pkg-hr{height:1px;margin-bottom:22px}
.pkg-lt .pkg-hr{background:rgba(220,208,195,.5)}.pkg-dk .pkg-hr{background:rgba(255,255,255,.15)}
.pkg-feats{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;flex:1}
.pkg-feat{font-size:13px;font-weight:300;line-height:1.45;display:flex;gap:10px}
.pkg-lt .pkg-feat{color:#6d6358}.pkg-dk .pkg-feat{color:rgba(255,255,255,.78)}
.pkg-feat::before{content:'—';color:var(--brown);font-size:10px;flex-shrink:0;padding-top:3px}
.pkg-note{font-size:11px;font-weight:300;font-style:italic;margin-bottom:24px;line-height:1.5;min-height:36px}
.pkg-lt .pkg-note{color:#bbb}.pkg-dk .pkg-note{color:rgba(255,255,255,.4)}
/* alacarte note */
.alacarte{text-align:center;margin-top:24px;padding:18px;border:1px solid rgba(47,43,41,.09)}
.alacarte p{font-size:13px;font-weight:300;color:#7a7068;line-height:1.65}
.alacarte strong{font-family:'Sweet Sans Pro',sans-serif;font-weight:500;letter-spacing:.08em}

/* STEPS */
.steps{display:flex;flex-direction:column;margin-top:22px}
.step{padding:20px 0;border-bottom:1px solid rgba(47,43,41,.08);display:flex;gap:20px}
.step-dk{border-color:rgba(220,208,195,.08)}
.step:last-child{border-bottom:none}
.step-n{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--brown);min-width:24px;padding-top:2px}
.step-title{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px}
.step-body{font-size:13px;font-weight:300;color:#7a7068;line-height:1.65}
.step-dk .step-title{color:var(--ivory)}.step-dk .step-body{color:rgba(243,243,243,.38)}

/* PARTNER TAGS */
.p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.p-tag{font-size:10px;font-weight:300;letter-spacing:.08em;border:1px solid rgba(220,208,195,.12);color:rgba(243,243,243,.28);padding:7px 14px}
.p-tag-lt{font-size:10px;font-weight:300;letter-spacing:.08em;border:1px solid rgba(47,43,41,.12);color:#7a7068;padding:7px 14px}

/* VIDEO GRID — portfolio and IG feed */
.vid-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.vid-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.vid-cell{position:relative;overflow:hidden;background:#1a1715;aspect-ratio:9/16;cursor:pointer}
.vid-cell video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vid-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(47,43,41,.25);transition:background .3s}
.vid-cell:hover .vid-ov{background:rgba(47,43,41,.05)}
.vid-cell.playing .vid-ov{opacity:0;pointer-events:none}
.vid-cell.playing:hover .vid-ov{opacity:0}
.play-btn{width:46px;height:46px;border:1.5px solid rgba(243,243,243,.65);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.vid-cell:hover .play-btn{transform:scale(1.08)}
.play-btn::after{content:'';width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid rgba(243,243,243,.85);margin-left:3px}

/* ── PORTFOLIO REDESIGN ────────────────────────────── */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.pf-item{position:relative;overflow:hidden;background:#111;aspect-ratio:9/16;cursor:pointer;group:true}
.pf-item video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.pf-item:hover video{transform:scale(1.04)}
/* gradient overlay always present at bottom */
.pf-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,17,15,.92) 0%,rgba(20,17,15,.3) 38%,transparent 65%);z-index:1;transition:opacity .4s}
/* hover darkens top slightly */
.pf-item:hover::after{background:linear-gradient(to top,rgba(20,17,15,.95) 0%,rgba(20,17,15,.45) 40%,rgba(20,17,15,.1) 70%)}
/* content inside item */
.pf-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 18px}
.pf-num{font-family:'Sweet Sans Pro',sans-serif;font-size:9px;font-weight:400;letter-spacing:.22em;color:rgba(220,208,195,.35);margin-bottom:6px;transition:color .3s}
.pf-item:hover .pf-num{color:var(--beige)}
.pf-label{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,243,243,.9);line-height:1.3;transition:color .3s}
.pf-tag{display:inline-block;font-family:'Sweet Sans Pro',sans-serif;font-size:8px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);border:1px solid rgba(131,107,91,.4);padding:3px 8px;margin-bottom:8px;opacity:0;transform:translateY(6px);transition:all .35s}
.pf-item:hover .pf-tag{opacity:1;transform:translateY(0)}
/* play icon top-right */
.pf-play{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border:1px solid rgba(243,243,243,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,17,15,.3);backdrop-filter:blur(4px);transition:all .3s;opacity:0}
.pf-item:hover .pf-play{opacity:1}
.pf-item.pf-playing .pf-play{opacity:1;border-color:var(--beige);background:rgba(131,107,91,.3)}
.pf-play::after{content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid rgba(243,243,243,.8);margin-left:2px}
.pf-item.pf-playing .pf-play::after{border-left:none;border-top:none;width:9px;height:9px;background:rgba(243,243,243,.8);border-radius:1px}
/* lightbox */
.lb{display:none;position:fixed;inset:0;z-index:1000;background:rgba(10,8,7,.96);align-items:center;justify-content:center}
.lb.open{display:flex}
.lb-inner{position:relative;max-height:90vh;max-width:min(420px,90vw);width:100%}
.lb-inner video{width:100%;max-height:90vh;object-fit:contain;display:block;border-radius:2px}
.lb-close{position:fixed;top:24px;right:28px;font-size:28px;color:rgba(243,243,243,.4);cursor:pointer;background:none;border:none;line-height:1;transition:color .2s;z-index:1001}
.lb-close:hover{color:var(--ivory)}
.lb-info{position:absolute;bottom:-44px;left:0;right:0;display:flex;justify-content:space-between;align-items:center}
.lb-title{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,243,243,.4)}
.lb-nav{display:flex;gap:12px}
.lb-arr{width:36px;height:36px;border:1px solid rgba(243,243,243,.15);display:flex;align-items:center;justify-content:center;color:rgba(243,243,243,.4);font-size:13px;cursor:pointer;transition:all .2s;background:none}
.lb-arr:hover{border-color:var(--beige);color:var(--beige)}

/* IG feed section */
.ig-wrap{background:var(--dark);padding-top:64px;border-top:1px solid rgba(220,208,195,.07)}
.ig-head{padding:0 60px 36px;display:flex;align-items:center;justify-content:space-between}
.ig-label{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:rgba(220,208,195,.35)}
.ig-handle{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);display:flex;align-items:center;gap:8px;transition:opacity .2s}
.ig-handle:hover{opacity:.7}.ig-handle::after{content:'→'}
/* IG grid: first cell large (2 rows) */
.ig-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:3px}
.ig-feat{grid-row:span 2;aspect-ratio:unset!important}
.ig-cell-s{aspect-ratio:9/10}

/* CTA block */
.cta-block{position:relative;overflow:hidden;padding:130px 60px;text-align:center}
.cta-bg{position:absolute;inset:0}.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-ov{position:absolute;inset:0;background:rgba(47,43,41,.76)}
.cta-inner{position:relative;z-index:1;max-width:580px;margin:0 auto}
.cta-inner h2{font-family:'Sweet Sans Pro',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(26px,4vw,52px);color:var(--ivory);line-height:1.05;margin-bottom:20px}
.cta-inner p{font-size:16px;font-weight:300;color:rgba(243,243,243,.46);line-height:1.8;margin-bottom:38px}

/* BUTTONS */
.btn{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;padding:14px 36px;display:inline-block;transition:all .22s;cursor:pointer;border:none}
.btn-beige{background:var(--beige);color:var(--dark)}.btn-beige:hover{background:#ede4d9}
.btn-dark{background:var(--dark);color:var(--ivory)}.btn-dark:hover{background:#1a1715}
.btn-ol{border:1px solid rgba(243,243,243,.28);color:var(--ivory)}.btn-ol:hover{border-color:var(--beige);color:var(--beige)}
.btn-ol-dk{border:1px solid rgba(47,43,41,.22);color:var(--dark)}.btn-ol-dk:hover{border-color:var(--dark)}
.btn-full{width:100%;text-align:center;display:block}

/* VIDEO EMBED PLACEHOLDER */
.vid-placeholder{background:rgba(220,208,195,.06);border:1px solid rgba(220,208,195,.1);aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.vid-placeholder span{font-family:'Sweet Sans Pro',sans-serif;font-size:9px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(220,208,195,.2)}

/* INNER PAGE HERO */
.pg-hero{background:var(--dark);padding:148px 60px 80px;border-bottom:1px solid rgba(220,208,195,.07)}
.pg-hero-in{max-width:1200px;margin:0 auto}
.pg-hero h1{font-family:'Sweet Sans Pro',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(40px,6.5vw,82px);color:var(--ivory);line-height:1.0;margin-bottom:18px}
.pg-hero p{font-size:16px;font-weight:300;color:rgba(243,243,243,.4);max-width:540px;line-height:1.8}
.back{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brown);display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;transition:gap .2s}
.back:hover{gap:14px}.back::before{content:'←'}

/* PORTFOLIO */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:52px}
.port-cell{position:relative;overflow:hidden;cursor:pointer;background:#1a1715}
.port-cell.photo-cell{aspect-ratio:4/5}
.port-cell video{width:100%;height:100%;object-fit:cover;display:block}
.port-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.port-cell:hover img{transform:scale(1.04)}
.port-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(47,43,41,.88) 0%,transparent 55%);opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;padding:26px}
.port-cell:hover .port-ov{opacity:1}
.port-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(47,43,41,.22);transition:background .3s}
.port-cell:hover .port-play{background:rgba(47,43,41,.05)}
.port-cell.playing .port-play{opacity:0}
.port-label{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.port-sub{font-size:12px;font-weight:300;color:rgba(243,243,243,.5);margin-top:4px}

/* CONTACT */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.fl{font-family:'Sweet Sans Pro',sans-serif;display:block;font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brown);margin-bottom:8px}
.fi{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(47,43,41,.18);padding:12px 0;font-family:'Inter',sans-serif;font-size:14px;font-weight:300;color:var(--dark);outline:none;transition:border-color .2s;margin-bottom:24px;appearance:none}
.fi:focus{border-bottom-color:var(--dark)}.fi::placeholder{color:rgba(47,43,41,.28)}.fi option{background:var(--off)}
textarea.fi{resize:vertical;min-height:80px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* FOOTER */
footer{background:var(--dark);padding:68px 60px 36px;border-top:1px solid rgba(220,208,195,.07)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(220,208,195,.07);margin-bottom:28px}
.f-logo img{height:48px;display:block;margin-bottom:14px}
.f-logo-fb{font-family:'Sweet Sans Pro',sans-serif;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(243,243,243,.3);display:none}
.f-tagline{font-size:13px;font-weight:300;color:rgba(243,243,243,.28);line-height:1.7;max-width:240px}
.f-hd{font-family:'Sweet Sans Pro',sans-serif;font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(220,208,195,.32);margin-bottom:16px}
.f-links{display:flex;flex-direction:column;gap:10px}
.f-links a{font-size:13px;font-weight:300;color:rgba(243,243,243,.28);transition:color .2s}
.f-links a:hover{color:var(--beige)}
.f-txt{font-size:13px;font-weight:300;color:rgba(243,243,243,.28);margin-bottom:5px}
.f-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.f-copy{font-size:10px;font-weight:300;color:rgba(243,243,243,.17);letter-spacing:.05em}
.f-ig a{font-family:'Sweet Sans Pro',sans-serif;font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,243,243,.22);transition:color .2s}
.f-ig a:hover{color:var(--beige)}

/* RESPONSIVE */
/* ── TABLET (≤1024px) ─────────────────────────────── */
@media(max-width:1024px){
  #nav,section,.pg-hero,.hero-text,.ig-head,.testi-slide,.testi-ctrl,.cta-block,footer{padding-left:28px;padding-right:28px}
  .nav-links{display:none}.hbg{display:flex}
  .two,.book-grid{grid-template-columns:1fr;gap:44px}
  .two-flip>*{order:unset!important}
  .diff{grid-template-columns:1fr 1fr;gap:24px}
  .pkg-grid{grid-template-columns:1fr}
  .port-grid{grid-template-columns:1fr 1fr}
  .vid-grid-3,.vid-grid-4{grid-template-columns:repeat(2,1fr)}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .ig-feat{grid-row:auto}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .wrap{padding-left:28px;padding-right:28px}
}

/* ── MOBILE (≤600px) ──────────────────────────────── */
@media(max-width:600px){

  /* ─ Global spacing ─ */
  .wrap{padding-left:20px;padding-right:20px}
  section{padding-left:20px;padding-right:20px}
  #nav,section,.pg-hero,.hero-text,.ig-head,.testi-ctrl,.cta-block,footer{padding-left:20px;padding-right:20px}

  /* ─ Nav ─ */
  #nav{padding-top:18px;padding-bottom:18px}
  .nav-logo img{height:28px}
  .nav-logo-divider{display:none}
  .nav-logo-word{display:none}

  /* ─ Hero ─ */
  .hero-photo-wrap{height:55vh;min-height:320px}
  .hero-text{padding:36px 20px 56px}
  .hero-text h1{font-size:clamp(38px,11vw,64px);line-height:0.9;margin-bottom:16px}
  .hero-text p{font-size:14px;max-width:100%}

  /* ─ Keyword scroll ─ */
  .kw-word{font-size:clamp(28px,8vw,40px)}
  .kw-wrap{padding:2px 0}

  /* ─ Proof band: stack to 2×2 + 1 ─ */
  .proof-band-grid{grid-template-columns:1fr 1fr !important;grid-template-rows:auto auto auto}
  .proof-band-grid > div{border-right:none !important;border-bottom:1px solid rgba(220,208,195,.07)}
  .proof-band-grid > div:last-child{border-bottom:none}

  /* ─ How We Make — 2-col inline grid → 1-col ─ */
  .how-grid{grid-template-columns:1fr !important;gap:36px !important}

  /* ─ All 2/3-col inline section grids → 1-col ─ */
  .testi-grid{grid-template-columns:1fr !important}
  .pkg-grid{grid-template-columns:1fr}
  .diff{grid-template-columns:1fr}
  .port-grid{grid-template-columns:1fr}
  .vid-grid-3,.vid-grid-4{grid-template-columns:1fr 1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr;gap:28px}

  /* ─ Page hero ─ */
  .pg-hero{padding:100px 20px 52px}
  .pg-hero h1{font-size:clamp(36px,10vw,64px)}
  .pg-hero p{font-size:14px}

  /* ─ Service section large h2 ─ */
  h2[style*="clamp(32px"]{font-size:clamp(32px,9vw,52px) !important}

  /* ─ Testimonials header flex → stack ─ */
  .testi-header{flex-direction:column !important;gap:8px !important;align-items:flex-start !important}

  /* ─ Contact page ─ */
  .contact-grid{grid-template-columns:1fr !important;gap:0 !important}
  .contact-wrap{padding:0 20px !important}
  .contact-hero-pad{padding:100px 20px 48px !important}
  .contact-details-grid{grid-template-columns:1fr 1fr !important}

  /* ─ About stats grid ─ */
  .about-stats-grid{grid-template-columns:1fr 1fr !important}

  /* ─ Footer ─ */
  footer{padding-left:20px;padding-right:20px}
  .f-grid{grid-template-columns:1fr;gap:24px}
  .f-bottom{flex-direction:column;gap:10px;text-align:center}

  /* ─ Buttons ─ */
  .btn{padding:14px 24px;font-size:10px;width:100%;display:block;text-align:center;box-sizing:border-box}
  .btn-full{width:100%}

  /* ─ Section padding ─ */
  section[style*="padding:80px 0"]{padding:52px 20px !important}
  section[style*="padding:80px"]{padding:52px 20px !important}
  .s-ivory,.s-off,.s-white,.s-dark,.s-beige{padding:52px 20px}

  /* ─ Wrap override for inline sections ─ */
  div[style*="max-width:1200px"]{padding-left:20px !important;padding-right:20px !important}
  div[style*="padding:0 60px"]{padding-left:20px !important;padding-right:20px !important}

  /* ─ CTA bg image ─ */
  .cta-block{padding:52px 20px}
  .cta-bg{display:none}

  /* ─ Steps ─ */
  .step{gap:16px}
  .step-n{font-size:11px;width:28px;height:28px}
}
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:translateY(0)}

/* ── Extra targeted mobile improvements ─────────────── */
@media(max-width:600px){
  /* Portfolio grid mobile */
  .pf-grid{grid-template-columns:1fr 1fr !important;gap:2px;}
  .pf-label{font-size:10px;}
  .pf-play{opacity:1 !important;}
  .pf-tag{opacity:1 !important;transform:none !important;}
  /* Lightbox mobile */
  .lb-inner{max-width:96vw;}
  .lb-info{bottom:-40px;}
  .lb-title{font-size:9px;}

  /* Phone mockup in Trio section */
  #trio-process .two > div:last-child{display:flex;justify-content:center;}
  #trio-process .two > div:last-child > div{max-width:220px !important;}
  /* Trio image - no clipping */
  #trio .two > div:last-child img{width:100%;height:auto;display:block;}
  /* Package price font size */
  .pkg-price{font-size:38px !important;}
  /* Influencer option boxes stack */
  div[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:3px"]{grid-template-columns:1fr !important;}
  /* Contact photo shorter on mobile */
  div[style*="aspect-ratio:3/4;margin-bottom"]{aspect-ratio:4/3 !important;}
  /* Booking card padding */
  .booking-card{padding:28px 20px !important;}
  /* Diff grid 1-col on mobile */
  .diff{grid-template-columns:1fr !important;gap:20px;}
  /* Section headings word wrap */
  h1,h2,h3{word-break:break-word;}
  /* Nav height */
  #nav{height:60px;}
  /* CTA inner */
  .cta-inner{padding:0 10px;}
  /* Testimonial cards */
  .testi-grid > div{padding:28px 20px !important;}
  /* Experience stats smaller numbers */
  .exp-stats-grid > div > div:first-child{font-size:clamp(32px,8vw,52px) !important;}
  /* Footer tagline */
  .f-tagline{font-size:12px;}
  /* Strip items */
  .strip-item{padding:0 20px;font-size:10px;}
  /* Step body text */
  .step-body{font-size:13px;}
  /* Pkg feat alignment */
  .pkg-feat{align-items:flex-start;}
  /* Use cases box */
  .use-cases-box{padding:20px 16px !important;}
  /* Contact form 2-col name row → stack */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:24px"]{grid-template-columns:1fr !important;gap:0 !important;}
}

/* ── Additional mobile fixes ─────────────────────────── */
@media(max-width:600px){

  /* Proof band border fix on mobile */
  .proof-band-grid > div:nth-child(2){border-right:1px solid rgba(220,208,195,.07) !important}
  .proof-band-grid > div:nth-child(4){border-bottom:none !important}
  .proof-band-grid > div:nth-child(5){border-bottom:none !important}

  /* Packages — full width single col */
  .pkg-grid{grid-template-columns:1fr !important}
  .pkg{border-right:none !important}

  /* Iconic Trio dashboard — 2×3 on mobile */
  .trio-dash-top{grid-template-columns:1fr 1fr !important}

  /* Contact booking card padding */
  .booking-card{padding:32px 24px !important}

  /* Use cases 2-col grid → 1-col */
  .use-cases-grid{grid-template-columns:1fr !important}

  /* Service section two-col inline → stack */
  div.two > div:first-child,div.two > div:last-child{width:100%}

  /* Inline section grids used throughout services */
  div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr !important}
  div[style*="grid-template-columns:repeat(5"]{grid-template-columns:1fr 1fr !important}

  /* But keep dashboard top-3 as 3-col (they're small numbers) */
  div[style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:2px"]{grid-template-columns:1fr 1fr 1fr !important}
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:2px"]{grid-template-columns:1fr 1fr !important}

  /* Steps layout */
  .steps{gap:0}

  /* Video cells max width on mobile */
  .vid-cell[style*="max-width:340px"]{max-width:240px !important}

  /* Influencer videos — 2 col on mobile */
  div.vid-grid-4{grid-template-columns:1fr 1fr !important}

  /* svc-list rows */
  .svc-name{font-size:16px}

  /* Page hero back button */
  .back{top:72px}

  /* pkg badge */
  .pkg-badge{font-size:8px;padding:4px 10px}

  /* Strip text smaller */
  .strip-item{font-size:11px;padding-right:28px}

  /* CTA section */
  .cta-inner h2{font-size:clamp(28px,8vw,48px) !important}

  /* Footer bottom row */
  .f-bottom{flex-direction:column !important;gap:8px;text-align:center}
  .f-copy,.f-links{text-align:center}
  .f-links{gap:12px;flex-wrap:wrap;justify-content:center}

  /* Overflow safety */
  body,html{overflow-x:hidden}
  /* Hero CTAs stack on mobile */
  .hero-actions{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-cta,.hero-cta-ghost{width:100%;text-align:center;box-sizing:border-box}

  /* Our Experience stats 2×2 on mobile */
  .exp-stats-grid{grid-template-columns:1fr 1fr !important}
  div[style*="exp-stats"]{grid-template-columns:1fr 1fr !important}

  /* Experience industry strip wrap */
  div[style*="Industries served"]{flex-direction:column;gap:8px;align-items:flex-start}
  div[style*="Industries served"] span{border-right:none !important;padding:4px 0 !important}

  /* What We Do phone mock — slightly smaller on mobile */
  div[style*="Speaker notch"]{max-width:220px}
  div[style*="border-radius:36px"]{max-width:100%}

  /* Experience section padding */
  div[style*="padding:80px 60px"]{padding:52px 20px !important}
/* pg-hero inline padding */
  .pg-hero-inner{padding:88px 20px 48px !important}
  /* f-bottom flex */
  .f-bottom{flex-direction:column !important;gap:8px !important;text-align:center !important}
  /* Trio dashboard number size on mobile */
  div[style*="font-size:36px"][style*="font-weight:300"]{font-size:26px !important}
  div[style*="font-size:28px"][style*="font-weight:300"]{font-size:22px !important}
  /* Contact two-col inner info grid */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:24px"]{grid-template-columns:1fr !important}
  /* What We Do vertical video max width */
  .vid-cell[style*="max-width:340px"]{max-width:100% !important}
  /* Trio Part 2 dark section */
  #trio-process .wrap .two{gap:48px}
  /* About page photo aspect */
  .pf.pf-tall{aspect-ratio:4/3 !important}

  img,video{max-width:100%}

  /* Section-level padding for inline-padded sections */
  section[style*="padding:80px 0;"]{padding-top:52px !important;padding-bottom:52px !important}
  div[style*="padding:80px 0"]{padding-top:52px !important;padding-bottom:52px !important}
  div[style*="padding:0 60px"]{padding-left:20px !important;padding-right:20px !important}
  div[style*="padding:148px 60px"]{padding:88px 20px 48px !important}
  div[style*="padding:80px 60px"]{padding:52px 20px !important}
}/* ─────────────────────────────────────────────────────────
   BLOG STYLES — extends /styles.css
   Long-form article typography + listing page styles
   ───────────────────────────────────────────────────────── */

/* BLOG INDEX (listing page) */
.blog-listing { padding: 96px 60px 48px; max-width: 1100px; margin: 0 auto; }
.blog-hero { padding: 148px 60px 64px; background: var(--dark); color: var(--ivory); }
.blog-hero-in { max-width: 1100px; margin: 0 auto; }
.blog-hero h1 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(48px, 8vw, 96px); line-height: 0.95; color: var(--ivory);
  margin-bottom: 18px;
}
.blog-hero p {
  font-size: 16px; font-weight: 300; color: rgba(243,243,243,.55);
  max-width: 620px; line-height: 1.7;
}
.blog-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(47,43,41,.08); }
.blog-card {
  background: var(--ivory); padding: 48px 56px;
  display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start;
  transition: background .25s; cursor: pointer;
}
.blog-card:hover { background: var(--off); }
.blog-card-meta {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brown);
}
.blog-card-meta .blog-card-date { display: block; color: rgba(47,43,41,.5); margin-top: 8px; font-size: 9px; }
.blog-card h2 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1;
  color: var(--dark); margin-bottom: 16px;
}
.blog-card-excerpt { font-size: 14px; font-weight: 300; line-height: 1.75; color: #6d6358; margin-bottom: 18px; }
.blog-card-author { font-size: 12px; color: rgba(47,43,41,.5); }
.blog-card-author strong { color: var(--dark); font-weight: 400; }

/* INDIVIDUAL ARTICLE */
.article-hero {
  padding: 148px 60px 56px; background: var(--dark); color: var(--ivory);
}
.article-hero-in { max-width: 760px; margin: 0 auto; }
.article-hero .back {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(243,243,243,.5);
  display: inline-block; margin-bottom: 32px; transition: color .2s;
}
.article-hero .back:hover { color: var(--beige); }
.article-eyebrow {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--beige);
  display: block; margin-bottom: 18px;
}
.article-hero h1 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(32px, 5vw, 56px); line-height: 1.05; color: var(--ivory);
  margin-bottom: 28px;
}
.article-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(243,243,243,.5);
  padding-top: 24px; border-top: 1px solid rgba(220,208,195,.12);
}
.article-meta strong { font-weight: 500; color: rgba(243,243,243,.85); }

/* ARTICLE BODY */
.article-body {
  max-width: 720px; margin: 0 auto; padding: 64px 60px 96px;
}
.article-body p {
  font-size: 17px; font-weight: 300; line-height: 1.85; color: #3a342f;
  margin-bottom: 24px;
}
.article-body p.lede {
  font-size: 20px; font-weight: 300; line-height: 1.65; color: var(--dark);
  margin-bottom: 36px;
}
.article-body h2 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15;
  color: var(--dark); margin: 56px 0 20px;
  padding-top: 32px; border-top: 1px solid rgba(47,43,41,.1);
}
.article-body h2:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.article-body h3 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; color: var(--dark); margin: 36px 0 14px;
}
.article-body ul, .article-body ol {
  margin: 0 0 28px 24px; padding-left: 4px;
}
.article-body li {
  font-size: 17px; font-weight: 300; line-height: 1.75; color: #3a342f;
  margin-bottom: 10px;
}
.article-body strong { font-weight: 500; color: var(--dark); }
.article-body em { font-style: italic; color: #5a4f47; }
.article-body blockquote {
  margin: 36px 0; padding: 28px 32px; background: var(--off);
  border-left: 3px solid var(--brown);
  font-size: 18px; font-weight: 300; line-height: 1.65; color: var(--dark);
  font-style: italic;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body a { color: var(--brown); border-bottom: 1px solid rgba(131,107,91,.3); transition: border-color .2s; }
.article-body a:hover { border-bottom-color: var(--brown); }

/* CALLOUT BOX (for stats / takeaways) */
.callout {
  margin: 36px 0; padding: 28px 32px;
  background: var(--dark); color: var(--ivory);
}
.callout-label {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--beige);
  display: block; margin-bottom: 14px;
}
.callout-num {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 300;
  font-size: clamp(36px, 6vw, 56px); line-height: 1; color: var(--ivory);
  margin-bottom: 12px;
}
.callout p {
  font-size: 14px !important; font-weight: 300; line-height: 1.65;
  color: rgba(243,243,243,.7) !important; margin-bottom: 0 !important;
}

/* AUTHOR CARD AT END */
.article-author {
  margin: 64px auto 0; max-width: 720px;
  padding: 32px 0; border-top: 1px solid rgba(47,43,41,.12);
}
.article-author-label {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(47,43,41,.5);
  display: block; margin-bottom: 14px;
}
.article-author-name {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dark);
  margin-bottom: 10px;
}
.article-author-bio {
  font-size: 14px; font-weight: 300; line-height: 1.75; color: #6d6358;
  max-width: 600px; margin-bottom: 20px;
}

/* CTA BLOCK AT END */
.article-cta {
  background: var(--dark); color: var(--ivory);
  padding: 64px 60px; margin-top: 64px; text-align: center;
}
.article-cta h2 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.05; color: var(--ivory);
  margin-bottom: 20px;
}
.article-cta p {
  font-size: 15px; color: rgba(243,243,243,.6); max-width: 520px;
  margin: 0 auto 32px; line-height: 1.7;
}
.article-cta a {
  display: inline-block;
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  background: var(--beige); color: var(--dark);
  padding: 16px 32px; transition: opacity .2s;
}
.article-cta a:hover { opacity: .85; }

/* RELATED POSTS */
.article-related {
  max-width: 1100px; margin: 0 auto; padding: 64px 60px;
}
.article-related-label {
  font-family: 'Sweet Sans Pro', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--brown);
  display: block; margin-bottom: 32px;
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card {
  display: block; padding: 24px; background: var(--off);
  border-left: 2px solid var(--brown); transition: background .2s;
}
.related-card:hover { background: var(--beige); }
.related-card h3 {
  font-family: 'Sweet Sans Pro', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 14px; line-height: 1.25; color: var(--dark);
}

/* MOBILE */
@media (max-width: 720px) {
  .blog-hero { padding: 96px 20px 40px; }
  .blog-listing { padding: 48px 20px; }
  .blog-card { grid-template-columns: 1fr; gap: 14px; padding: 32px 24px; }
  .article-hero { padding: 96px 20px 36px; }
  .article-body { padding: 40px 20px 64px; }
  .article-body p, .article-body li { font-size: 16px; }
  .article-body p.lede { font-size: 18px; }
  .article-cta { padding: 48px 20px; }
  .article-related { padding: 48px 20px; }
  .related-grid { grid-template-columns: 1fr; }
  .article-meta { gap: 14px; font-size: 9px; }
}