/* ==========================================================================
   Car Tint Perth — design system
   Dark luxury automotive. Near-black canvas, crimson as sole accent,
   condensed uppercase display type. Built to survive 2,500-word pages.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Surfaces. Lifted off pure black so long dark bands read as a material
     rather than a void — the hero photo still supplies the drama. */
  --ink:#111116;
  --surface:#1A1A21;
  --surface-hi:#24242C;
  --hairline:#33333E;
  --hairline-lit:#474754;

  /* Text */
  --bone:#F4F4F2;          /* 18.4:1 on ink */
  --muted:#9A9AA4;         /* 6.9:1 on ink  */
  --dim:#6E6E78;           /* decorative / disabled only */

  /* Accent. Crimson at full saturation is for FILLS and BADGES (white text
     on it clears 4.8:1). Crimson TEXT under 18px must use --crimson-lit,
     because --crimson on --ink is only ~4.4:1. */
  /* Protec brand blue: header and footer. White text on it is only ~3:1,
     so everything sitting on it uses --on-brand (6.9:1). */
  --brand-blue:#3296FF;
  --on-brand:#0A0A0C;
  --on-brand-line:rgba(10,10,12,.2);
  --crimson:#DC2626;
  --crimson-deep:#A81B1B;
  --crimson-lit:#FF4D5E;   /* 6.1:1 on ink — small crimson text */
  --signal:#E8B04B;        /* WA-legal markers only. Never decorative. */

  /* Light punctuation sections */
  --paper:#F4F4F2;
  --paper-sub:#E4E4E0;
  --paper-hair:#D2D2CC;
  --paper-ink:#0A0A0C;
  --paper-muted:#55555E;

  /* Type */
  --display:'Barlow Condensed','Barlow','Helvetica Neue',Arial,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;

  /* Spacing — 8px base */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem;

  --container:1240px;
  --measure:68ch;
  --radius:6px;
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  /* Exponential ease-out. The previous curve overshot to 1.3, so the
     staggered cards popped past their resting position and past scale 1
     before settling. Real objects decelerate; they do not bounce. */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* The header is sticky, so an anchor jump lands its target underneath it. That
   silently hides the skip link's destination, which is the one control that
   has to work. Offset every fragment target by the header's own height. */
:target,#main,[id]{scroll-margin-top:calc(var(--nav-h) + 1rem);}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0;}
ul[class],ol[class]{list-style:none;padding:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--crimson-lit);outline-offset:3px;border-radius:2px;}
:focus:not(:focus-visible){outline:none;}
::selection{background:var(--crimson);color:#fff;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--crimson);color:#fff;padding:.75rem 1.25rem;font-weight:600;
}
.skip:focus{left:.5rem;top:.5rem;}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- Typography ----------------------------------------------------------- */
.display,h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.94;
  text-wrap:balance;
}
h1,.h1{font-size:clamp(2.75rem,7.2vw,7rem);}
h2,.h2{font-size:clamp(2rem,4.4vw,3.75rem);}
h3,.h3{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.05;}
h4,.h4{font-family:var(--body);font-weight:600;font-size:1.05rem;line-height:1.35;text-transform:none;letter-spacing:0;}

.eyebrow{
  font-family:var(--body);font-weight:600;font-size:.75rem;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson-lit);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--crimson);flex:none;}
.eyebrow--center{justify-content:center;}

/* Two-tone headline — the ref-1 treatment */
.h-accent{display:block;color:var(--crimson);}
/* Measured across all 22 photo heroes: crimson clears 3:1 on one of them and
   crimson-lit on six, so a red headline forces an overlay heavy enough to kill
   the photograph. Bone clears it on all 22 with the overlay light enough for
   the image to actually read. Red stays on the eyebrow, its rule, and the
   primary button, where it sits on ink or in a fill and passes comfortably. */
.hero .h-accent{color:var(--bone);}
/* --muted is tuned against ink (6.9:1). Over a lit photo hero it lands at
   about 4.4:1, just under the 4.5 body-text floor, so the hero lede uses a
   lighter grey. Still clearly secondary to the bone headline above it. */
.hero .lede{color:#B7B7C0;}
.h-bone{display:block;color:var(--bone);}

.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:60ch;line-height:1.6;}
.prose{max-width:var(--measure);}
.prose p{margin-bottom:1.15em;}
.prose p:last-child{margin-bottom:0;}
.prose>h2{margin:2.2em 0 .7em;}
.prose>h3{margin:1.8em 0 .5em;}
.prose a{color:var(--crimson-lit);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--bone);}
.prose ul{margin:0 0 1.15em;padding-left:0;list-style:none;}
.prose ul li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;}
.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;background:var(--crimson);transform:rotate(45deg);}
.prose strong{color:var(--bone);font-weight:600;}

/* Ghost watermark behind hero — ref-1 */
.watermark{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(6rem,21vw,20rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(244,244,242,.055);
  white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
}

/* --- Layout --------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
.section{position:relative;padding-block:clamp(3.5rem,8vw,var(--s7));}
.section--tight{padding-block:clamp(2.5rem,5vw,var(--s5));}

/* Light sections. The page alternates light and dark roughly evenly — dark
   bands carry photography, light bands carry the long reading. Every component
   below needs a light-mode form, or it disappears against paper. */
.section--paper{background:var(--paper);color:var(--paper-ink);}
.section--paper .lede,.section--paper .prose p,.section--paper .prose li{color:var(--paper-muted);}
.section--paper .eyebrow{color:var(--crimson-deep);}
.section--paper .eyebrow::before{background:var(--crimson-deep);}
.section--paper .prose strong{color:var(--paper-ink);}
.section--paper .prose a{color:var(--crimson-deep);}
.section--paper .prose a:hover{color:var(--paper-ink);}

/* Cards, chips, stats, quotes and steps on paper */
.section--paper .card{background:#fff;border-color:var(--paper-hair);}
.section--paper .card--link:hover{background:#fff;border-color:var(--crimson);}
.section--paper .card__title{color:var(--paper-ink);}
.section--paper .card__text{color:var(--paper-muted);}
.section--paper .card__index{color:var(--paper-hair);}
.section--paper .card__link{color:var(--crimson-deep);}
.section--paper .chip{background:#fff;border-color:var(--paper-hair);color:var(--paper-muted);}
.section--paper .chip--key{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.35);color:var(--paper-ink);}
.section--paper .chip svg{color:var(--crimson-deep);}
.section--paper .stats{background:var(--paper-hair);border-color:var(--paper-hair);}
.section--paper .stat{background:#fff;}
.section--paper .stat__n{color:var(--paper-ink);}
.section--paper .stat__l{color:var(--paper-muted);}
.section--paper .quote{background:#fff;border-color:var(--paper-hair);border-left-color:var(--crimson);}
.section--paper .quote blockquote,.section--paper .quote cite{color:var(--paper-ink);}
.section--paper .quote .quote__where{color:var(--paper-muted);}
.section--paper .step::after{background:var(--paper-hair);}
.section--paper .step__t{color:var(--paper-ink);}
.section--paper .step__d{color:var(--paper-muted);}
.section--paper .step::before{color:var(--crimson-deep);}

/* FAQ on paper */
.section--paper .faq,.section--paper .faq__item{border-color:var(--paper-hair);}
.section--paper .faq__q{color:var(--paper-ink);}
.section--paper .faq__q:hover{color:var(--crimson-deep);}
.section--paper .faq__inner>div{color:var(--paper-muted);}
.section--paper .faq__inner a{color:var(--crimson-deep);}
.section--paper .faq__inner strong{color:var(--paper-ink);}

/* Suburb grid + frames on paper */
.section--paper .suburbs{background:var(--paper-hair);border-color:var(--paper-hair);}
.section--paper .suburb{background:#fff;color:var(--paper-muted);}
.section--paper .suburb:hover{background:var(--paper-sub);color:var(--paper-ink);}
.section--paper .suburb--soon:hover{background:#fff;color:var(--dim);}
.section--paper .frame{border-color:var(--paper-hair);}
.section--paper .frame--reflect::after{display:none;}
.section--paper .btn--ghost{color:var(--paper-ink);border-color:var(--paper-hair);}
.section--paper .btn--ghost:hover{border-color:var(--paper-ink);background:rgba(17,17,22,.05);}

/* --- Photo-backdrop sections ---------------------------------------------- */
/* A dark band carrying an image behind it. Keeps the long dark stretches from
   reading as flat panels, and gives the page somewhere to breathe visually. */
.section--photo{position:relative;isolation:isolate;overflow:hidden;}
.section__bg{position:absolute;inset:0;z-index:-2;}
.section__bg picture{display:block;width:100%;height:100%;}
.section__bg img{width:100%;height:100%;object-fit:cover;object-position:center 50%;}
.section--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to right,rgba(17,17,22,.96) 0%,rgba(17,17,22,.88) 42%,rgba(17,17,22,.62) 100%),
             linear-gradient(to bottom,var(--ink),transparent 22%,transparent 78%,var(--ink));
}
.section--photo--center::before{
  background:linear-gradient(to bottom,rgba(17,17,22,.93),rgba(17,17,22,.86)),
             radial-gradient(120% 90% at 50% 50%,transparent 20%,rgba(17,17,22,.75) 100%);
}

/* Diagonal wedge cuts — clip-path, no images */
.wedge-t{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%);margin-top:-3.2vw;padding-top:calc(clamp(3.5rem,8vw,var(--s7)) + 3.2vw);}
.wedge-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2vw),0 100%);margin-bottom:-3.2vw;padding-bottom:calc(clamp(3.5rem,8vw,var(--s7)) + 3.2vw);}
.wedge-tb{clip-path:polygon(0 3.2vw,100% 0,100% calc(100% - 3.2vw),0 100%);margin-block:-3.2vw;padding-block:calc(clamp(3.5rem,8vw,var(--s7)) + 3.2vw);}

.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr;}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;}
  .split--wide-l{grid-template-columns:1.25fr 1fr;}
  .split--wide-r{grid-template-columns:1fr 1.25fr;}
  .split--flip>*:first-child{order:2;}
}
.stack>*+*{margin-top:var(--s2);}
.section-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head--center{margin-inline:auto;text-align:center;}

/* --- Header / nav --------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--brand-blue);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.header.is-stuck{background:var(--brand-blue);border-bottom-color:var(--on-brand-line);box-shadow:0 6px 24px -10px rgba(0,0,0,.45);}
.header__inner{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);height:var(--nav-h);}

/* The brand is the supplied logo, a transparent PNG that already carries its
   own wordmark. Fixed height with auto width so the box is reserved before the
   bytes land; the 125x44 attributes on the <img> match the 1x file exactly. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none;line-height:0;}
.brand img{display:block;height:44px;width:auto;}
@media(max-width:560px){.brand img{height:36px;}}
.footer .brand img{height:40px;}

.nav{display:none;margin-left:auto;}
@media(min-width:1200px){.nav{display:flex;align-items:center;gap:.25rem;}}
.nav__link{
  display:flex;align-items:center;gap:.35rem;
  padding:.6rem .85rem;border-radius:4px;text-decoration:none;
  font-weight:500;font-size:.95rem;color:var(--on-brand);white-space:nowrap;
  transition:color .18s var(--ease),background .18s var(--ease);
  background:none;border:0;cursor:pointer;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--on-brand);background:rgba(10,10,12,.12);}
.nav__link[aria-current="page"]{color:var(--on-brand);font-weight:600;}
.nav__link[aria-current="page"]::after{content:"";width:5px;height:5px;background:var(--crimson);border-radius:50%;}
.nav__caret{width:9px;height:9px;transition:transform .2s var(--ease);flex:none;}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg);}

.nav__group{position:relative;}
.panel{
  position:absolute;top:calc(100% + .5rem);left:0;z-index:110;
  min-width:min(560px,84vw);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.85);
  padding:1.4rem;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .19s var(--ease),transform .19s var(--ease),visibility .19s;
}
.panel[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);}
.panel--right{left:auto;right:0;}
.panel--wide{min-width:min(760px,92vw);}
.panel__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.panel__title{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem;}
.panel__list{display:flex;flex-direction:column;gap:.1rem;}
.panel__item{display:block;padding:.45rem .6rem;margin-inline:-.6rem;border-radius:4px;text-decoration:none;color:var(--muted);font-size:.94rem;transition:color .16s,background .16s;}
.panel__item:hover{color:var(--bone);background:var(--surface-hi);}
.panel__item[aria-current="page"]{color:var(--bone);}
.panel__soon{color:var(--dim);font-size:.78rem;margin-left:.35rem;}

.header__cta{display:none;margin-left:auto;align-items:center;gap:.9rem;flex:none;}
@media(min-width:1200px){.header__cta{display:flex;margin-left:1rem;}}
.header__tel{display:flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--on-brand);white-space:nowrap;}
.header__tel:hover{color:var(--on-brand);text-decoration:underline;text-underline-offset:3px;}
.header__tel svg{width:15px;height:15px;flex:none;}

/* Burger */
.burger{display:flex;margin-left:auto;align-items:center;justify-content:center;width:46px;height:46px;background:var(--surface);border:1px solid var(--hairline);border-radius:5px;cursor:pointer;flex:none;}
@media(min-width:1200px){.burger{display:none;}}
.burger span{display:block;width:19px;height:1.5px;background:var(--bone);position:relative;transition:background .16s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--bone);transition:transform .22s var(--ease),top .22s var(--ease);}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  padding:calc(var(--nav-h) + 1.5rem) 0 8rem;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.drawer[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);}
@media(min-width:1200px){.drawer{display:none;}}
.drawer__acc{border-bottom:1px solid var(--hairline);}
.drawer__trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 0;background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.5rem;letter-spacing:-.01em;color:var(--bone);text-align:left;text-decoration:none;}
.drawer__trigger .nav__caret{width:13px;height:13px;color:var(--crimson);}
.drawer__panel{display:none;padding-bottom:1rem;}
.drawer__panel[data-open="true"]{display:block;}
.drawer__sub{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 .5rem;}
.drawer__link{display:block;padding:.62rem 0;color:var(--muted);text-decoration:none;font-size:1.02rem;}
.drawer__link:hover,.drawer__link[aria-current="page"]{color:var(--bone);}

/* Sticky mobile action bar — map pack pushes organic below the fold, so this
   bar is doing real conversion work on suburb queries. */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  padding:.7rem clamp(.85rem,3vw,1.25rem) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(10,10,12,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline);
}
@media(min-width:1200px){.actionbar{display:none;}}
body{padding-bottom:0;}
@media(max-width:1199px){body{padding-bottom:5.2rem;}}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:.8rem 1.6rem;
  font-family:var(--body);font-weight:600;font-size:.97rem;
  letter-spacing:.01em;text-decoration:none;text-align:center;
  border:1px solid transparent;border-radius:4px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn svg{width:16px;height:16px;flex:none;}
.btn--primary{background:var(--crimson);color:#fff;}
.btn--primary:hover{background:#ef3535;}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--hairline-lit);}
.btn--ghost:hover{border-color:var(--bone);background:rgba(244,244,242,.05);}
.btn--paper{background:var(--paper-ink);color:var(--paper);}
.btn--paper:hover{background:#26262c;}
.btn--paper-ghost{background:transparent;color:var(--paper-ink);border-color:var(--paper-hair);}
.btn--paper-ghost:hover{border-color:var(--paper-ink);background:rgba(10,10,12,.05);}
.btn--block{width:100%;}
.btn--sm{min-height:42px;padding:.55rem 1.05rem;font-size:.9rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;}

/* --- Chips ---------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .85rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--hairline);
  font-size:.855rem;font-weight:500;color:var(--muted);white-space:nowrap;
}
.chip svg{width:13px;height:13px;color:var(--crimson-lit);flex:none;}
/* The sharpest competitive line on the site — R1 Auto requires a double garage. */
.chip--key{border-color:rgba(220,38,38,.42);background:rgba(220,38,38,.09);color:var(--bone);}
.chip--paper{background:#fff;border-color:var(--paper-hair);color:var(--paper-muted);}

/* --- Cards ---------------------------------------------------------------- */
.card{
  position:relative;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(1.35rem,2.4vw,1.9rem);
  transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s var(--ease);
}
.card--link:hover{border-color:var(--hairline-lit);transform:translateY(-3px);background:var(--surface-hi);}
.card__index{font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1;color:var(--hairline-lit);margin-bottom:.6rem;}
.card__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.4rem;line-height:1.02;letter-spacing:-.01em;margin-bottom:.55rem;}
.card__text{color:var(--muted);font-size:.98rem;}
.card__link{color:var(--crimson-lit);font-weight:600;font-size:.93rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;}
.card--link:hover .card__link{color:var(--bone);}
.card__link svg{width:14px;height:14px;transition:transform .2s var(--ease);}
.card--link:hover .card__link svg{transform:translateX(3px);}
.card-a{text-decoration:none;color:inherit;display:block;}

/* Photographic service card — ref 3 */
.pcard{position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;display:flex;align-items:flex-end;text-decoration:none;color:inherit;border:1px solid var(--hairline);isolation:isolate;}
.pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .55s var(--ease);}
.pcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,12,.95) 8%,rgba(10,10,12,.55) 45%,rgba(10,10,12,.15) 100%);}
.pcard:hover .pcard__img{transform:scale(1.045);}
.pcard__body{padding:1.5rem;width:100%;}
.pcard__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.5rem;line-height:1;letter-spacing:-.01em;margin-bottom:.35rem;}
.pcard__text{color:var(--muted);font-size:.93rem;}

/* Media frame with reflection — the ref-2 move */
.frame{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hairline);}
.frame picture{display:block;}
.frame img{width:100%;}
/* A portrait editorial image beside a text column is right on desktop, but on a
   phone it becomes a full screen of scroll. Crop to landscape below the split. */
@media(max-width:899px){
  .frame img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:center 45%;}
}
.frame--reflect::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(10,10,12,.85),transparent);pointer-events:none;}

/* --- Testimonial ---------------------------------------------------------- */
.quote{display:flex;flex-direction:column;gap:1.1rem;background:var(--surface);border:1px solid var(--hairline);border-left-color:var(--crimson);border-radius:0 var(--radius) var(--radius) 0;padding:clamp(1.35rem,2.4vw,1.75rem);height:100%;}
.quote blockquote{margin:0;font-size:1.05rem;line-height:1.55;color:var(--bone);}
.quote figcaption{display:flex;flex-direction:column;gap:.15rem;margin-top:auto;}
.quote cite{font-style:normal;font-weight:600;font-size:.95rem;color:var(--bone);}
.quote .quote__where{font-size:.85rem;color:var(--muted);}

/* --- Stat row ------------------------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.stat{background:var(--surface);padding:1.35rem 1.25rem;}
.stat__n{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--bone);letter-spacing:-.02em;}
.stat__n em{font-style:normal;color:var(--crimson);}
.stat__l{font-size:.83rem;color:var(--muted);margin-top:.4rem;line-height:1.4;}

/* --- Pricing -------------------------------------------------------------- */
.tiers{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));align-items:start;}
.tier{position:relative;background:#fff;border:1px solid var(--paper-hair);border-radius:var(--radius);padding:1.75rem 1.5rem;display:flex;flex-direction:column;}
.tier--featured{border-color:var(--crimson);box-shadow:0 18px 44px -14px rgba(220,38,38,.3);}
@media(min-width:900px){.tier--featured{transform:translateY(-14px);}}
.tier__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--crimson);color:#fff;font-weight:600;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;padding:.4rem .95rem;border-radius:999px;white-space:nowrap;}
.tier__name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.55rem;line-height:1;letter-spacing:-.01em;color:var(--paper-ink);}
.tier__sub{font-size:.88rem;color:var(--paper-muted);margin-top:.35rem;min-height:2.6em;}
.tier__price{font-family:var(--display);font-weight:700;font-size:3.3rem;line-height:1;color:var(--paper-ink);letter-spacing:-.03em;margin:1.1rem 0 .2rem;font-variant-numeric:tabular-nums;}
.tier__price sup{font-size:1.1rem;font-weight:600;vertical-align:super;margin-right:.1rem;}
.tier__from{font-size:.8rem;color:var(--paper-muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600;}
.tier__list{margin:1.4rem 0;padding:1.4rem 0 0;border-top:1px solid var(--paper-hair);display:flex;flex-direction:column;gap:.7rem;flex:1;}
.tier__li{display:flex;gap:.65rem;align-items:flex-start;font-size:.93rem;color:var(--paper-muted);}
.tier__li svg{width:15px;height:15px;color:var(--crimson);flex:none;margin-top:.28em;}
.tier__li b{color:var(--paper-ink);font-weight:600;}

/* Price matrix */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--paper-hair);border-radius:var(--radius);background:#fff;}
.section--paper .table-wrap{border-color:var(--paper-hair);}
table{width:100%;border-collapse:collapse;min-width:620px;font-variant-numeric:tabular-nums;}
caption{text-align:left;padding:1rem 1.15rem;font-weight:600;font-size:.94rem;color:var(--paper-muted);border-bottom:1px solid var(--paper-hair);}
th,td{padding:.85rem 1.15rem;text-align:left;font-size:.94rem;border-bottom:1px solid var(--paper-hair);}
thead th{background:var(--paper-sub);font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted);white-space:nowrap;}
tbody th{font-weight:600;color:var(--paper-ink);white-space:nowrap;}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td,tbody tr:hover th{background:rgba(220,38,38,.04);}
td{color:var(--paper-muted);}
td b{color:var(--paper-ink);font-weight:600;}
.table-wrap strong,.table-wrap em{color:var(--paper-ink);}
.table-wrap a{color:var(--crimson-deep);}
.table-wrap a:hover{color:var(--paper-ink);}

/* .table-wrap--dark used to be a near-black spec table; every table now uses
   the one light style above, which reads far better against the dark bands. */
.table-wrap--dark{background:#fff;border-color:var(--paper-hair);}

/* --- FAQ ------------------------------------------------------------------ */
/* --- AI On-Page modified-content blocks ------------------------------------
   Renders the aio-page-optimizer skill's house-format export (.introduction,
   .content-section, .paa-inline-section, .snippet-answer, .faq-section,
   .conclusion, .table-scroll) using its own class names, unrenamed, so the
   deliverable can be dropped onto a page as-is and just inherit the site's
   dark theme. Do not rename these classes to the site's own component names —
   that defeats the point of keeping the export verbatim. */
.aio-page{max-width:74ch;margin-inline:auto;}
.aio-page p{color:var(--muted);line-height:1.65;margin-bottom:1.15em;}
.aio-page p:last-child{margin-bottom:0;}
.aio-page h2{margin-bottom:1rem;}
.aio-page h3{margin:1.8rem 0 .6rem;}
.aio-page ul,.aio-page ol{margin:0 0 1.15em;padding-left:0;list-style:none;color:var(--muted);}
.aio-page ol{counter-reset:aio-step;}
.aio-page ul li,.aio-page ol li{position:relative;padding-left:1.6rem;margin-bottom:.5rem;}
.aio-page ul li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;background:var(--crimson);transform:rotate(45deg);}
.aio-page ol li{counter-increment:aio-step;}
.aio-page ol li::before{content:counter(aio-step)".";position:absolute;left:0;color:var(--crimson-lit);font-weight:600;font-size:.9em;}
.aio-page a{color:var(--crimson-lit);text-decoration:underline;text-underline-offset:3px;}
.aio-page a:hover{color:var(--bone);}
.aio-page strong{color:var(--bone);font-weight:600;}
.aio-page .snippet-answer{color:var(--bone);font-size:1.04rem;font-weight:500;margin-bottom:1em;}

.aio-page .faq-section{border-top:1px solid var(--hairline);padding-top:2rem;}
.aio-page .faq-heading{text-align:center;margin-bottom:1.75rem;}
.aio-page .faq-section .paa-inline-section{border-bottom:1px solid var(--hairline);padding-block:1.75rem;margin-bottom:0;}
.aio-page .faq-section .paa-inline-section:last-child{border-bottom:0;padding-bottom:0;}

.aio-page .conclusion{text-align:center;border-top:1px solid var(--hairline);padding-top:2.5rem;margin-bottom:0;}
.aio-page .conclusion ul{display:inline-block;text-align:left;margin-inline:auto;}
.aio-page .conclusion p{max-width:64ch;margin-inline:auto;}
.aio-page .eeat-conclusion-trust{color:var(--bone);font-size:1rem;margin-top:1.5rem;}

/* raw <table> inside a .table-scroll wrapper, as produced by the AIO export — no inline styles */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;}
/* Light in every section, like the price table: dark text on white. On the
   dark bands this was near-black on near-black, and row-heading cells and
   bold text inherited --paper-ink, which made them invisible. */
.table-scroll table{width:100%;min-width:480px;border-collapse:collapse;background:#fff;border:1px solid var(--paper-hair);border-radius:var(--radius);overflow:hidden;}
.table-scroll th,.table-scroll td{padding:.85rem 1.1rem;text-align:left;font-size:.92rem;border-bottom:1px solid var(--paper-hair);}
.table-scroll thead th{background:var(--paper-sub);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-muted);white-space:nowrap;}
.table-scroll tbody th{color:var(--paper-ink);font-weight:600;}
.table-scroll tbody tr:last-child td,.table-scroll tbody tr:last-child th{border-bottom:0;}
.table-scroll td{color:var(--paper-muted);}
.table-scroll td p,.table-scroll th p,.table-wrap td p,.table-wrap th p{color:inherit;margin:0;}
.table-scroll strong,.table-scroll b,.table-scroll em{color:var(--paper-ink);}
.table-scroll a{color:var(--crimson-deep);}
.table-scroll a:hover{color:var(--paper-ink);}
.table-scroll tbody tr:hover td,.table-scroll tbody tr:hover th{background:rgba(220,38,38,.04);}

/* Light-band (.section--paper) overrides for the AI On-Page blocks above —
   same alternating light/dark rhythm as the homepage, so this content needs
   both a dark and a light rendering. */
.section--paper .aio-page p{color:var(--paper-muted);}
.section--paper .aio-page .snippet-answer{color:var(--paper-ink);}
.section--paper .aio-page a{color:var(--crimson-deep);}
.section--paper .aio-page a:hover{color:var(--paper-ink);}
.section--paper .aio-page strong{color:var(--paper-ink);}
.section--paper .aio-page ul li::before{background:var(--crimson-deep);}
.section--paper .aio-page ol li::before{color:var(--crimson-deep);}
.section--paper .aio-page ul,.section--paper .aio-page ol{color:var(--paper-muted);}
.section--paper .aio-page .faq-section{border-color:var(--paper-hair);}
.section--paper .aio-page .faq-section .paa-inline-section{border-color:var(--paper-hair);}
.section--paper .aio-page .conclusion{border-color:var(--paper-hair);}
.section--paper .aio-page .eeat-conclusion-trust{color:var(--paper-ink);}
.section--paper .table-scroll table{background:#fff;border-color:var(--paper-hair);}
.section--paper .table-scroll th,.section--paper .table-scroll td{border-color:var(--paper-hair);}
.section--paper .table-scroll thead th{background:var(--paper-sub);color:var(--paper-muted);}
.section--paper .table-scroll td{color:var(--paper-muted);}


.faq{border-top:1px solid var(--hairline);}
.faq__item{border-bottom:1px solid var(--hairline);}
.faq__q{display:flex;width:100%;gap:1.25rem;align-items:flex-start;justify-content:space-between;padding:1.3rem 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.12;letter-spacing:-.005em;color:var(--bone);}
.faq__q:hover{color:var(--crimson-lit);}
.faq__icon{position:relative;flex:none;width:20px;height:20px;margin-top:.15em;}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--crimson);transition:transform .24s var(--ease),opacity .24s var(--ease);}
.faq__icon::before{left:0;top:9.5px;width:20px;height:1.5px;}
.faq__icon::after{left:9.5px;top:0;width:1.5px;height:20px;}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(90deg);opacity:0;}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease);}
.faq__a[data-open="true"]{grid-template-rows:1fr;}
.faq__inner{overflow:hidden;}
.faq__inner>div{padding-bottom:1.4rem;color:var(--muted);max-width:var(--measure);}
.faq__inner p+p{margin-top:.9em;}
.faq__inner strong{color:var(--bone);font-weight:600;}
/* Answers carry lists too — match the diamond bullets used in .prose. */
.faq__inner ul{margin:.75rem 0 0;padding-left:0;list-style:none;}
.faq__inner li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;}
.faq__inner li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;background:var(--crimson);transform:rotate(45deg);}
.faq__inner ul+p{margin-top:1em;}

/* --- Steps ---------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
.step{position:relative;padding-top:2.9rem;}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:0;left:0;
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;
  color:var(--crimson);
}
.step::after{content:"";position:absolute;top:1.65rem;left:0;right:1.25rem;height:1px;background:var(--hairline);}
.step__t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.3rem;line-height:1.05;margin-bottom:.5rem;}
.step__d{color:var(--muted);font-size:.97rem;}

/* --- Suburb grid ---------------------------------------------------------- */
.suburbs{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
.suburb{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface);padding:1rem 1.15rem;text-decoration:none;color:var(--muted);font-weight:500;transition:background .18s,color .18s;min-height:56px;}
.suburb:hover{background:var(--surface-hi);color:var(--bone);}
.suburb svg{width:13px;height:13px;color:var(--crimson);opacity:.45;transition:opacity .18s,transform .18s;flex:none;}
.suburb:hover svg{opacity:1;transform:translateX(3px);}
/* Unlinked suburbs are still serviced — only their page isn't written yet.
   Label them so the grid never reads as a set of dead links. */
.suburb--soon{color:var(--dim);cursor:default;}
.suburb--soon:hover{background:var(--surface);color:var(--dim);}
.suburb--soon::after{content:"soon";font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--hairline-lit);flex:none;}

/* --- Forms ---------------------------------------------------------------- */
.form{display:grid;gap:1.15rem;}
.field{display:flex;flex-direction:column;gap:.42rem;}
.field label{font-weight:600;font-size:.9rem;color:var(--bone);}
.field label .req{color:var(--crimson-lit);margin-left:.15rem;}
.field__hint{font-size:.82rem;color:var(--muted);}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;min-height:50px;
  background:var(--surface);color:var(--bone);
  border:1px solid var(--hairline);border-radius:4px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.field textarea{min-height:110px;resize:vertical;}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239A9AA4' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem;}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--hairline-lit);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--crimson);background:var(--surface-hi);outline:none;}
.field__err{font-size:.85rem;color:var(--crimson-lit);display:none;}
.field.is-invalid input,.field.is-invalid select{border-color:var(--crimson);}
.field.is-invalid .field__err{display:block;}
.form__row{display:grid;gap:1.15rem;grid-template-columns:1fr;}
@media(min-width:620px){.form__row{grid-template-columns:1fr 1fr;}}
.form__note{font-size:.85rem;color:var(--muted);}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--brand-blue);color:var(--on-brand);border-top:1px solid var(--on-brand-line);padding-block:clamp(3rem,6vw,4.5rem) 0;}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));}
.footer__h{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-brand);margin-bottom:1rem;}
.footer__list{display:flex;flex-direction:column;gap:.55rem;}
.footer__list a{color:var(--on-brand);text-decoration:none;font-size:.94rem;}
.footer__list a:hover{color:var(--on-brand);text-decoration:underline;text-underline-offset:3px;}
.footer__bar{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--on-brand-line);padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--on-brand);}
.footer__credit a{color:var(--on-brand);text-decoration:underline;text-underline-offset:3px;}
/* Service Area Business: name + phone + service areas only. No address, ever. */
.footer__sab{font-size:.86rem;color:var(--on-brand);max-width:38ch;margin-top:.9rem;line-height:1.55;}

/* --- Motion --------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease);}
[data-reveal-stagger]>*{opacity:0;transform:translateY(16px) scale(.985);}
[data-reveal-stagger].is-in>*{opacity:1;transform:none;transition:opacity .45s var(--ease-out-expo),transform .45s var(--ease-out-expo);}
[data-reveal-stagger].is-in>*:nth-child(1){transition-delay:0ms;}
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:70ms;}
[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:140ms;}
[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:210ms;}
[data-reveal-stagger].is-in>*:nth-child(5){transition-delay:280ms;}
[data-reveal-stagger].is-in>*:nth-child(6){transition-delay:350ms;}

/* The reveal starts at opacity:0 and is switched on by the IntersectionObserver
   in site.js. With scripting unavailable that observer never runs, so most of
   the page would render permanently invisible. Show everything up front. */
@media(scripting:none){
  [data-reveal],[data-reveal-stagger]>*{opacity:1;transform:none;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important;}
  .pcard:hover .pcard__img{transform:none;}
}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;}
.hero__media{position:absolute;inset:0;z-index:-2;}
/* <picture> is an inline wrapper with no intrinsic size — without this the
   img's height:100% resolves against auto and object-fit never fills. */
.hero__media picture{display:block;width:100%;height:100%;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%;}
/* Vignette + floor gradient. Lets the display type stay readable over any photo. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,var(--ink) 2%,rgba(10,10,12,.66) 30%,rgba(10,10,12,.38) 60%,rgba(10,10,12,.58) 100%),
    radial-gradient(120% 78% at 50% 82%,transparent 40%,rgba(10,10,12,.75) 100%);
}
.hero__inner{
  position:relative;z-index:1;padding-block:clamp(4rem,13vh,8.5rem) clamp(3rem,8vh,6rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero--tall .hero__inner{min-height:calc(100svh - var(--nav-h));justify-content:center;}
.hero__title{margin-bottom:1.4rem;}
.hero__lede{max-width:54ch;margin-bottom:1.9rem;margin-inline:auto;}
.hero__cta{margin-bottom:1.9rem;justify-content:center;}
.hero__chips{max-width:66ch;justify-content:center;}
.hero__inner .crumbs{justify-content:center;}
.hero__inner .eyebrow{justify-content:center;}
.hero__scrim{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to top,var(--ink),transparent);pointer-events:none;z-index:0;}

/* Page hero for interior pages — shorter, no watermark */
.hero--page .hero__inner{padding-block:clamp(3rem,9vh,5.5rem) clamp(2.5rem,6vh,4rem);}

.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.84rem;color:var(--muted);margin-bottom:1.4rem;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--bone);}
.crumbs svg{width:11px;height:11px;opacity:.5;}

/* Hero load choreography — one orchestrated reveal beats scattered micro-motion */
.hero__inner>*{opacity:0;transform:translateY(20px);animation:heroIn .7s var(--ease) forwards;}
.hero__inner>*:nth-child(1){animation-delay:.05s;}
.hero__inner>*:nth-child(2){animation-delay:.15s;}
.hero__inner>*:nth-child(3){animation-delay:.25s;}
.hero__inner>*:nth-child(4){animation-delay:.35s;}
.hero__inner>*:nth-child(5){animation-delay:.45s;}
.hero__inner>*:nth-child(6){animation-delay:.55s;}
@keyframes heroIn{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.hero__inner>*{opacity:1;transform:none;animation:none;}}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .header,.drawer,.actionbar,.hero__media,.sim__controls{display:none!important;}
  body{background:#fff;color:#000;padding:0;}
}

/* Pre-launch only: claims nobody has confirmed yet (build.py marks them). */
mark.todo{background:#ffe14d;color:#111;padding:0 .15em;border-radius:2px;box-shadow:inset 0 0 0 1px #c9a800;}
.todo-note{background:#fff3b0;color:#111;border-left:4px solid #e0b100;border-radius:4px;padding:.65rem .9rem;margin:0 0 1.1rem;font-size:.92rem;line-height:1.5;}
.container > .todo-note{margin-top:1.25rem;}