/* Red Isle Web V3 — Pressroom x Poster Hero, deep borrow: figma.md
   Colours are the brand's own (pulled from the live site CSS). */

@font-face{
  font-family:'InterVariable';
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JBMonoVariable';
  src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}

:root{
  --canvas:#FFFFFF;
  --cream:#F6F2EC;
  --ink:#23272C;
  --body-c:#43494F;
  --muted:#5D646B;
  --clay:#9C4A3C;
  --clay-dark:#7C382D;
  --navy:#243B50;
  --navy-2:#2E4A63;
  --hairline:#E7E3DD;
  --sans:'InterVariable',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JBMonoVariable','SF Mono',Menlo,'Courier New',monospace;
  --r-block:20px;
  --r-img:12px;
  --r-card:6px;
  --wrap:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-weight:340;color:var(--body-c);background:var(--canvas);font-size:17px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

h1,h2,h3{color:var(--ink);font-weight:340;letter-spacing:-0.02em;line-height:1.08}
h1{font-size:clamp(34px,4.6vw,58px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(20px,2vw,24px);font-weight:540;letter-spacing:-0.01em;line-height:1.3}
strong,b{font-weight:560;color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:300}
.skip:focus{left:0}

/* mono taxonomy layer (borrow: figma.md — mono is data, never body) */
.m-label{font-family:var(--mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.m-label a{color:inherit;text-decoration:none}
.m-label a:hover{color:var(--clay)}

/* giant section numerals (Pressroom structure) */
.sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:14px}
.sec-num{font-family:var(--mono);font-weight:400;font-size:clamp(52px,8.5vw,104px);line-height:.9;color:var(--hairline);user-select:none}
.on-dark .sec-num{color:rgba(255,255,255,.16)}

/* thick baseline rule (Pressroom) */
.rule{border:0;border-top:3px solid var(--ink);margin:0}

/* highlighter underline — clay, draws on scroll */
.hl{background-image:linear-gradient(var(--clay),var(--clay));background-repeat:no-repeat;background-position:0 92%;background-size:100% 3px;padding-bottom:2px}
.js-anim .hl{background-size:0% 3px;transition:background-size .8s cubic-bezier(.5,0,.2,1) .15s}
.js-anim .hl.is-in{background-size:100% 3px}

/* buttons: ink/white pill pair (borrow: figma.md colour-role logic) */
.btn{display:inline-block;font-family:var(--sans);font-weight:480;font-size:16px;letter-spacing:-.01em;text-decoration:none;border-radius:999px;padding:13px 28px;border:1.5px solid transparent;cursor:pointer;transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease}
.btn.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.solid:hover{background:#101316;border-color:#101316;transform:translateY(-2px)}
.btn.ghost{background:var(--canvas);color:var(--ink);border-color:var(--hairline)}
.btn.ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn.on-dark{background:#fff;color:var(--navy);border-color:#fff}
.btn.on-dark:hover{background:rgba(255,255,255,.86);transform:translateY(-2px)}

/* ============ header ============ */
.site-head{position:sticky;top:0;z-index:100;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:22px 24px;transition:padding .3s ease}
.site-head.shrunk .bar{padding:10px 24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-weight:560;font-size:20px;letter-spacing:-.01em}
.brand img{height:40px;width:auto;transition:height .3s ease}
.site-head.shrunk .brand img{height:30px}
nav.links{display:flex;align-items:center;gap:26px}
nav.links a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:400;position:relative;padding:4px 0}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--clay);transition:width .25s ease}
nav.links a:hover::after,nav.links a.active::after{width:100%}
nav.links a.active{color:var(--clay)}
nav.links .btn{padding:10px 22px;font-size:15px}
nav.links .btn::after{display:none}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s ease,opacity .25s ease}
@media (max-width:880px){
  .menu-btn{display:block}
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--hairline);flex-direction:column;align-items:flex-start;padding:18px 24px 24px;gap:16px}
  nav.links.open{display:flex}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============ poster hero (home) ============ */
.poster{min-height:min(calc(100svh - 86px),860px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vh,96px);padding-top:clamp(40px,7vh,84px)}
.poster .intro{max-width:820px}
.poster .intro p{max-width:640px;margin-top:18px;font-size:clamp(16px,1.35vw,19px)}
.poster .intro .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.wordmark-block{padding-bottom:18px}
.mask-type{font-weight:800;letter-spacing:-.04em;line-height:.9;font-size:clamp(40px,12.4vw,188px);white-space:nowrap;color:var(--clay);margin:0 0 18px}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mask-type{
    background-image:url('images/red-dirt.jpg');
    background-size:cover;background-position:50% 60%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
.meta-row{display:flex;justify-content:space-between;gap:12px;border-top:3px solid var(--ink);padding-top:14px}
.meta-row span{font-family:var(--mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
@media (max-width:640px){.meta-row span:nth-child(2){display:none}}

/* ============ bands + colour blocks (borrow: figma.md rhythm) ============ */
.band{padding:clamp(56px,8vw,96px) 24px 0}
.band-inner{max-width:var(--wrap);margin:0 auto}
.block{border-radius:var(--r-block);padding:clamp(36px,5vw,72px)}
.block.cream{background:var(--cream)}
.block.navy{background:var(--navy);color:#DCE5EC}
.block.navy :is(h2,h3){color:#fff}
.on-dark a{color:#fff}
@media (max-width:768px){
  .band{padding-left:0;padding-right:0}
  .block{border-radius:0;padding-left:24px;padding-right:24px}
  .band .band-inner > :not(.block){padding-left:24px;padding-right:24px}
}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
.step{border-top:3px solid var(--ink);padding-top:20px}
.step .num{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.1em;color:var(--clay);display:block;margin-bottom:12px}
.step h3{margin-bottom:10px}
@media (max-width:768px){.steps{grid-template-columns:1fr}}

/* work plates */
.plate-wrap{margin-top:38px;display:grid;gap:clamp(28px,4vw,56px)}
.plate{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.plate.rev .shot{order:2}
.plate .shot{border-radius:var(--r-img);overflow:hidden;border:1px solid var(--hairline)}
.plate .shot img{width:100%}
.plate .m-label{display:block;margin-bottom:12px}
.plate h3{font-size:clamp(24px,2.6vw,32px);font-weight:340;letter-spacing:-.02em;margin-bottom:12px}
.plate p{margin-bottom:22px}
@media (max-width:820px){.plate{grid-template-columns:1fr}.plate.rev .shot{order:0}}

/* curtain wipe (#19) */
.curtain{position:relative;overflow:hidden;border-radius:var(--r-block)}
.js-anim .curtain .curtain-cover{position:absolute;inset:0;background:var(--clay);transform:scaleX(1);transform-origin:right;z-index:2;pointer-events:none}
.js-anim .curtain .curtain-in{opacity:0}
.js-anim .curtain.is-in .curtain-cover{transform:scaleX(0);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.js-anim .curtain.is-in .curtain-in{opacity:1;transition:opacity .3s .3s ease}
html:not(.js-anim) .curtain-cover{display:none}
@media (max-width:768px){.curtain{border-radius:0}}

/* pricing block */
.price-figure{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:clamp(58px,7.5vw,92px);line-height:1;color:#fff;margin:26px 0 8px}
.price-sub{color:#DCE5EC;font-size:17px;margin-bottom:6px}
.included{list-style:none;margin:34px 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.included li{padding:14px 0;border-top:1px solid rgba(255,255,255,.18);font-size:16px}
@media (max-width:768px){.included{grid-template-columns:1fr}}

/* struck-price flag ($1,000 -> $500 for no-website businesses) */
.price-flag{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.price-flag .was{font-weight:480;font-size:clamp(20px,2.2vw,28px);color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}
.price-flag .now{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,40px);color:var(--clay);line-height:1}
.price-flag .flag-note{font-size:15px;font-weight:400;color:var(--body-c)}
.price-flag.on-dark .was{color:rgba(255,255,255,.55)}
.price-flag.on-dark .now{color:#fff}
.price-flag.on-dark .flag-note{color:#DCE5EC}

/* balanced price block (price + CTA left, checklist right) */
.price-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.price-block .price-figure{margin-top:16px}
.price-list{list-style:none}
.price-list li{padding:16px 0;border-top:1px solid rgba(255,255,255,.18);font-size:16px}
.price-list li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
@media (max-width:768px){.price-block{grid-template-columns:1fr;gap:12px}.price-list{margin-top:8px}}

/* about split */
.split{display:grid;grid-template-columns:2fr 3fr;gap:clamp(32px,5vw,64px);align-items:center}
.split .photo{border-radius:var(--r-img);overflow:hidden;border:1px solid var(--hairline)}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* photo band w/ caption */
.photo-band{border-radius:var(--r-block);overflow:hidden;position:relative}
.photo-band img{width:100%}
.photo-band .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;background:linear-gradient(to top,rgba(20,24,28,.72),transparent);color:#fff}
.photo-band .cap .m-label{color:rgba(255,255,255,.85)}
@media (max-width:768px){.photo-band{border-radius:0}}

/* inner-page poster band */
.page-poster{padding:clamp(48px,7vw,88px) 24px 0}
.page-poster .band-inner{max-width:var(--wrap);margin:0 auto}
.page-poster h1{font-size:clamp(38px,6.4vw,84px);letter-spacing:-.03em;max-width:15ch}
.page-poster .lede{max-width:660px;margin-top:20px;font-size:clamp(16px,1.35vw,19px)}
.page-poster .rule{margin-top:clamp(28px,4vw,44px)}

/* pricing page — FAQ accordion (native details/summary, no JS) */
.faq-list{margin-top:8px}
.faq-list details{border-top:1px solid var(--hairline)}
.faq-list details:last-child{border-bottom:1px solid var(--hairline)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--sans);font-weight:540;font-size:clamp(18px,1.9vw,22px);letter-spacing:-.01em;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:26px;line-height:1;color:var(--clay);flex:0 0 auto}
.faq-list details[open] summary::after{content:"\2013"}
.faq-list details > p{margin:0;padding:0 0 26px;max-width:760px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
@media (max-width:768px){.two-col{grid-template-columns:1fr}}
.fine{font-size:13.5px;color:var(--muted);line-height:1.55}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}.contact-grid .details{order:-1}}
.contact-ways{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}
form label{display:block;font-family:var(--mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:20px 0 8px}
form input,form textarea{width:100%;font-family:var(--sans);font-weight:400;font-size:16px;color:var(--ink);padding:13px 15px;border:1.5px solid var(--hairline);border-radius:8px;background:#fff;transition:border-color .2s ease}
form input:focus,form textarea:focus{border-color:var(--clay);outline:none}
form textarea{min-height:150px;resize:vertical}
form .btn{margin-top:26px}
.hp{position:absolute;left:-9999px}

/* blog */
.post-card{border-top:3px solid var(--ink);padding-top:24px;max-width:720px}
.post-card h2{font-size:clamp(24px,3vw,34px);margin:10px 0 12px}
article .reading{max-width:720px}
article .reading h2{font-size:clamp(23px,2.6vw,30px);margin:40px 0 14px}
article .reading p{margin-bottom:18px}

/* reveal initial states (gated: no-JS sees a complete page) */
.js-anim [data-reveal]{opacity:0;transform:translateY(26px)}
.js-anim [data-hero]{opacity:0;transform:translateY(22px)}

/* mask drift — slow, reduced-motion kills it */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .js-anim .mask-type{animation:maskdrift 26s ease-in-out infinite alternate}
}
@keyframes maskdrift{from{background-position:50% 60%}to{background-position:50% 34%}}
@media (prefers-reduced-motion:reduce){.mask-type{animation:none!important}}

/* ============ footer ============ */
footer{background:var(--ink);color:#C9CDD2;margin-top:clamp(56px,8vw,96px)}
footer .cols{max-width:var(--wrap);margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:560;font-size:19px;color:#fff;margin-bottom:12px}
.foot-brand img{height:34px;width:auto}
footer h2{font-family:var(--mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#8B9299;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:#E4E7EA;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.foot-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.foot-btns .btn{border-color:rgba(255,255,255,.35);color:#fff;background:transparent;padding:10px 20px;font-size:14.5px}
.foot-btns .btn:hover{border-color:#fff;transform:translateY(-2px)}
.foot-base{border-top:1px solid rgba(255,255,255,.14)}
.foot-base .in{max-width:var(--wrap);margin:0 auto;padding:20px 24px;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8B9299;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-base a{color:#C9CDD2}
@media (max-width:768px){footer .cols{grid-template-columns:1fr;gap:30px}}

/* sticky mobile action bar */
.mobile-bar{display:none}
@media (max-width:700px){
  .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--canvas);border-top:1px solid var(--hairline);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .mobile-bar a{flex:1;text-align:center;padding:12px 10px;font-size:15px}
  body{padding-bottom:68px}
}

/* cta band */
.cta-inner{text-align:center;max-width:640px;margin:0 auto}
.cta-inner h2{margin-bottom:14px}
.cta-inner p{margin-bottom:26px}

/* utility */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.center{text-align:center}