/* Pedicab Adventures — Site 3: Bluebonnet — cream / indigo / burnt orange */
/* ===========================================================
   Pedicab Adventures — Austin, TX
   Palette: void · vermilion · signal gold · bone · dusk blue
   =========================================================== */

:root{
  --void:#16213a;
  --void-2:#20304f;
  --ink:#1b1a17;
  --ink-soft:#4a463d;
  --muted:#7b7466;
  --bone:#f6f1e4;
  --sand:#ebe1ca;
  --paper:#fffdf6;
  --line:#dcd0b4;
  --line-dark:rgba(255,255,255,.16);
  --flare:#c85a1e;
  --flare-deep:#9c3f0f;
  --gold:#e8b73f;
  --dusk:#3a5a7d;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
img{max-width:100%;display:block}
a{color:var(--flare-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--flare)}
::selection{background:var(--flare);color:#fff}

.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.narrow{max-width:1180px;margin:0 auto}
.narrow>*{max-width:738px}

/* ---------------- type ---------------- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.032em;line-height:1.04}
h1{font-size:clamp(42px,7.2vw,84px)}
h2{font-size:clamp(31px,4.8vw,52px);line-height:1.06}
h3{font-size:clamp(20px,2.3vw,25px);line-height:1.2;letter-spacing:-.02em}
h4{font-size:18px}
p+p{margin-top:1.05em}

/* marker highlight for a word inside a heading */
.mark{
  background:linear-gradient(180deg,transparent 58%,var(--gold) 58%,var(--gold) 94%,transparent 94%);
  padding:0 .06em
}
section.dark .mark{background:linear-gradient(180deg,transparent 58%,rgba(232,183,63,.35) 58%,rgba(232,183,63,.35) 94%,transparent 94%)}

.eyebrow{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--flare);margin-bottom:20px
}
.eyebrow::after{
  content:"";display:block;height:4px;width:44px;margin-top:9px;
  background:linear-gradient(90deg,var(--flare),var(--gold))
}
.lede{font-size:clamp(18px,2.1vw,21.5px);line-height:1.55;color:var(--ink-soft)}
.prose p{margin-top:1.05em}
.prose ul{margin:1.1em 0 0 1.15em}
.prose li{margin-bottom:.55em}
/* handwritten-feeling owner aside */
.aside{
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;
  color:var(--ink-soft);border-left:3px solid var(--gold);padding-left:20px;margin-top:34px
}

/* ---------------- header ---------------- */
.site-head{
  position:sticky;top:0;z-index:60;color:#fff;
  background:linear-gradient(90deg,var(--void) 0%,#241d19 100%);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 3px 0 var(--flare)
}
.site-head .wrap{display:flex;align-items:center;gap:22px;height:80px}

/* wordmark — echoes the lettering painted on the carriages */
.logo{display:block;text-decoration:none;color:#fff;flex:none;line-height:1}
.logo .wm{
  font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:-.012em;
  display:block;white-space:nowrap
}
.logo .wm i{font-style:normal;color:var(--gold)}
.logo .tag{
  display:block;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.5)
}
.logo:hover .wm i{color:var(--flare)}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.site-nav a{
  color:rgba(255,255,255,.8);text-decoration:none;font-size:13.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;position:relative;padding:4px 0
}
.site-nav a:hover{color:#fff}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);
  transform:scaleX(0);transition:transform .18s
}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--gold)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav .btn::after{display:none}
.nav-toggle{display:none}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;background:var(--flare);color:#fff!important;text-decoration:none;
  padding:15px 28px;font-weight:800;font-size:14px;letter-spacing:.07em;text-transform:uppercase;
  border:2px solid var(--flare);transition:.16s;box-shadow:5px 5px 0 rgba(0,0,0,.22)
}
.btn:hover{background:var(--flare-deep);border-color:var(--flare-deep);transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,.28)}
.btn.sm{padding:11px 20px;font-size:12.5px;box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.btn.light{background:transparent;color:#fff!important;border-color:#fff;box-shadow:none}
.btn.light:hover{background:#fff;color:var(--void)!important;box-shadow:none}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--void)!important}
.btn.gold:hover{background:#fff;border-color:#fff;color:var(--void)!important}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--void);color:#fff;overflow:hidden}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;filter:saturate(1.2) contrast(1.06)
}
/* directional wash: dark & readable on the left, photo stays bright on the right */
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(22,33,58,.94) 0%,rgba(22,33,58,.82) 34%,rgba(22,33,58,.34) 62%,rgba(22,33,58,.06) 84%),
    radial-gradient(90% 70% at 8% 12%,rgba(200,90,30,.34),transparent 62%),
    linear-gradient(180deg,transparent 55%,rgba(22,33,58,.72) 100%)
}
.hero .wrap{position:relative;z-index:2;padding:132px 26px 112px}
.hero h1{color:#fff;max-width:14ch;text-transform:uppercase;text-shadow:0 3px 26px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{color:rgba(255,255,255,.9);max-width:54ch;margin-top:28px}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

/* brand ticker under the hero */
.ticker{
  position:relative;z-index:2;background:var(--gold);color:var(--void);
  border-top:3px solid var(--void);overflow:hidden;padding:13px 0
}
.ticker .track{display:flex;gap:0;width:max-content;animation:slide 32s linear infinite}
.ticker span{
  font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:0 26px;white-space:nowrap
}
.ticker span::after{content:"\2022";margin-left:26px;color:var(--flare)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none}}

.hero-sub{position:relative;z-index:2;background:var(--flare);color:#fff}
.hero-sub .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:26px;font-size:14.5px;line-height:1.45}
.hero-sub b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;color:var(--gold)}

/* interior page banner */
.banner{position:relative;background:var(--void);color:#fff;overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;filter:saturate(1.18) contrast(1.05)}
.banner::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(22,33,58,.93) 0%,rgba(22,33,58,.78) 38%,rgba(22,33,58,.3) 68%,rgba(22,33,58,.05) 88%),
    radial-gradient(90% 80% at 6% 20%,rgba(200,90,30,.3),transparent 60%)
}
.banner .wrap{position:relative;z-index:2;padding:104px 26px 92px}
.banner h1{color:#fff;max-width:16ch;font-size:clamp(36px,5.6vw,64px);text-transform:uppercase;text-shadow:0 3px 24px rgba(0,0,0,.35)}
.banner .lede{color:rgba(255,255,255,.88);max-width:56ch;margin-top:24px}
.banner .eyebrow{color:var(--gold)}
.banner .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------------- sections ---------------- */
section{padding:94px 0;position:relative}
section.tight{padding:64px 0}
section.alt{background:linear-gradient(165deg,var(--sand) 0%,var(--bone) 60%)}
section.dark{
  background:
    radial-gradient(70% 90% at 88% 8%,rgba(200,90,30,.24),transparent 62%),
    radial-gradient(60% 80% at 4% 96%,rgba(58,90,125,.4),transparent 60%),
    var(--void);
  color:#fff
}
section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark .lede,section.dark p{color:rgba(255,255,255,.82)}
section.dark a{color:var(--gold)}
section.dark .eyebrow{color:var(--gold)}
section.dark .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
/* thin accent rule where a light section meets the next */
section.alt::before,section.dark::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--flare),var(--gold) 55%,transparent)
}
.section-head{max-width:66ch}
.section-head .lede{margin-top:18px}

/* ---------------- cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--paper);border:2px solid var(--ink);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s;position:relative
}
.card::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;height:6px;background:var(--flare);z-index:2}
a.card:hover{transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--gold)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:2px solid var(--ink)}
.card-body{padding:28px 26px 26px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:15.5px;flex:1}
.card .more{margin-top:20px;font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--flare-deep)}
section.dark .card{background:var(--void-2);border-color:var(--line-dark)}
section.dark .card p{color:rgba(255,255,255,.68)}
section.dark a.card:hover{box-shadow:10px 10px 0 var(--flare)}

/* ---------------- split ---------------- */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:62px;align-items:center}
.split.flip>*:first-child{order:2}
.split img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink);
  box-shadow:16px 16px 0 var(--gold)
}
.split.tall img{aspect-ratio:4/5}
section.dark .split img{border-color:#fff;box-shadow:16px 16px 0 var(--flare)}

/* ---------------- checks ---------------- */
.checks{margin-top:32px;display:grid;gap:18px}
.checks div{padding-left:32px;position:relative;color:var(--ink-soft);font-size:16.5px}
.checks div::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;
  background:var(--flare);transform:rotate(45deg)
}
.checks b{color:var(--ink)}
section.dark .checks div{color:rgba(255,255,255,.8)}
section.dark .checks b{color:#fff}
section.dark .checks div::before{background:var(--gold)}

/* ---------------- guide list ---------------- */
.guide{margin-top:46px;border-top:4px solid var(--ink)}
.guide-item{padding:28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:250px 1fr;gap:36px}
.guide-item:hover{background:rgba(232,183,63,.11)}
.guide-item h3{font-size:21px}
.guide-item .where{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.guide-item p{color:var(--ink-soft);font-size:16.5px}
section.dark .guide{border-top-color:var(--gold)}
section.dark .guide-item{border-bottom-color:var(--line-dark)}
section.dark .guide-item:hover{background:rgba(255,255,255,.05)}
section.dark .guide-item p{color:rgba(255,255,255,.8)}

/* ---------------- receipts ---------------- */
.receipts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.receipts span{
  border:2px solid var(--ink);padding:10px 18px;font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:.15s
}
.receipts span:hover{background:var(--gold)}
section.dark .receipts span{border-color:var(--gold);color:var(--gold)}
section.dark .receipts span:hover{background:var(--gold);color:var(--void)}

/* ---------------- pull quote ---------------- */
.pull{
  border-left:7px solid var(--flare);padding:6px 0 6px 28px;margin:48px 0 0;
  font-family:var(--serif);font-size:clamp(21px,2.7vw,29px);line-height:1.34
}
.pull cite{display:block;font-family:var(--sans);font-size:13px;font-style:normal;color:var(--muted);margin-top:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}

/* ---------------- faq ---------------- */
.faq{margin-top:40px;border-top:4px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;position:relative;font-weight:700;font-size:18px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--flare-deep)}
.faq summary::after{content:"+";position:absolute;right:4px;top:17px;font-size:28px;color:var(--flare);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--flare-deep)}
.faq .answer{padding:0 0 26px;color:var(--ink-soft);max-width:72ch}
.faq .answer p+p{margin-top:.9em}

/* ---------------- posts ---------------- */
.posts{display:grid;margin-top:48px;border-top:4px solid var(--ink)}
.post-row{display:grid;grid-template-columns:180px 1fr auto;gap:36px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.post-row:hover{background:rgba(232,183,63,.11)}
.post-row:hover h3{color:var(--flare-deep)}
.post-row .date{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--flare);padding-top:5px}
.post-row p{color:var(--muted);font-size:16px;margin-top:9px}
.post-row .more{font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--flare-deep);padding-top:6px;white-space:nowrap}
.article{max-width:760px}
.article .meta{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--flare);margin-bottom:18px}
.article figure{margin:44px 0}
.article figure img{border:2px solid var(--ink);width:100%;box-shadow:14px 14px 0 var(--gold)}
.article figcaption{font-size:14px;color:var(--muted);margin-top:22px}
.article .back{margin-top:56px;display:inline-block;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ---------------- gallery ---------------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink)}
.gallery figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}
section.dark .gallery img{border-color:var(--gold)}
section.dark .gallery figcaption{color:rgba(255,255,255,.62)}

/* ---------------- steps ---------------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:48px;background:var(--ink)}
.step{background:var(--paper);padding:34px 30px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font-family:var(--serif);font-size:34px;font-weight:700;color:var(--flare);margin-bottom:10px;line-height:1}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px}

/* ---------------- cta band ---------------- */
.cta-band{
  background:linear-gradient(115deg,var(--flare) 0%,var(--flare-deep) 62%,#9c3f0f 100%);
  color:#fff;text-align:center
}
.cta-band h2{color:#fff;text-transform:uppercase;max-width:20ch;margin:0 auto}
.cta-band p{color:rgba(255,255,255,.94);max-width:58ch;margin:20px auto 0;font-size:18px}
.cta-band .row{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btn{background:var(--void);border-color:var(--void)}
.cta-band .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--void)!important}
.cta-band .btn.light{background:transparent;border-color:#fff}
.cta-band .btn.light:hover{background:#fff;color:var(--flare-deep)!important}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:52px}
.contact-block{border-top:4px solid var(--flare);padding-top:24px}
.contact-block h3{font-size:19px;text-transform:uppercase}
.contact-block .big{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.03em;margin-top:12px;display:block;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.contact-block .big:hover{color:var(--flare)}
.contact-block p{color:var(--muted);font-size:15.5px;margin-top:12px}

/* form */
.form{margin-top:44px;display:grid;gap:20px;max-width:640px}
.form label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.form input,.form textarea,.form select{width:100%;padding:14px 16px;border:2px solid var(--ink);background:var(--paper);font:inherit;font-size:16px;color:var(--ink);border-radius:0}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid var(--gold);outline-offset:0}
.form textarea{min-height:150px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .note{font-size:14px;color:var(--muted)}

/* ---------------- footer ---------------- */
.site-foot{
  background:radial-gradient(80% 100% at 80% 0%,rgba(200,90,30,.18),transparent 60%),var(--void);
  color:rgba(255,255,255,.64);padding:72px 0 34px;font-size:15px;border-top:6px solid var(--flare)
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.site-foot h3,.site-foot h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:800}
.site-foot a{color:rgba(255,255,255,.74);text-decoration:none;display:block;margin-bottom:10px}
.site-foot a:hover{color:var(--gold)}
.site-foot .fwm{font-family:var(--serif);font-weight:700;font-size:27px;color:#fff;margin-bottom:14px;line-height:1}
.site-foot .fwm i{font-style:normal;color:var(--gold)}
.foot-bottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}

/* ---------------- responsive ---------------- */
@media(max-width:1060px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .site-nav{gap:17px}
  .site-nav a{font-size:12.5px}
  .logo .wm{font-size:22px}
}
@media(max-width:960px){
  .cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:44px}
  .split.flip>*:first-child{order:0}
  .split img{box-shadow:12px 12px 0 var(--gold)}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .gallery{grid-template-columns:1fr 1fr}
  .hero-sub .wrap{grid-template-columns:1fr;gap:18px}
  .post-row{grid-template-columns:1fr;gap:8px}
  .post-row .date{padding-top:0}
  .post-row .more{padding-top:10px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .site-head .wrap{height:70px}
  .logo .wm{font-size:20px}
  .logo .tag{letter-spacing:.26em;font-size:8.5px}
  .site-nav{
    position:fixed;inset:70px 0 auto 0;background:var(--void);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 26px 28px;display:none;
    border-bottom:3px solid var(--flare);max-height:calc(100vh - 70px);overflow-y:auto
  }
  .site-nav a{padding:16px 0;border-bottom:1px solid var(--line-dark);font-size:15px}
  .site-nav a::after{display:none}
  .site-nav .btn{margin-top:18px;text-align:center;border-bottom:0}
  .nav-toggle{display:block;margin-left:auto;background:none;border:2px solid rgba(255,255,255,.45);padding:9px 15px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:#fff}
  .site-head.open .site-nav{display:flex}
  .hero .wrap{padding:84px 26px 74px}
  .hero::after{background:linear-gradient(180deg,rgba(22,33,58,.86) 0%,rgba(22,33,58,.7) 55%,rgba(22,33,58,.94) 100%),radial-gradient(90% 60% at 20% 10%,rgba(200,90,30,.34),transparent 65%)}
  .banner::after{background:linear-gradient(180deg,rgba(22,33,58,.86) 0%,rgba(22,33,58,.72) 55%,rgba(22,33,58,.94) 100%),radial-gradient(90% 60% at 20% 10%,rgba(200,90,30,.3),transparent 65%)}
  .banner .wrap{padding:66px 26px 60px}
  section{padding:64px 0}
  .cards,.cards.two{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .guide-item{grid-template-columns:1fr;gap:10px}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .form .row2{grid-template-columns:1fr}
  .pull{padding-left:20px;border-left-width:6px}
  .split img{box-shadow:10px 10px 0 var(--gold)}
}

/* ===========================================================
   Mobile refinements + hero band rebuild
   =========================================================== */
.hero-sub{background:rgba(0,0,0,.62);border-top:2px solid var(--flare);color:#fff}
.hero-sub .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0}
.hero-sub .wrap>div{padding:22px 26px;border-left:1px solid rgba(255,255,255,.13);
  font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.hero-sub .wrap>div:first-child{border-left:0}
.hero-sub b{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:7px;color:var(--gold);font-weight:800}
.ticker{padding:10px 0;border-top-width:2px}
.ticker span{font-size:11.5px;letter-spacing:.18em;padding:0 22px}
.ticker span::after{margin-left:22px}
.logo .tag{font-size:10px;letter-spacing:.24em}
.eyebrow{font-size:12px}
.site-foot a{padding:7px 0;margin-bottom:3px}
.article .back{padding:10px 0}
@media(max-width:960px){
  .hero-sub .wrap{grid-template-columns:1fr;gap:0}
  .hero-sub .wrap>div{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding:15px 26px}
  .hero-sub .wrap>div:first-child{border-top:0}
}
@media(max-width:760px){
  .hero-sub .wrap>div{font-size:15px;padding:14px 26px}
  .hero-sub b{font-size:10px;margin-bottom:5px}
  .ticker{padding:9px 0}
  .ticker span{font-size:10.5px;padding:0 16px}
  .ticker span::after{margin-left:16px}
  .logo .tag{font-size:9.5px;letter-spacing:.2em}
  .hero .wrap{padding:78px 26px 66px}
  .site-foot a{padding:9px 0}
}

/* .hero and .banner are <section> elements and were inheriting the global
   section padding, adding dead space above and below the photograph. */
.hero,.banner{padding:0}
.hero::before,.banner::before{display:none}

/* ===========================================================
   Enquiry forms
   NOTE: these currently open the visitor's mail app with the
   answers pre-filled. Once the site is on the real domain,
   swap the JS handler for a server endpoint so submissions
   post directly to PedicabAdventures@gmail.com.
   =========================================================== */
.inquiry{border-top:4px solid var(--flare)}
.inquiry-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:start;margin-top:14px}
.inquiry-grid .intro h2{margin-bottom:16px}
.inquiry-grid .intro .lede{margin-bottom:26px}
.inquiry-call{border-top:2px solid var(--ink);padding-top:18px;margin-top:26px}
.inquiry-call span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.inquiry-call a{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.025em;
  text-decoration:none;color:var(--ink)}
.inquiry-call a:hover{color:var(--flare)}
section.dark .inquiry-call{border-top-color:var(--gold)}
section.dark .inquiry-call a{color:#fff}

.form .field{display:block}
.form .field label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
section.dark .form .field label{color:#fff}
.form .req{color:var(--flare)}
.form input,.form select,.form textarea{
  width:100%;padding:14px 15px;border:2px solid var(--ink);background:var(--paper);
  font:inherit;font-size:16px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none
}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:3px solid var(--gold);outline-offset:0;border-color:var(--flare)}
.form textarea{min-height:132px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.form button[type=submit]{cursor:pointer;font-family:inherit}
.form .note{font-size:13.5px;color:var(--muted);line-height:1.5}
.form-status{
  display:none;border:2px solid var(--ink);background:var(--gold);color:var(--ink);
  padding:16px 18px;font-size:15.5px;line-height:1.5;font-weight:600
}
.form-status.on{display:block}

@media(max-width:960px){
  .inquiry-grid{grid-template-columns:1fr;gap:38px}
}
@media(max-width:760px){
  .form .row2{grid-template-columns:1fr}
  .form input,.form select,.form textarea{padding:13px 14px}
}

/* ===========================================================
   Post-review corrections (UX review, 2 Aug 2026)
   =========================================================== */

/* The gold marker sat across the middle of the lowercase letters and read as a
   strikethrough; on dark sections the translucent version read as a redaction bar. */
h1,h2{line-height:1.13}
.mark{
  background:linear-gradient(180deg,transparent 74%,var(--gold) 74%,var(--gold) 99%,transparent 99%);
  padding:0 .05em
}
section.dark .mark{
  background:linear-gradient(180deg,transparent 90%,var(--gold) 90%,var(--gold) 100%)
}

/* Heading-to-body spacing was inconsistent (0px, 16px, 18px, 28px) because only the
   .section-head wrapper set it. Two headings fused straight into their paragraph. */
h1+*,h2+*{margin-top:20px}
h3+*{margin-top:12px}
.section-head .lede{margin-top:20px}

/* Contrast: burnt orange failed AA in exactly the two roles that carry the brand —
   eyebrow text and the primary button. Orange now means "clickable"; type uses the
   deeper shade, which also reads more expensive. */
.eyebrow{color:var(--flare-deep)}
section.dark .eyebrow{color:var(--gold)}
.btn{background:var(--flare-deep);border-color:var(--flare-deep)}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.cta-band .btn{background:var(--ink);border-color:var(--ink)}
.cta-band .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)!important}
.card .more,.post-row .more,.article .meta{color:var(--flare-deep)}

/* The email address broke mid-word, leaving a single letter on its own line. */
.contact-block .big{overflow-wrap:break-word;word-break:normal;hyphens:none}
@media(max-width:760px){.contact-block .big{font-size:20px;letter-spacing:-.02em}}

/* Hero/banner scrims were angled for desktop: some pages went near-black on a phone,
   others left text sitting on a bright photo with no protection. Vertical below 960. */
@media(max-width:960px){
  .hero::after{
    background:linear-gradient(180deg,rgba(22,33,58,.86) 0%,rgba(22,33,58,.66) 48%,rgba(22,33,58,.93) 100%),
      radial-gradient(90% 55% at 22% 8%,rgba(200,90,30,.3),transparent 66%)
  }
  .banner::after{
    background:linear-gradient(180deg,rgba(22,33,58,.84) 0%,rgba(22,33,58,.62) 48%,rgba(22,33,58,.92) 100%)
  }
}

/* Event names looked tappable (gold hover) but are inert text. */
.receipts span{transition:none}
.receipts span:hover{background:transparent}
section.dark .receipts span:hover{background:transparent;color:var(--gold)}

/* ===========================================================
   Typefaces — self-hosted, no external dependency
   Fraunces (display) + IBM Plex Sans (text). 105 KB total.
   =========================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/Fraunces.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/PlexSans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --display:"Fraunces","Hoefler Text",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Fraunces","Hoefler Text",Georgia,serif;
}
body{font-family:var(--sans);letter-spacing:-.003em}

/* Headlines carry the personality now. Fraunces has an optical-size axis, so the
   bigger the type the more contrast it gets — the way real display cuts work. */
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.012em}
h1{font-weight:900;font-variation-settings:"opsz" 144;line-height:1.02;letter-spacing:-.018em}
h2{font-weight:800;font-variation-settings:"opsz" 96;line-height:1.08}
h3{font-weight:700;font-variation-settings:"opsz" 36;letter-spacing:-.008em}
h4{font-weight:700;font-variation-settings:"opsz" 24}

/* The wordmark is the one piece of real brand AB already owns — the lettering
   painted across the back of every carriage. Now it is an actual typeface. */
.logo .wm,.site-foot .fwm{
  font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 48;
  letter-spacing:-.015em
}
.pull{font-family:var(--display);font-weight:600;font-variation-settings:"opsz" 72;letter-spacing:-.01em}
.aside{font-family:var(--display);font-weight:500;font-style:normal;font-variation-settings:"opsz" 24}
.step::before{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 60}
.contact-block .big{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 60}
.inquiry-call a{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 60}

/* UI text stays in the sans: nav, labels, buttons, eyebrows, captions. */
.btn,.site-nav a,.eyebrow,.form label,.receipts span,.ticker span,
.card .more,.post-row .date,.post-row .more,.article .meta,.logo .tag,
.hero-sub b,.guide-item .where,.site-foot h3,.site-foot h4{font-family:var(--sans)}
.btn{font-weight:700;letter-spacing:.06em}

/* ===========================================================
   Client proof — photographs of the carriages, not text tags.
   An outlined all-caps box reads as a filter chip; a tight crop
   of the brand on the actual carriage reads as evidence.
   =========================================================== */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.proof figure{margin:0}
.proof img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:2px solid var(--ink)}
.proof figcaption{margin-top:12px;font-size:14px;line-height:1.4;color:var(--muted)}
.proof figcaption b{display:block;font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.proof-note{margin-top:22px;font-size:15px;color:var(--muted)}
section.dark .proof img{border-color:var(--gold)}
section.dark .proof figcaption{color:rgba(255,255,255,.72)}
section.dark .proof figcaption b{color:#fff}
section.dark .proof-note{color:rgba(255,255,255,.6)}
@media(max-width:960px){.proof{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:560px){.proof{grid-template-columns:1fr;gap:22px}}

/* ===========================================================
   Mobile menu + per-page hero framing
   =========================================================== */

/* Contact was reachable only from the footer, at the bottom of a very long page. */
.nav-extra{display:none}
@media(max-width:760px){
  .nav-extra{display:block}
  .nav-tel{color:var(--gold)!important;font-weight:800}
  /* a scrim so the open menu reads as a layer, not as part of the page */
  .site-head.open::after{
    content:"";position:fixed;inset:70px 0 0 0;background:rgba(11,11,14,.55);
    z-index:-1;pointer-events:none
  }
  .site-head.open .site-nav{z-index:2}
}

/* Hero crops were all centred, which buried the subject on several pages.
   Targeted by filename so no markup changes are needed. */
.hero-img,.banner img{object-position:center}
.banner img[src*="wedding-couple"]{object-position:center 22%}      /* the couple, not the pavement */
.hero-img[src*="fleet-sixth-street"]{object-position:62% center}    /* the cabs, not the empty asphalt */
.banner img[src*="fleet-sixth-street"]{object-position:60% center}
.banner img[src*="pedicab-sunset"]{object-position:center 38%}
.banner img[src*="fleet-miller-lite"]{object-position:center 42%}
.banner img[src*="costume-yeti"]{object-position:center 30%}
.banner img[src*="wrap-xero"]{object-position:44% center}

/* The weddings banner was scrimmed so hard the couple disappeared. */
.banner img[src*="wedding-couple"]{opacity:1}
.wed-banner::after{
  background:linear-gradient(105deg,rgba(22,33,58,.9) 0%,rgba(22,33,58,.66) 40%,
    rgba(22,33,58,.16) 72%,rgba(22,33,58,.04) 100%)!important
}
@media(max-width:960px){
  .wed-banner::after{
    background:linear-gradient(180deg,rgba(22,33,58,.74) 0%,rgba(22,33,58,.42) 42%,
      rgba(22,33,58,.9) 100%)!important
  }
}

/* ===========================================================
   Breaking the section rhythm
   Every section was eyebrow -> dash -> heading -> lede -> grid.
   Two new section types interrupt it.
   =========================================================== */

/* A statement: one line, enormous, surrounded by air. No photo, no grid. */
.statement{background:var(--bone);text-align:left;padding:150px 0}
.statement .wrap{max-width:1180px}
.statement p.big{
  font-family:var(--display);font-weight:900;font-variation-settings:"opsz" 144;
  font-size:clamp(40px,7.6vw,96px);line-height:.98;letter-spacing:-.03em;
  max-width:16ch;color:var(--ink)
}
.statement p.big em{font-style:normal;color:var(--flare-deep)}
.statement p.sub{
  margin-top:34px;max-width:46ch;font-size:clamp(17px,2vw,20px);
  line-height:1.55;color:var(--ink-soft)
}
.statement.dark{background:var(--void)}
.statement.dark p.big{color:#fff}
.statement.dark p.big em{color:var(--gold)}
.statement.dark p.sub{color:rgba(255,255,255,.78)}
@media(max-width:760px){.statement{padding:86px 0}.statement p.sub{margin-top:24px}}

/* A full-bleed photograph with the line sitting on it — edge to edge, no border,
   no offset shadow, so it reads as a different object to the framed photos. */
.bleed{position:relative;padding:0;overflow:hidden;min-height:520px;display:flex;align-items:flex-end}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(22,33,58,.92) 0%,rgba(22,33,58,.78) 34%,rgba(22,33,58,.3) 62%,rgba(22,33,58,.05) 88%),
    linear-gradient(180deg,rgba(22,33,58,.1) 0%,rgba(22,33,58,.1) 50%,rgba(22,33,58,.75) 100%)
}
.bleed .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:56px}
.bleed h2{color:#fff;max-width:18ch}
.bleed p{color:rgba(255,255,255,.9);max-width:52ch;margin-top:18px;font-size:18px}
@media(max-width:760px){.bleed{min-height:420px}.bleed .wrap{padding-top:60px;padding-bottom:40px}}

@media(max-width:760px){
  .bleed::after{
    background:linear-gradient(180deg,rgba(22,33,58,.35) 0%,rgba(22,33,58,.55) 45%,rgba(22,33,58,.94) 100%)
  }
}

/* the bleed band needs a photo with room in it — skyline, framed low */
.bleed img{object-position:center 38%}

/* ===========================================================
   Price tables — nobody else in Austin publishes these
   =========================================================== */
.pricing{margin-top:40px;border-top:4px solid var(--ink)}
.pricing .row{
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) minmax(90px,max-content);
  align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)
}
.pricing .row .amt{justify-self:end;text-align:right}
.pricing .row .what{flex:1;font-size:17px;font-weight:600;color:var(--ink)}
.pricing .row .note{flex:2;font-size:15px;color:var(--muted);line-height:1.45}
.pricing .row .amt{
  font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 48;
  font-size:26px;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.pricing .row.head{border-bottom-width:0;padding-bottom:6px}
.pricing .row.head span{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.price-foot{margin-top:22px;font-size:15.5px;color:var(--ink-soft);max-width:62ch}
@media(max-width:760px){
  .pricing .row{flex-wrap:wrap;gap:4px 16px}
  .pricing .row .what{flex:1 0 60%;font-size:16.5px}
  .pricing .row .amt{font-size:23px}
  .pricing .row .note{flex:1 0 100%;font-size:14.5px}
  .pricing .row.head{display:none}
}

/* ===========================================================
   Section heads and cards — the part that fell flat after the hero
   Problems fixed: the head used ~55% of the width and left the rest
   empty; sections opened with 150px of dead air; and three identical
   bordered boxes in a row is the most templated shape there is.
   =========================================================== */

/* Head runs across the full measure: statement left, context right. */
.section-head{
  max-width:none;display:grid;grid-template-columns:1.25fr 1fr;
  gap:20px 56px;align-items:end
}
.section-head .eyebrow{grid-column:1 / -1;margin-bottom:2px}
.section-head h2{max-width:17ch;margin:0}
.section-head .lede{margin-top:0;padding-bottom:7px;max-width:44ch}
@media(max-width:960px){
  .section-head{grid-template-columns:1fr;gap:16px}
  .section-head .lede{padding-bottom:0}
}

/* Less dead air at the top of a section, more between head and content. */
section{padding:78px 0}
section.alt,section.dark{padding:84px 0}
.cards{margin-top:44px}

/* Three equal boxes -> one lead card and two supporting.
   The lead is the money service, and it should look like it. */
.cards.feature{grid-template-columns:1.6fr 1fr 1fr;gap:20px}
.cards.feature>a:first-child .card-body,
.cards.feature>div:first-child .card-body{padding:30px 30px 32px}
.cards.feature>a:first-child img,
.cards.feature>div:first-child img{aspect-ratio:16/11}
.cards.feature>a:first-child h3,
.cards.feature>div:first-child h3{font-size:clamp(24px,2.7vw,31px)}
.cards.feature>a:first-child p,
.cards.feature>div:first-child p{font-size:16.5px}
@media(max-width:1040px){.cards.feature{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.cards.feature{grid-template-columns:1fr}}

/* Cards: let the photograph carry it. Border only where it earns its place. */
.card{border-width:1px;border-color:var(--line);background:var(--paper)}
.card::before{height:4px;background:var(--flare-deep)}
.card img{border-bottom:1px solid var(--line)}
a.card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
section.dark a.card:hover{box-shadow:8px 8px 0 var(--gold)}

/* Cards were stretching to match the tallest, leaving voids under the short ones.
   Let them size to their content — a ragged baseline reads deliberate, a void doesn't. */
.cards.feature{align-items:start}
.cards.feature .card p{flex:0 1 auto}
.cards.feature .card .more{margin-top:18px}
/* two lines, not three */
.section-head h2{max-width:21ch}
@media(max-width:1040px){.section-head h2{max-width:24ch}}

/* ===========================================================
   Social — icons, and tap targets that meet the 44px minimum
   =========================================================== */
.social{display:flex;gap:10px;margin-top:6px}
.social a{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 15px 9px 12px;margin:0;
  border:1px solid var(--line-dark);border-radius:100px;
  color:rgba(255,255,255,.86);font-size:14px;font-weight:600
}
.social a:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,255,255,.04)}
.social svg{width:19px;height:19px;fill:currentColor;flex:none}
.contact-block .social a{
  border-color:var(--line);color:var(--ink)
}
.contact-block .social a:hover{border-color:var(--flare-deep);color:var(--flare-deep);background:transparent}
/* footer links generally: 42px was just under the threshold */
.site-foot a{padding:10px 0}


/* ===========================================================
   WebP with JPEG fallback — the <picture> wrapper must not
   disturb layouts that positioned the <img> directly.
   =========================================================== */
.hero picture,.banner picture,.bleed picture{position:absolute;inset:0;display:block}
.hero picture img,.banner picture img,.bleed picture img{width:100%;height:100%;object-fit:cover}
.card picture,.split picture,.gallery picture,.proof picture,.article figure picture{display:block}
.card picture img,.split picture img,.gallery picture img,.proof picture img,
.article figure picture img{width:100%;height:auto;display:block}


/* ===========================================================
   Quick-answer box — for scanners and answer engines
   =========================================================== */
.answerbox{
  background:var(--bone);border-left:5px solid var(--flare-deep);
  padding:26px 28px;margin:36px 0
}
.answerbox h3{margin:0 0 14px;font-size:19px}
.answerbox ul{margin:0 0 0 1.05em}
.answerbox li{margin-bottom:9px;color:var(--ink-soft)}
.answerbox p{margin-top:10px;color:var(--ink-soft)}
.answerbox p:first-of-type{margin-top:0}
.article .pricing{margin-top:26px}
.article .price-foot{margin-top:18px;font-size:15.5px}


/* ===========================================================
   Audit fixes, 2 Aug
   =========================================================== */

/* Blog subheads had no space above them, so each one read as belonging
   to the paragraph before it. */
.article h2{margin-top:52px;margin-bottom:14px}
.article h3{margin-top:44px;margin-bottom:12px}
.article > h2:first-of-type,.article > h3:first-of-type{margin-top:40px}

/* The statement paragraph was set far narrower than its headline, leaving
   an empty right third that read as missing content. */
.statement p.sub{max-width:none;column-count:2;column-gap:56px}
@media(max-width:860px){.statement p.sub{column-count:1}}

/* The two secondary cards ended 30px apart — nearly-but-not-quite level
   reads as a bug. Match them to each other; let the lead card stay tall. */
.cards.feature>*:nth-child(2),.cards.feature>*:nth-child(3){align-self:stretch}
@media(max-width:1040px){.cards.feature>*{align-self:start}}

/* The ticker started mid-word, so at 390px the first thing under the hero
   was "AL GEOGRAPHIC" — which looks like a clipping bug. Fade both edges. */
.ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}

/* The Fraunces ampersand is a swash that doesn't read as "&" at heading size. */
h1 .amp,h2 .amp,h3 .amp,.card h3 .amp{font-family:var(--sans);font-weight:700}

/* ===========================================================
   Identity — the lettered plate
   Austin city code requires every pedicab to carry the operator's
   name and phone in 1.75in lettering. That plate is on the back of
   every carriage AB owns, so the brand is built from it rather than
   from a generic two-tone wordmark.
   =========================================================== */
.logo{display:block;text-decoration:none;line-height:1}
.plate{
  display:inline-block;padding:9px 16px 8px;
  border:2px solid var(--gold);
  box-shadow:inset 0 0 0 1px rgba(232,183,63,.32);
  background:rgba(0,0,0,.18);text-align:center
}
.plate .wm{
  display:block;font-family:var(--display);font-weight:800;
  font-variation-settings:"opsz" 48;font-size:22px;letter-spacing:-.018em;
  color:#fff;white-space:nowrap;line-height:1.05
}
.plate .tag{
  display:block;margin-top:6px;padding-top:6px;
  border-top:2px solid var(--flare);
  font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap
}
.logo:hover .plate{border-color:#fff;background:rgba(0,0,0,.3)}
.logo:hover .plate .tag{color:#fff}

/* footer: same plate, a size up, sitting on the dark ground */
.site-foot .fwm{margin-bottom:18px}
.site-foot .fwm .plate{padding:12px 20px 11px}
.site-foot .fwm .wm{font-size:27px}
.site-foot .fwm .tag{font-size:10.5px}

@media(max-width:1040px){.plate .wm{font-size:19px}.plate{padding:8px 13px 7px}}
@media(max-width:760px){
  .plate .wm{font-size:17px}
  .plate .tag{font-size:8.5px;letter-spacing:.15em}
  .plate{padding:7px 11px 6px}
}
@media(max-width:380px){.plate .tag{display:none}.plate{padding:9px 11px}}


/* ===========================================================
   Article review fixes, 4 Aug
   =========================================================== */

/* #3 the article column sat flush left, leaving 524px of empty cream
   while the nav, CTA and footer were all centred. */
.article{margin-left:auto;margin-right:auto}

/* #4 h2 was inheriting the landing-page scale — 52px against a 54px h1,
   eight times a page. No hierarchy, no sense of progress. */
.article h2{font-size:clamp(25px,2.6vw,34px);line-height:1.15}

/* #5 the answerbox title is a label, not a document heading. */
.answerbox .ab-title{
  margin:0 0 14px;font-family:var(--sans);font-weight:800;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--flare-deep)
}

/* #6 the price component reused as a spec table put display type on
   words like "Required" while the real numbers sat in muted grey. */
.pricing.spec .row .amt{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0}
@media(max-width:760px){
  .pricing.spec .row.head{display:block}
  .pricing.spec .row.head span{display:inline-block;margin-right:14px}
}

/* #7 keep the mobile stack now that the row is a grid */
@media(max-width:760px){
  .pricing .row{display:block}
  .pricing .row .amt{text-align:left}
}

/* #8 the index repeated one date sixteen times; the category is the useful signal */
.post-row .date{color:var(--flare-deep);font-size:11.5px}
.post-row .more{display:none}
.posts{border-top:4px solid var(--ink)}
.post-cat{
  margin:38px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)
}
.posts .post-cat:first-child{margin-top:0;border-top:0;padding-top:0}
@media(max-width:960px){.post-row{grid-template-columns:1fr}}


/* Instagram in context — the footer is 85% down a very long page,
   and this is the strongest proof the business has. Not on the
   advertising pages: an agency does not want to be sold on Instagram. */
.ig-inline{margin-top:30px}
.ig-inline a{
  display:inline-flex;align-items:center;gap:11px;min-height:44px;
  padding:10px 18px 10px 14px;border:2px solid var(--ink);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px
}
.ig-inline a:hover{background:var(--ink);color:var(--paper)}
.ig-inline svg{width:20px;height:20px;fill:currentColor;flex:none}
@media(max-width:520px){.ig-inline a{font-size:14.5px;padding:10px 14px}}


/* ===========================================================
   Legibility floor — nothing carrying real text below 12px
   Benchmarked 19 sub-12px elements against a field where the
   best competitor had zero. Letter-spaced caps at 8.5px are a
   designer's habit, not a reader's friend.
   =========================================================== */
.plate .tag{font-size:12px;letter-spacing:.16em}
.ticker span{font-size:12px;letter-spacing:.14em}
.hero-sub b{font-size:12px}
.site-foot h3,.site-foot h4{font-size:12px}
.form label{font-size:12px}
.form .req{font-size:12px}
.proof figcaption b{font-size:12px}
.post-cat{font-size:12px}
.post-row .date{font-size:12px}
.card .more,.article .meta{font-size:12.5px}
.eyebrow{font-size:12.5px}
.enquiry-call span,.inquiry-call span{font-size:12px}
.contact-block h3{font-size:19px}

@media(max-width:1040px){.plate .tag{font-size:12px}}
@media(max-width:760px){
  .plate .tag{font-size:12px;letter-spacing:.12em}
  .ticker span{font-size:12px;letter-spacing:.11em;padding:0 14px}
  .ticker span::after{margin-left:14px}
  .hero-sub b{font-size:12px}
}
@media(max-width:380px){.plate .tag{display:none}}


/* two selectors outranked the legibility floor above — match their specificity */
.form .field label{font-size:12px}
.site-foot .fwm .tag{font-size:12px}
.logo .tag{font-size:12px;letter-spacing:.16em}
@media(max-width:1040px){.logo .tag,.plate .tag{font-size:12px}}
@media(max-width:760px){
  .logo .tag,.plate .tag,.site-foot .fwm .tag{font-size:12px;letter-spacing:.11em}
  .form .field label{font-size:12px}
}


/* keyboard access */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink,#152238);color:#fff;
  padding:12px 20px;font-size:14px;font-weight:600;text-decoration:none;border-radius:0 0 6px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent,#c8532b);outline-offset:2px;border-radius:2px}