:root {
    --main_font: [main_font];
    --second_font: [second_font];
    --main_color: [main_color];
    --second_color: [second_color];
}

body, html {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-family: var(--main_font);
    line-height: 24px;
    color: #444;
    font-size: 15px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a{
    color: var(--main_color);
    text-decoration: none;
    /*border-bottom: 1px solid var(--main_color);*/
}
a:hover{
    text-decoration: underline;
}
ul{
    margin: 0; padding: 0;
    list-style-type: none;
}
.simple ul{
    margin: revert; padding: revert;
}
.simple li {
    margin-bottom: 5px;
}
.simple ul li::before {
    content: "\2022";
    color: #e4272e;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 18px;
}
h1,h2,h3,h4{
    font-family: var(--second_font);
    font-weight: 600;
    padding: 0;
    line-height: 1.2;
    color: var(--main_color);
}
h1{
    font-size: 36px;
    margin-bottom: 50px;
    position: relative;
    width: fit-content;
}
h1:after{
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 80%;
    height: 3px;
    max-width: 300px;
    background-color: var(--main_color);
}
h2,h3{
    font-size: 30px;
    margin: 0;
    padding-bottom: 50px;
}
h4{
    font-size: 22px;
    margin: 30px 0 20px;
}
p{
    margin: 0 0 15px 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
table{
    width: 100%;
    margin-bottom: 15px;
}
th, td{
    padding: 10px 5px;
    border-bottom: 1px solid #ddd;
}
table thead th{
    background-color: #f7f7f7;
    border-bottom: 1px solid #ccc;
    text-align: left;
    color: #404040;
}
input:not(.btn):not([TYPE=checkbox]):not([TYPE=radio]):not([TYPE=button]):not([TYPE=submit]), select, textarea, button {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 9px;
    font-size: 16px;
    line-height: 24px;
    -webkit-appearance:none;
    color: #444;
}
p.title{
    font-family: var(--second_font);
    font-size: 18px;
    font-weight: 600;
}
.content {
    width: 95%;
    margin: 0 auto;
    max-width: 1440px;
    position: relative;
}
hr{
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
}
.blocked {
    opacity: 0.5;
    pointer-events: none;
}
.flex{
    display: flex;
}
.space{
    justify-content: space-between;
}
.hcenter{
    justify-content: center;
}
.vcenter{
    align-items: center;
}
.w30{
    width: 30%;
}
.w40{
    width: 40%;
}
.w50{
    width: 50%;
}
.w60{
    width: 60%;
}
.w70{
    width: 70%;
}
.fright{
    float: right;
}
.center{
    text-align: center;
    margin: 0 auto;
}
.right{
    text-align: right;
}
.content{
    padding: 100px 0;
}
.btn{
    display: inline-block;
    font-size: 20px;
    color: #fff;
    border-radius: 5px;
    border: 0;
    padding: 17px 28px 17px 28px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    background: var(--main_color);
}

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(50%);
    }
}

.btn.processing {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    background-color: #333;
    color: #999;
}
.btn.processing:before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 200%;
     height: 100%;
     background: repeating-linear-gradient(
         to right,
         #fff 0,
         #fff 5%,
         transparent 5%,
         transparent 10%
     );
     animation: slide 5s linear infinite;
     opacity: 0.2;
}
.btn:hover{
    background-color: var(--second_color);
}
.btn.white{
    background: #fff;
    border: 2px solid var(--main_color);
    color: var(--main_color);
}
.btn.inactive,.btn.inactive:hover{
    background: #333;
    color: #999;
}
.mobile-el {
    display: none;
}
.hidden{
    display: none;
}
.inline{
    display: inline-block;
}
#header-inner{
    color: #fff;
    padding-top: 5px;
}
#header-inner a,#mobile-menu a{
    border: 0;
}
.mobile-menu-btn{
    float: right;
    display: none;
    width: 30px;
    height: 30px;
    background: transparent url(/view/images/burger-w-icon.svg) no-repeat center/contain;
    border: 0;
    cursor: pointer;
    outline: none;
    text-indent: 20px;
    /* overflow: hidden; */
}
.mobile-menu-btn:hover{
    background: transparent url(/view/images/burger-w-icon.svg) no-repeat center/contain;
}
.menu{
    display: inline-block;
}
.menu a{
    line-height: 36px;
    display: inline-block;
    padding: 0px 15px;
    position: relative;
}
.menu a.active{
    text-decoration: underline;
}
#back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--c-ink, #1a0e04);
    color: var(--c-paper, #f4ebd9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, visibility .25s, transform .2s, background-color .15s;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(26, 14, 4, 0.25);
    padding: 0;
}
#back-to-top.visible {
    opacity: 0.9;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover {
    opacity: 1;
    background: var(--c-tape-red, #b8412a);
    transform: translateY(-2px);
}
#back-to-top svg { display: block; }
#mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 14, 4, 0.55);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#mobile-menu-backdrop.expand {
    opacity: 1;
    visibility: visible;
}
#mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: var(--c-paper);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 3px solid var(--c-tape-red);
    color: var(--c-ink);
}
#mobile-menu.expand {
    transform: translateX(0);
    box-shadow: -8px 0 32px rgba(26, 14, 4, 0.22);
}
#mobile-menu .mobile-menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 3px double var(--c-ink);
    flex-shrink: 0;
}
#mobile-menu .mobile-menu-mark {
    font-family: var(--display-font);
    font-size: 24px;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    line-height: 1;
    font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
#mobile-menu .mobile-menu-mark em {
    color: var(--c-tape-red);
    font-style: italic;
    font-variation-settings: 'opsz' 40, 'SOFT' 100;
}
#mobile-menu .mobile-menu-close {
    background: transparent;
    border: 0;
    color: var(--c-ink);
    font-size: 32px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: var(--display-font);
    padding: 0;
    border-radius: 0;
    transition: color .15s, transform .15s;
}
#mobile-menu .mobile-menu-close:hover {
    color: var(--c-tape-red);
    transform: rotate(90deg);
}
#mobile-menu .mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 18px 0 24px;
}
#mobile-menu .mobile-menu-nav .menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#mobile-menu .mobile-menu-nav .menu a {
    display: block;
    font-family: var(--display-font);
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    color: var(--c-ink);
    padding: 12px 28px;
    line-height: 1.3;
    text-decoration: none;
    border: 0;
    transition: color .15s, padding-left .18s ease, background .15s;
    font-variation-settings: 'opsz' 60, 'SOFT' 80;
    position: relative;
    opacity: 1;
}
#mobile-menu .mobile-menu-nav .menu a:hover {
    color: var(--c-tape-red);
    padding-left: 36px;
    background: rgba(178, 144, 107, 0.07);
}
#mobile-menu .mobile-menu-nav .menu a.active {
    color: var(--c-tape-red);
    padding-left: 36px;
    background: rgba(178, 144, 107, 0.06);
}
#mobile-menu .mobile-menu-nav .menu a.active::before {
    content: '\2756';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-tape-red);
    font-size: 11px;
    font-style: normal;
    line-height: 1;
}
#mobile-menu .mobile-menu-foot {
    padding: 20px 24px 22px;
    border-top: 1px solid var(--c-border);
    background: rgba(178, 144, 107, 0.05);
    flex-shrink: 0;
}
#mobile-menu .mobile-menu-foot .tagline {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 14px;
    color: var(--c-deep-sepia);
    margin: 0 0 8px;
    line-height: 1.4;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}
#mobile-menu .mobile-menu-foot a {
    font-family: var(--main_font);
    font-size: 12px;
    color: var(--c-tape-red);
    text-decoration: none;
    border-bottom: 1px solid var(--c-tape-red);
    letter-spacing: 0.04em;
}
body.menu-open {
    overflow: hidden;
}
@media (min-width: 1025px) {
    #mobile-menu,
    #mobile-menu-backdrop { display: none; }
}

.select-arrow{
    position: relative;
}
.select-arrow:after {
    content: '';
    position: absolute;
    top: 18px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: url(/view/images/arrow-b.svg) no-repeat;
    pointer-events: none;
}

footer .icons{
    position: relative;
    padding: 0 0 5px 28px;
}
footer .icons:before{
    content: '';
    left: 0;
    position: absolute;
}
footer .icons:before{
    width: 20px;
    height: 20px;
    top: 2px;
}
footer .icons.phone:before{
    background: url(/view/images/phone-cir-w-icon.svg) no-repeat center/cover;
}
footer .icons.email:before{
    background: url(/view/images/email-cir-w-icon.svg) no-repeat center/cover;
}
footer .icons.fb-share:before{
    background: url(/view/images/fb-cir-w-icon.svg) no-repeat center/cover;
}
footer .icons.inst-share:before{
    background: url(/view/images/inst-cir-w-icon.svg) no-repeat center/cover;
}
footer .icons.yt-share:before{
    background: url(/view/images/yt-cir-w-icon.svg) no-repeat center/cover;
}
.share-links a{
    border: 0;
    margin-right: 5px;
}
footer{
    margin-top: auto;
    font-weight: 300;
}
footer .content{
    padding: 30px 0 0;
    text-align: left;
}
.footer>li{
    margin-bottom: 20px;
}
footer .title{
    font-size: 16px;
    padding-bottom: 15px;
    border: none;
}
#footer-logo{
    font-size: 12px;
    margin-right: 20px;
}
#footer-logo img { height: 30px; width: auto; display: block; }
#footer-logo p{
    margin: 0;
    line-height: 16px;
    padding: 0;
    text-align: left;
}
#footer-logo p.footer-tagline {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-deep-sepia, #3a200a);
    margin: 0px 0 12px;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}
#footer-contact{
    margin-left: auto;
}
.footer-bottom{
    background: transparent;
    border-top: 1px solid rgba(58, 32, 10, 0.22);
    margin: 24px calc(50% - 50vw) 0;
    padding: 18px calc(50vw - 50%);
    text-align: center;
}
.footer-bottom a{
    color: var(--c-deep-sepia, #3a200a);
    padding: 0 12px;
    opacity: 0.85;
    transition: opacity .15s, color .15s;
}
.footer-bottom a:hover{
    color: var(--c-tape-red);
    opacity: 1;
    text-decoration: none;
}
@media only screen
and (min-width : 1024px) {
    .menu a:hover {
        opacity: 1;
    }
}
@media only screen
and (max-width : 1024px)  {
    h1{
        font-size: 30px;
        line-height: 1.2;
    }
    h2{
        font-size: 24px;
    }
    h3{
        font-size: 24px;
        padding-bottom: 30px;
    }
    .top_menu{
        display: none;
    }
    .mobile-menu-btn{
        display: block;
    }
    .menu a{
        color: #000;
        opacity:0.6;
    }
    .menu a:hover, .menu a.active{
        opacity:1;
    }
    .menu a{
        display: block;
        padding: 0 0 5px;
    }
    #mobile-menu.expand{
        transform: translateX(0);
    }
}
@media only screen
and (max-width : 600px)  {
    .content{
        padding: 50px 0;
    }
    .noflex600{
        display: block;
    }
    .desktop-el{
        display: none;
    }
    .mobile-el{
        display: inherit;
    }
}
.modal{
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(200,200,200,0.8);
    z-index: 1000;
    display: none;
}
.modal-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 20px 60px 0 rgba(0,0,0,.15);
    width: 50%;
    background: #fff;
    border-radius: 3px;
    text-align: center;
    padding: 20px;
}
.modal-close{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 25px;
    height: 25px;
    border: 0;
}
.modal-close:before, .modal-close:after {
    position: absolute;
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: #bbb;
}
.modal-close:hover:before,.modal-close:hover:after {
    background-color: #4f2ee5;
}
.modal-close:before {
    transform: rotate(45deg);
}
.modal-close:after {
    transform: rotate(-45deg);
}
.modal-buttons{
    display: flex;
    justify-content: space-between;
}
.modal .title{
    font-size: 36px;
    color: #4f2ee5;
}
.modal .mess{
    margin: 30px 0 30px;
    display: none;
    font-size: 18px;
}
.modal .mess span{
    color: #4f2ee5;
}
.modal .mess.show{
    display: block;
}
.modal .popup-btn-no{
    color: #222;
    background-color: #f5f5f5;
}
@media only screen
and (max-width : 600px) {
    .modal-content {
        width: 90%;
    }
    .modal .title{
        font-size: 30px;
    }
}

/* ============================================================
   SaveVHS design tokens + shared components
   ============================================================ */
:root {
    --c-bg: #f8f1e6;
    --c-surface: #fffaf2;
    --c-accent: #c5532b;
    --c-text: #2a1a0d;
    --c-muted: #7a6451;
    --c-border: #e0d2bd;
}
body {
    background: var(--c-bg);
    color: var(--c-text);
}

/* Section spacing */
.section.cream { background: var(--c-surface); }

/* Hero actions — kept for editorial-hero usage */
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* FAQ — base behaviour (open/closed JS toggle). Editorial overrides with .faq-list.editorial */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 20px 40px 20px 0;
    font-family: var(--main_font);
    font-size: 18px;
    font-weight: 600;
    color: var(--main_color);
    cursor: pointer;
    position: relative;
}
.faq-q:after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: var(--c-accent);
    transition: transform .2s;
}
.faq-item.open .faq-q:after { content: '\2212'; }
.faq-a {
    display: none;
    padding: 0 0 20px;
    color: var(--c-muted);
    line-height: 1.6;
}
.faq-item.open .faq-a { display: block; }

/* Section heading — base (editorial overrides with grid layout) */
.section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.section-head h2 { padding-bottom: 16px; }
.section-head p { color: var(--c-muted); font-size: 18px; margin: 0; }

@media (max-width: 600px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   SaveVHS — Sepia Editorial layer
   Replaces generic card grids with magazine-style typography,
   numbered editorial entries, sticker-styled CTAs, ornaments.
   ============================================================ */
:root {
    --display-font: 'Fraunces', 'Bellota Text', Georgia, serif;
    --c-paper: #f4ebd9;
    --c-ink: #1a0e04;
    --c-tape-red: #b8412a;
    --c-deep-sepia: #3a200a;
}
body {
    background: var(--c-paper);
    color: var(--c-ink);
    font-feature-settings: 'kern' 1, 'liga' 1;
}
/* Subtle paper grain texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("/view/images/bg-noise.svg");
    opacity: 0.22;
    mix-blend-mode: multiply;
}
footer, main { position: relative; z-index: 2; }
#mobile-menu { z-index: 1001; }

/* Editorial type overrides */
h1, h2, h3, h4 {
    font-family: var(--display-font);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--c-ink);
}
h1 { font-size: 56px; }
h1:after { background-color: var(--c-tape-red); height: 2px; }
h2 { font-size: 44px; padding-bottom: 30px; font-weight: 500; }
h3 { font-size: 28px; padding-bottom: 18px; font-weight: 500; }
h4 { font-size: 22px; font-weight: 600; }

.display-xl { font-family: var(--display-font); font-size: 88px; line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.display-xl em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; color: var(--c-tape-red); }
.display-l { font-family: var(--display-font); font-size: 64px; line-height: 1; letter-spacing: -0.025em; font-weight: 400; font-variation-settings: 'opsz' 96; }
.display-m { font-family: var(--display-font); font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; font-variation-settings: 'opsz' 60; }

/* Eyebrow — small all-caps label above headings */
.eyebrow {
    display: inline-block;
    font-family: var(--main_font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 18px;
}
.eyebrow .dot { color: var(--c-tape-red); padding: 0 6px; }

/* Dek — editorial deck/subtitle */
.dek {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--c-deep-sepia);
    max-width: 680px;
    margin: 0 0 28px;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}

/* Byline — magazine attribution */
.byline {
    font-family: var(--main_font);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--c-muted);
}

/* Caption — small italicized note (Bellota Text for warmth) */
.caption {
    font-family: var(--second_font);
    font-style: italic;
    font-size: 14px;
    color: var(--c-muted);
}

/* Ornament rule — decorative section divider with centered glyph */
.ornament {
    border: 0;
    background: transparent;
    margin: 0 auto;
    max-width: 720px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: visible;
    color: var(--c-tape-red);
    font-size: 18px;
    line-height: 1;
}
.ornament::before,
.ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}
.ornament.tri { font-size: 14px; word-spacing: 8px; }
.ornament.bold::before,
.ornament.bold::after { background: var(--c-deep-sepia); height: 2px; }

/* Ticker — typeset horizontal strip of words with ornament dividers */
.ticker {
    font-family: var(--display-font);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    text-align: center;
    line-height: 1.6;
    color: var(--c-deep-sepia);
    letter-spacing: 0.02em;
    font-variation-settings: 'opsz' 60;
    padding: 28px 0;
}
.ticker .sep { color: var(--c-tape-red); padding: 0 14px; font-style: normal; font-weight: 400; }

/* Editorial list — numbered list with Roman serial numbers */
.editorial-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ed-item;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.editorial-item {
    counter-increment: ed-item;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid var(--c-border);
    align-items: start;
}
.editorial-item:first-child { padding-top: 16px; }
.editorial-item:last-child { border-bottom: 0; }
.editorial-item::before {
    content: counter(ed-item, lower-roman) ".";
    font-family: var(--display-font);
    font-size: 56px;
    font-weight: 400;
    font-style: italic;
    color: var(--c-tape-red);
    line-height: 0.9;
    font-variation-settings: 'opsz' 96, 'SOFT' 100;
}
.editorial-item h3 {
    font-family: var(--display-font);
    font-size: 28px;
    font-weight: 500;
    padding: 0 0 10px;
    color: var(--c-ink);
}
.editorial-item p { font-size: 17px; line-height: 1.6; color: var(--c-deep-sepia); margin: 0; max-width: 640px; }

/* Editorial timeline — horizontal numbered steps */
.editorial-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 36px;
    align-items: start;
    position: relative;
}
.timeline-step {
    position: relative;
    padding-top: 8px;
}
.timeline-step .step-no {
    font-family: var(--display-font);
    font-size: 86px;
    line-height: 0.85;
    font-weight: 300;
    font-style: italic;
    color: var(--c-tape-red);
    margin-bottom: 16px;
    display: block;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.timeline-step h3 { font-size: 22px; padding-bottom: 10px; }
.timeline-step p { color: var(--c-deep-sepia); font-size: 16px; margin: 0; }
.timeline-step .step-figure {
    margin: 0 0 16px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 0 rgba(58,32,10,0.30);
}
.timeline-step .step-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.02);
    transition: transform 0.6s ease;
}
.timeline-step:hover .step-figure img { transform: scale(1.03); }

/* Sticker button — rotated tag-like CTA */
.btn-sticker {
    display: inline-block;
    background: var(--c-tape-red);
    color: #fffdf6;
    font-family: var(--display-font);
    font-weight: 500;
    font-size: 18px;
    padding: 14px 28px;
    text-decoration: none;
    border: 0;
    border-radius: 3px;
    box-shadow: 3px 3px 0 rgba(26,14,4,0.18), 0 1px 0 rgba(255,255,255,0.4) inset;
    transform: rotate(-1.5deg);
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.btn-sticker:hover {
    transform: rotate(-1.5deg) translate(-1px, -1px);
    box-shadow: 5px 5px 0 rgba(26,14,4,0.22);
    text-decoration: none;
}
.btn-sticker.ghost {
    background: transparent;
    color: var(--c-ink);
    box-shadow: inset 0 0 0 2px var(--c-ink);
}
.btn-sticker.ghost:hover {
    background: var(--c-ink);
    color: var(--c-paper);
}

/* Link arrow — text-style secondary CTA */
.link-arrow {
    font-family: var(--main_font);
    font-weight: 600;
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--c-ink);
    padding-bottom: 3px;
    transition: color .15s, border-color .15s;
}
.link-arrow:hover { color: var(--c-tape-red); border-color: var(--c-tape-red); text-decoration: none; }
.link-arrow span { display: inline-block; transition: transform .15s; padding-left: 6px; }
.link-arrow:hover span { transform: translateX(3px); }

/* Price tag — vintage price sticker */
.price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--c-tape-red);
    color: #fffdf6;
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 36px;
    padding: 10px 18px 10px 26px;
    border-radius: 2px;
    position: relative;
    transform: rotate(-2deg);
    box-shadow: 3px 4px 0 rgba(26,14,4,0.16);
    line-height: 1;
}
.price-tag::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--c-paper);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(26,14,4,0.25) inset;
}
.price-tag small { font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }

/* Stamp — postmark-style decoration */
.stamp {
    display: inline-block;
    border: 2px solid currentColor;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: var(--display-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    opacity: 0.85;
}

/* Magazine hero — default for all pages (paper bg, dark text) */
.editorial-hero {
    padding: 80px 0 60px;
    position: relative;
}
.editorial-hero h1 { margin: 0 0 24px; padding: 0; }
.editorial-hero h1::after { display: none; }
.editorial-hero .lead { max-width: 620px; }
.editorial-hero:not(.editorial-hero--full) .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 56px;
    align-items: center;
}
.editorial-hero:not(.editorial-hero--full) .hero-figure {
    margin: 0;
    transform: rotate(1deg);
}
.editorial-hero:not(.editorial-hero--full) .hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow:
        0 1px 0 rgba(58,32,10,0.35),
        14px 14px 0 -4px rgba(58,32,10,0.10);
    filter: saturate(0.92) contrast(1.02);
}
@media (max-width: 900px) {
    .editorial-hero:not(.editorial-hero--full) .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .editorial-hero:not(.editorial-hero--full) .hero-figure { display: none; }
}

/* Full-bleed hero variant — used on home page only */
.editorial-hero--full {
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--c-paper);
    background:
        linear-gradient(to right, rgba(26,14,4,0.85) 0%, rgba(26,14,4,0.55) 50%, rgba(26,14,4,0.30) 100%),
        image-set(url("/cdn/home/hero-tapes_size1920x1080.webp") type("image/webp"), url("/cdn/home/hero-tapes_size1920x1080.jpg") type("image/jpeg")) center/cover no-repeat;
}
.editorial-hero--full .content {
    padding: 0 clamp(20px, 4vw, 80px);
}
.editorial-hero--full .display-xl,
.editorial-hero--full h1,
.editorial-hero--full .eyebrow { color: var(--c-paper); }
.editorial-hero--full .eyebrow { color: rgba(244,235,217,0.72); }
.editorial-hero--full .eyebrow .dot { color: var(--c-tape-red); }
.editorial-hero--full .dek {
    color: rgba(244,235,217,0.88);
    max-width: 560px;
}
.editorial-hero--full .link-arrow {
    color: var(--c-paper);
    border-bottom-color: rgba(244,235,217,0.5);
}
.editorial-hero--full .link-arrow:hover {
    color: var(--c-tape-red);
    border-bottom-color: var(--c-tape-red);
}
.editorial-hero--full .ornament { display: none; }

/* Pull-quote with macro film background */
.section.with-quote-bg {
    background:
        linear-gradient(to right, rgba(26,14,4,0.92) 0%, rgba(26,14,4,0.65) 55%, rgba(26,14,4,0.85) 100%),
        image-set(url("/cdn/quote-tape-macro_size1280x720.webp") type("image/webp"), url("/cdn/quote-tape-macro_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
    color: var(--c-paper);
}
.section.with-quote-bg .pull-quote { color: var(--c-paper); }
/* Services page: reuse the AI film callout background for the quote section */
.section.with-quote-bg.with-ai-film-bg {
    background:
        linear-gradient(rgba(26,14,4,0.80), rgba(26,14,4,0.92)),
        image-set(url("/cdn/callout-ai-film_size1280x720.webp") type("image/webp"), url("/cdn/callout-ai-film_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}

/* Magazine package spread */
.package-spread {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.package-feature {
    padding: 40px 32px 36px;
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    position: relative;
    background: transparent;
}
.package-feature:last-child { border-right: 0; }
.package-feature .pf-no {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 14px;
    color: var(--c-tape-red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.package-feature h3 { font-size: 30px; padding-bottom: 16px; }
.package-feature .pf-price { margin-bottom: 24px; }
.per-tape {
    display: block;
    margin-top: 18px;
    font-family: var(--display-font);
    font-style: italic;
    font-size: 20px;
    font-weight: 500;
    color: var(--c-deep-sepia);
    line-height: 1;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}
.per-tape small {
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-left: 8px;
    vertical-align: 2px;
}
.per-tape .from {
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    color: var(--c-muted);
    margin-right: 6px;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
    letter-spacing: 0;
    text-transform: lowercase;
}
.package-feature ul { list-style: none; padding: 0; margin: 0 0 28px; flex-grow: 1; }
.package-feature ul li {
    padding: 10px 0 10px 20px;
    border-bottom: 1px dotted var(--c-border);
    color: var(--c-deep-sepia);
    position: relative;
    font-size: 15px;
    line-height: 1.5;
}
.package-feature ul li:last-child { border-bottom: 0; }
.package-feature ul li::before {
    content: '\2014';
    position: absolute;
    left: 0;
    color: var(--c-tape-red);
}

/* Pull quote — magazine pull-quote */
.pull-quote {
    border-top: 0;
    border-bottom: 1px solid var(--c-border);
    padding: 0 0 40px;
    margin: 60px auto;
    max-width: 880px;
    text-align: center;
    font-family: var(--display-font);
    font-size: 36px;
    line-height: 1.25;
    font-style: italic;
    color: var(--c-ink);
    font-variation-settings: 'opsz' 60, 'SOFT' 100;
}
.pull-quote .pq-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    color: var(--c-paper);
}
.pull-quote .pq-mark::before,
.pull-quote .pq-mark::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}
.pull-quote .pq-mark svg {
    width: 56px;
    height: 42px;
    display: block;
    flex-shrink: 0;
}
.pull-quote .pq-text { display: block; }
@media (max-width: 768px) {
    .pull-quote .pq-mark {
        gap: 12px;
        margin-bottom: 20px;
    }
    .pull-quote .pq-mark svg {
        width: 28px;
        height: 21px;
    }
}

/* Editorial FAQ — refined questions list */
.faq-list.editorial .faq-item { border-bottom: 1px solid var(--c-deep-sepia); }
.faq-list.editorial .faq-q {
    font-family: var(--display-font);
    font-size: 22px;
    font-weight: 500;
    color: var(--c-ink);
    padding: 24px 60px 24px 0;
}
.faq-list.editorial .faq-q::after { color: var(--c-tape-red); font-family: var(--display-font); font-weight: 300; }
.faq-list.editorial .faq-a { font-size: 16px; line-height: 1.65; color: var(--c-deep-sepia); padding: 0 60px 24px 0; }

/* Editorial format strip — typographic */
.format-ticker {
    font-family: var(--display-font);
    font-size: 24px;
    text-align: center;
    color: var(--c-deep-sepia);
    padding: 24px 0;
    font-variation-settings: 'opsz' 36;
    line-height: 1.4;
    letter-spacing: 0.04em;
}
.format-ticker .sep { color: var(--c-tape-red); padding: 0 10px; font-weight: 700; }
.format-ticker em { font-style: italic; font-variation-settings: 'opsz' 36, 'SOFT' 100; }

/* Decorative number margin */
.section-num {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 14px;
    color: var(--c-tape-red);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Updated section-head — magazine style */
.section-head {
    text-align: left;
    max-width: none;
    margin: 0 auto 48px;
    border-bottom: 2px solid var(--c-ink);
    padding-bottom: 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
}
.section-head h2 { padding-bottom: 0; margin: 8px 0 0; font-size: 56px; }
.section-head p { color: var(--c-deep-sepia); font-size: 18px; margin: 0; max-width: 460px; font-style: italic; }
.section-head .head-meta { font-family: var(--main_font); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); text-align: right; line-height: 1.7; }

/* Stamp callout (replaces .callout for editorial pages) */
.callout-stamp {
    background: var(--c-deep-sepia);
    color: var(--c-paper);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}
.callout-stamp p a{
    color: var(--c-tape-red);
}
.callout-stamp::before{
    content: '';
    position: absolute;
    inset: 24px;
    border: 2px dashed rgba(244,235,217,0.18);
    border-radius: 6px;
    pointer-events: none;
}
@media (max-width: 768px) {
    .callout-stamp::before { display: none; }
}
.callout-stamp h2 { color: var(--c-paper); font-size: 56px; padding-bottom: 16px; }
.callout-stamp h2 em { color: #ddb87a; font-style: italic; }
.callout-stamp p { color: rgba(244,235,217,0.85); font-size: 19px; max-width: 640px; margin: 0 auto 32px; font-family: var(--display-font); font-style: italic; }

.callout-stamp .callout-actions {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}
.callout-stamp .callout-actions .link-arrow {
    color: var(--c-paper);
    border-bottom-color: rgba(244,235,217,0.5);
}
.callout-stamp .callout-actions .link-arrow:hover {
    color: var(--c-tape-red);
    border-bottom-color: var(--c-tape-red);
}
.callout-stamp.with-portland-bg {
    background:
        linear-gradient(rgba(26,14,4,0.78), rgba(26,14,4,0.92)),
        image-set(url("/cdn/callout-portland_size1280x720.webp") type("image/webp"), url("/cdn/callout-portland_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}
.callout-stamp.with-tapes-bg {
    background:
        linear-gradient(rgba(26,14,4,0.80), rgba(26,14,4,0.92)),
        image-set(url("/cdn/callout-tapes_size1280x720.webp") type("image/webp"), url("/cdn/callout-tapes_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}
.callout-stamp.with-letters-bg {
    background:
        linear-gradient(rgba(26,14,4,0.80), rgba(26,14,4,0.92)),
        image-set(url("/cdn/callout-letters_size1280x720.webp") type("image/webp"), url("/cdn/callout-letters_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}
.callout-stamp.with-oregon-bg {
    background:
        linear-gradient(rgba(26,14,4,0.78), rgba(26,14,4,0.92)),
        image-set(url("/cdn/callout-oregon_size1280x720.webp") type("image/webp"), url("/cdn/callout-oregon_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}
.callout-stamp.with-ai-film-bg {
    background:
        linear-gradient(rgba(26,14,4,0.80), rgba(26,14,4,0.92)),
        image-set(url("/cdn/callout-ai-film_size1280x720.webp") type("image/webp"), url("/cdn/callout-ai-film_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}

/* Closing CTA - editorial back-cover */
.closing-cta {
    text-align: center;
    padding: 100px 20px;
}
.closing-cta h2 { font-size: 80px; margin-bottom: 24px; padding-bottom: 0; }
.closing-cta h2 em { color: var(--c-tape-red); font-style: italic; }
.closing-cta p { font-size: 22px; font-family: var(--display-font); font-style: italic; color: var(--c-deep-sepia); margin: 0 auto 36px; }

.closing-cta.with-finale-bg {
    position: relative;
    overflow: hidden;
    color: var(--c-paper);
    background:
        linear-gradient(rgba(26,14,4,0.75), rgba(26,14,4,0.90)),
        image-set(url("/cdn/closing-finale_size1280x720.webp") type("image/webp"), url("/cdn/closing-finale_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
}
.closing-cta.with-finale-bg h2 { color: var(--c-paper); }
.closing-cta.with-finale-bg p { color: rgba(244,235,217,0.85); }
.closing-cta.with-finale-bg .byline { color: rgba(244,235,217,0.55); }

/* =====================================================================
   Icons (custom inline / file SVG, stroked, currentColor)
   ===================================================================== */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    color: currentColor;
}
.icon-lg { width: 2.4em; height: 2.4em; }
.icon-xl { width: 4em; height: 4em; }
.icon-display { width: 96px; height: auto; color: var(--c-ink); }
.icon-format img,
.icon-display img { display: block; width: 100%; height: auto; }
img.icon-format,
img.icon-display { color: var(--c-ink); }

/* Format-card grid (used on home and as decoration on format pages) */
.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    border-top: 2px solid var(--c-ink);
    border-bottom: 2px solid var(--c-ink);
    margin: 28px 0 0;
}
.format-card {
    text-decoration: none;
    color: inherit;
    padding: 28px 18px 22px;
    border-right: 1px solid var(--c-border);
    text-align: center;
    transition: background .15s, color .15s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.format-card:last-child { border-right: 0; }
.format-card:hover { background: rgba(178,144,107,0.08); color: var(--c-ink); text-decoration: none; }
.format-card:hover .format-card-icon { color: var(--c-tape-red); transform: translateY(-3px); }
.format-card-icon {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    transition: color .18s, transform .18s ease;
}
.format-card-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
.format-card-name {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 20px;
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}
.format-card-meta {
    font-family: var(--main_font);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* =====================================================================
   Photo slots — placeholders for raster images user will provide later
   ===================================================================== */
.photo-slot {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--c-paper);
    border: 1px solid var(--c-deep-sepia);
    box-shadow: 4px 4px 0 var(--c-deep-sepia), 8px 8px 0 var(--c-tape-red);
}
.photo-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-slot--portrait { aspect-ratio: 3 / 4; }
.photo-slot--landscape { aspect-ratio: 3 / 2; }
.photo-slot--wide { aspect-ratio: 16 / 9; }
.photo-slot--square { aspect-ratio: 1 / 1; }
.photo-slot figcaption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(26,14,4,0.78);
    color: var(--c-paper);
    font-family: var(--main_font);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 14px;
    backdrop-filter: blur(2px);
}

/* =====================================================================
   Background patterns (decorative, opt-in via class)
   ===================================================================== */

/* Filmstrip perforations — vertical bars of holes on left/right edges */
.bg-filmstrip {
    position: relative;
}
.bg-filmstrip > .content { width: 90%; }
@media (max-width: 768px) {
    .bg-filmstrip > .content { width: 95%; }
}
.bg-filmstrip::before,
.bg-filmstrip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    background-image: url("/view/images/bg-filmstrip.svg");
    background-repeat: repeat-y;
    background-size: 28px 36px;
    pointer-events: none;
    opacity: 0.85;
}
.bg-filmstrip::before { left: 0; }
.bg-filmstrip::after { right: 0; }
@media (max-width: 768px) {
    .bg-filmstrip::before,
    .bg-filmstrip::after { display: none; }
}

/* Halftone dot field — subtle, for accent zones */
.bg-halftone {
    background-image: radial-gradient(circle, var(--c-deep-sepia) 0.45px, transparent 0.9px);
    background-size: 18px 18px;
    background-position: 0 0;
    opacity: 1;
}

/* Sepia scanlines — for compare-reel etc. */
.bg-scanlines {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(26,14,4,0.06) 3px,
        rgba(26,14,4,0.06) 4px
    );
}
.bg-scanlines--on-dark {
    background-image:
        /* Layer 1: moving tracking band (matches 404 timing) */
        linear-gradient(to bottom,
            transparent 0%,
            rgba(244,235,217,0.06) 50%,
            transparent 100%),
        /* Layer 2: static scanlines */
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(244,235,217,0.10) 3px,
            rgba(244,235,217,0.10) 4px
        );
    background-size: 100% 150px, auto;
    background-repeat: no-repeat, repeat;
    background-position: 0 -150px, 0 0;
    animation: scanlines-band 12s linear infinite;
}
@keyframes scanlines-band {
    /* Both values in px — mixed length/calc(%) endpoints cause discrete interpolation */
    0%   { background-position: 0 -150px, 0 0; }
    100% { background-position: 0 800px,  0 0; }
}
/* Chromatic-aberration + jitter on accent <em> inside dark scanline sections */
.bg-scanlines--on-dark em {
    display: inline-block;
    text-shadow:
        -3px 0 var(--c-tape-red, #b8412a),
         2px 0 rgba(124, 168, 196, 0.85);
    animation: scanlines-em-jitter 10s infinite;
}
@keyframes scanlines-em-jitter {
    0%, 92%, 100% { transform: translateX(0); }
    93% { transform: translateX(-2px) skewX(-1deg); }
    94% { transform: translateX( 2px) skewX(0.5deg); }
    95% { transform: translateX(-1px); }
    96% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bg-scanlines--on-dark,
    .bg-scanlines--on-dark em { animation: none; }
}

/* =====================================================================
   Legal document body — calm editorial typography for terms/privacy
   ===================================================================== */
.legal-doc {
    width: 95%;
    max-width: 760px;
    margin: 0 auto;
    counter-reset: legal-section;
}
.legal-doc h3 {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 26px;
    font-weight: 500;
    color: var(--c-ink);
    margin: 44px 0 14px;
    padding: 0;
    line-height: 1.25;
    font-variation-settings: 'opsz' 60, 'SOFT' 80;
    counter-increment: legal-section;
}
.legal-doc h3:first-child { margin-top: 0; }
.legal-doc h3::before {
    content: counter(legal-section, lower-roman) ".";
    color: var(--c-tape-red);
    font-style: italic;
    margin-right: 14px;
    font-variation-settings: 'opsz' 36, 'SOFT' 100;
    display: inline-block;
    min-width: 30px;
}
.legal-doc p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-deep-sepia);
    margin: 0 0 14px;
}
.legal-doc p a {
    color: var(--c-tape-red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.legal-doc ul {
    margin: 0 0 14px;
    padding-left: 24px;
    list-style: none;
}
.legal-doc ul li {
    position: relative;
    padding: 4px 0;
    color: var(--c-deep-sepia);
    font-size: 16px;
    line-height: 1.6;
}
.legal-doc ul li::before {
    content: '\2014';
    position: absolute;
    left: -24px;
    color: var(--c-tape-red);
}

/* =====================================================================
   Contact page — info column + intake form
   ===================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    align-items: start;
}
.contact-info { padding: 12px 0; }
.contact-info > header {
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--c-ink);
}
.contact-info > header h2 {
    font-size: 36px;
    padding: 0;
    margin: 6px 0 0;
}
.contact-info > header.info-subhead { margin-top: 44px; }
.contact-channels {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.contact-channels li {
    padding: 18px 0;
    border-bottom: 1px dotted var(--c-border);
}
.contact-channels li:last-child { border-bottom: 0; }
.contact-channels .ch-label {
    display: block;
    font-family: var(--main_font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 6px;
}
.contact-channels .ch-value {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 24px;
    color: var(--c-ink);
    text-decoration: none;
    line-height: 1.2;
    display: block;
    margin: 0 0 6px;
    font-variation-settings: 'opsz' 60, 'SOFT' 80;
    word-break: break-word;
}
.contact-channels a.ch-value:hover { color: var(--c-tape-red); }
.contact-channels .ch-note {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 14px;
    color: var(--c-muted);
    margin: 0;
}
.contact-channels .ch-social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.contact-channels .ch-social li {
    padding: 0;
    border: 0;
    flex: 1 1 auto;
}
.contact-channels .ch-social a {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.contact-channels .ch-social a:hover {
    border-color: var(--c-deep-sepia);
    background: rgba(75,41,3,0.04);
    transform: translateX(2px);
}
.contact-channels .ch-social .s-icon {
    width: 26px;
    height: 26px;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.contact-channels .ch-social .s-fb { background-image: url(/view/images/fb-cir-w-icon.svg); }
.contact-channels .ch-social .s-ig { background-image: url(/view/images/inst-cir-w-icon.svg); }
.contact-channels .ch-social .s-yt { background-image: url(/view/images/yt-cir-w-icon.svg); }
.contact-channels .ch-social .s-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.contact-channels .ch-social .s-name {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 18px;
    color: var(--c-ink);
}
.contact-channels .ch-social .s-handle {
    font-family: var(--main_font);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--c-muted);
    margin-top: 2px;
}
.contact-channels .ch-social a:hover .s-name { color: var(--c-tape-red); }

.info-tips {
    list-style: none;
    padding-left: 22px;
    margin: 0;
}
.info-tips li {
    position: relative;
    padding: 6px 0;
    font-family: var(--main_font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-deep-sepia);
}
.info-tips li::before {
    content: '\2014';
    position: absolute;
    left: -22px;
    color: var(--c-tape-red);
}
.info-tips a {
    color: var(--c-tape-red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.contact-form-frame {
    background: var(--c-bg);
    border: 1px solid var(--c-deep-sepia);
    box-shadow: 6px 6px 0 var(--c-deep-sepia), 12px 12px 0 var(--c-tape-red);
    position: relative;
}
.contact-form-frame::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed var(--c-border);
    pointer-events: none;
}
.contact-form-stamp {
    background: var(--c-deep-sepia);
    color: var(--c-paper);
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 500;
    text-align: center;
    padding: 12px 20px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
    z-index: 1;
}
.contact-form-stamp em {
    color: var(--c-tape-red);
    font-style: italic;
    margin-left: 4px;
}
.contact-form {
    padding: 32px 36px 36px;
    position: relative;
    z-index: 1;
}
.contact-form .form-row {
    margin-bottom: 24px;
    position: relative;
}
.contact-form label {
    display: block;
    font-family: var(--main_font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-deep-sepia);
    margin-bottom: 8px;
}
.contact-form label .req {
    color: var(--c-tape-red);
    margin-left: 2px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--c-ink);
    padding: 10px 0 8px;
    font-family: var(--display-font);
    font-style: italic;
    font-size: 20px;
    color: var(--c-ink);
    line-height: 1.3;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}
.contact-form select {
    padding-right: 28px;
}
.contact-form select option {
    padding: 10px 14px;
    font-family: var(--main_font);
    font-style: normal;
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-ink);
    background: var(--c-bg);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--c-deep-sepia);
    opacity: 0.55;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-bottom-color: var(--c-tape-red);
}
.contact-form textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}
.contact-form .select-wrap { position: relative; }
.contact-form .select-wrap::after {
    content: '\25BE';
    position: absolute;
    right: 0;
    top: 14px;
    color: var(--c-tape-red);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

/* Custom select widget (JS-enhanced) */
.contact-form .select-wrap.is-custom > select {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.contact-form .custom-select-trigger {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--c-ink);
    padding: 10px 28px 8px 0;
    font-family: var(--display-font);
    font-style: italic;
    font-size: 20px;
    color: var(--c-ink);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
    display: block;
}
.contact-form .custom-select-trigger.is-placeholder {
    color: var(--c-deep-sepia);
    opacity: 0.55;
}
.contact-form .custom-select-trigger:focus {
    outline: none;
    border-bottom-color: var(--c-tape-red);
}
.contact-form .custom-select-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-deep-sepia);
    box-shadow: 4px 4px 0 var(--c-deep-sepia);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}
.contact-form .custom-select-list[hidden] { display: none; }
.contact-form .custom-select-option {
    padding: 12px 18px;
    font-family: var(--main_font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--c-deep-sepia);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.contact-form .custom-select-option:hover,
.contact-form .custom-select-option.is-active {
    background: var(--c-paper);
    color: var(--c-ink);
}
.contact-form .custom-select-option[aria-selected="true"] {
    color: var(--c-tape-red);
    font-weight: 600;
}
.contact-form .contact-submit {
    margin-top: 8px;
    cursor: pointer;
    border: 0;
}
.contact-form .form-note {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 13px;
    color: var(--c-deep-sepia);
    margin: 16px 0 0;
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-info > header.info-subhead { margin-top: 32px; }
    .contact-form { padding: 26px 22px 28px; }
    .contact-form-frame { box-shadow: 4px 4px 0 var(--c-deep-sepia), 8px 8px 0 var(--c-tape-red); }
    .contact-channels .ch-value { font-size: 20px; }
}

/* Subtle reveal on load - hero only */
@keyframes editorial-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.editorial-hero h1 { animation: editorial-rise .8s ease-out both; }
.editorial-hero .lead { animation: editorial-rise .8s ease-out .15s both; }
.editorial-hero .hero-actions { animation: editorial-rise .8s ease-out .3s both; }

/* --- Hero masthead (home) --------------------------------------- */
.hero-masthead {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 4px 0 16px;
}
.masthead-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-decoration: none;
    color: var(--c-ink);
}
.masthead-logo:hover { text-decoration: none; }
.masthead-mark {
    font-family: var(--display-font);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    font-variation-settings: 'opsz' 96, 'SOFT' 30;
}
.masthead-mark em {
    color: var(--c-tape-red);
    font-style: italic;
    font-variation-settings: 'opsz' 60, 'SOFT' 100;
}
.masthead-issue {
    font-family: var(--main_font);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-top: 6px;
}
.masthead-nav { justify-self: end; }
.masthead-nav .menu {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
}
.masthead-nav .menu a {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 17px;
    font-weight: 400;
    color: var(--c-ink);
    padding: 4px 12px;
    border: 0;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
    font-variation-settings: 'opsz' 36, 'SOFT' 80;
}
.masthead-nav .menu a:hover {
    color: var(--c-tape-red);
    text-decoration: none;
    border-bottom-color: var(--c-tape-red);
}
.masthead-nav .menu a.active {
    color: var(--c-tape-red);
    font-style: italic;
}
.masthead-burger { display: none; }
.masthead-rule {
    border: 0;
    height: 0;
    margin: 0 0 40px;
    border-top: 3px double var(--c-ink);
}

/* --- Dual ticker ------------------------------------------------ */
.dual-ticker-frame {
    border-top: 3px double var(--c-ink);
    border-bottom: 3px double var(--c-ink);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dual-ticker-frame .ticker-line {
    margin: 0;
    font-family: var(--display-font);
    font-style: italic;
    font-size: 19px;
    color: var(--c-deep-sepia);
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.5;
    padding: 6px 0;
}
.dual-ticker-frame .ticker-line:first-child {
    border-bottom: 1px dashed var(--c-border);
}
.dual-ticker-frame em {
    color: var(--c-tape-red);
    font-style: italic;
    font-variation-settings: 'opsz' 36, 'SOFT' 100;
    font-weight: 500;
    margin-right: 4px;
}
.dual-ticker-frame .sep {
    color: var(--c-tape-red);
    padding: 0 8px;
    font-weight: 700;
}

/* --- Compare reel (before/after drag slider) ------------------- */
.compare-reel {
    padding: 0;
    background: var(--c-surface);
}
.compare-reel > .content { padding: 0; width: 100%;}
.reel-stage {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 100px auto 112px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-deep-sepia);
    border: 1px solid var(--c-deep-sepia);
    box-shadow:
        6px 6px 0 var(--c-deep-sepia),
        12px 12px 0 var(--c-tape-red);
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.reel-source {
    /* Kept in DOM so the browser keeps decoding & buffering, but invisible.
       display:none would pause playback in some browsers. */
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    top: 0;
    opacity: 0;
    pointer-events: none;
}
.reel-canvas {
    position: absolute;
    inset: 0;
    background: #000 image-set(url("/cdn/compare-poster_size1280x720.webp") type("image/webp"), url("/cdn/compare-poster_size1280x720.jpg") type("image/jpeg")) center/cover no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.reel-mask {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.reel-mask-before {
    clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0);
    -webkit-clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0);
}
.reel-mask-after {
    clip-path: inset(0 0 0 var(--reveal, 50%));
    -webkit-clip-path: inset(0 0 0 var(--reveal, 50%));
}
.reel-tag {
    position: absolute;
    top: 14px;
    background: rgba(26, 14, 4, 0.78);
    color: var(--c-paper);
    font-family: var(--main_font);
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    padding: 7px 12px;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.reel-tag-before { left: 14px; }
.reel-tag-after { right: 14px; }
.reel-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reveal, 50%);
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    outline: none;
}
.reel-handle:focus-visible .reel-handle-knob {
    box-shadow: 0 0 0 3px var(--c-tape-red), 0 0 0 6px rgba(184,65,42,.25), 0 8px 24px rgba(0,0,0,.25);
}
.reel-handle-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--c-paper);
    transform: translateX(-50%);
    box-shadow: 0 0 14px rgba(0,0,0,.45);
}
.reel-handle-knob {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-paper);
    border: 2px solid var(--c-ink);
    box-shadow: 0 0 0 4px rgba(26,14,4,.18), 0 8px 24px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--c-ink);
    font-family: var(--display-font);
    font-size: 26px;
    line-height: 1;
    transition: transform .12s ease;
}
.reel-handle-knob .chev { display: inline-flex; align-items: center; color: var(--c-ink); }
.reel-handle-knob .chev svg { display: block; width: 9px; height: 14px; }
.reel-stage:hover .reel-handle-knob,
.reel-stage:active .reel-handle-knob { transform: scale(1.06); }
/* Responsive editorial */
@media (max-width: 1024px) {
    h1 { font-size: 44px; }
    h2 { font-size: 36px; padding-bottom: 24px; }
    .display-xl { font-size: 64px; }
    .display-l { font-size: 48px; }
    .display-m { font-size: 32px; }
    .editorial-hero--full { min-height: 70vh; }
    .package-spread { grid-template-columns: 1fr; border-bottom: 0; }
    .package-feature { border-right: 0; border-bottom: 1px solid var(--c-border); }
    .package-feature:last-child { border-bottom: 0; }
    .editorial-item { grid-template-columns: 80px 1fr; gap: 20px; padding: 28px 0; }
    .editorial-item::before { font-size: 40px; }
    .section-head { grid-template-columns: 1fr; gap: 16px; }
    .section-head .head-meta { text-align: left; }
    .section-head h2 { font-size: 36px; }
    .pull-quote { font-size: 26px; padding: 32px 16px; }
    .closing-cta h2 { font-size: 52px; }
    .closing-cta { padding: 70px 20px; }
    .callout-stamp h2 { font-size: 36px; }
    .timeline-step .step-no { font-size: 64px; }
    .ticker, .format-ticker { font-size: 18px; }
    .hero-masthead { padding: 4px 0 12px; gap: 14px; grid-template-columns: 1fr auto; }
    .masthead-nav { display: none; }
    .masthead-burger { display: block; justify-self: end; }
    .masthead-mark { font-size: 22px; }
    .masthead-issue { font-size: 9px; }
    .masthead-rule { margin: 0 0 28px; }
    .dual-ticker-frame .ticker-line { font-size: 15px; }
    .compare-reel { padding: 0; }
    .reel-handle-knob { font-size: 20px; }
    .reel-tag { font-size: 9px; padding: 5px 9px; top: 10px; letter-spacing: 0.16em; }
    .reel-tag-before { left: 10px; }
    .reel-tag-after { right: 10px; }
}
@media (max-width: 600px) {
    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    .display-xl { font-size: 44px; }
    .display-l { font-size: 36px; }
    .editorial-item { grid-template-columns: 50px 1fr; gap: 12px; }
    .editorial-item::before { font-size: 28px; }
    .editorial-item h3 { font-size: 22px; }
    .pull-quote { font-size: 20px; }
    .closing-cta h2 { font-size: 38px; }
    .closing-cta p { font-size: 17px; }
    .price-tag { font-size: 28px; }
    .package-feature { padding: 36px 24px 32px; }

    /* Compare reel: switch to vertical (portrait) layout on phones.
       After on top, Before on bottom; drag handle moves up/down. */
    .reel-stage {
        aspect-ratio: 9 / 12;
        max-height: none;
        cursor: ns-resize;
    }
    .reel-canvas {
        background: #000 image-set(url("/cdn/compare-poster-mobile_size540x720.webp") type("image/webp"), url("/cdn/compare-poster-mobile_size540x720.jpg") type("image/jpeg")) center/cover no-repeat;
    }
    .reel-mask-before {
        clip-path: inset(var(--reveal, 50%) 0 0 0);
        -webkit-clip-path: inset(var(--reveal, 50%) 0 0 0);
    }
    .reel-mask-after {
        clip-path: inset(0 0 calc(100% - var(--reveal, 50%)) 0);
        -webkit-clip-path: inset(0 0 calc(100% - var(--reveal, 50%)) 0);
    }
    .reel-tag-after  { right: 12px; left: auto; top: 12px; bottom: auto; }
    .reel-tag-before { right: 12px; left: auto; bottom: 12px; top: auto; }
    .reel-handle {
        top: var(--reveal, 50%);
        bottom: auto;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }
    .reel-handle-line {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
    }
    .reel-handle-knob .chev { transform: rotate(90deg); }
}