/* Sabre Constructions — real website. v7 base, v22 article kit (2026-09-17).
   Styled for the AVATAR (campaign plan §1): a Bayside family weighing a $1M+ decision about
   their own home, reading on a phone at night. Calm, warm, light, quiet type, big photography.
   A builder since 1990 who does not need to shout. Read docs/design-system.md first.
   SELF-CONTAINED on purpose: never reference anything above this folder. */

:root{
  --paper:#F8F7F4;      /* the ground. Warm white, not blue-white */
  --white:#FFFFFF;
  --char:#22232A;       /* charcoal. Text, and the one dark band per page (the closing block check) */
  --char-2:#1A1B20;     /* footer */
  --ink:#22232A;        /* headings */
  --ink2:#4A4B52;       /* body text */
  --muted:#8A8B93;      /* small labels */
  --line:#E6E4DF;       /* hairlines on paper */
  --line-d:#33343B;     /* hairlines on charcoal */
  --grey-d:#C4C4CA;     /* body text on charcoal */
  --red:#EB2227;        /* Sabre's red. The button and the stars. That is all */
  --red-d:#C9151A;
  --black:#0A0A0A;      /* the hero ground behind the video */
  --maxw:1120px;
  --r:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink2);
  font-family:Figtree,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 28px}

/* Type — headings have NO size on their own. Use .h1/.h2/.h3. Medium weight, never bold. */
.h1,.h2,.h3{font-weight:500;letter-spacing:-.015em;line-height:1.12;color:var(--ink);margin:0 0 .5em}
.h1{font-size:clamp(34px,4.2vw,52px)}
.h2{font-size:clamp(26px,3vw,38px)}
.h3{font-size:20px;font-weight:600;line-height:1.3}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 16px}
.lede{font-size:clamp(17px,1.5vw,19px);max-width:58ch;color:var(--ink2)}
p{margin:0 0 1em}
a{color:var(--ink);text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{text-decoration-color:var(--red)}
.small{font-size:13px;color:var(--muted)}
.red{color:var(--red)}

.btn{
  display:inline-block;font-weight:600;text-decoration:none;font-size:16px;
  padding:14px 24px;border-radius:var(--r);background:var(--red);color:#fff;
}
.btn:hover{background:var(--red-d)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* Sections: paper, separated by a hairline. One dark band per page: the closing block check. */
section{padding:88px 0}
section + section{border-top:1px solid var(--line)}
.section-tight{padding:40px 0 88px}
.band-dark,.band-red{background:var(--char);color:var(--grey-d);border-top:0}
.band-dark .h1,.band-dark .h2,.band-dark .h3,.band-red .h1,.band-red .h2,.band-red .h3{color:#fff}
.band-dark .lede,.band-dark p,.band-red .lede,.band-red p{color:var(--grey-d)}
.band-dark .eyebrow,.band-red .eyebrow{color:#9A9BA3}
.band-dark a,.band-red a{color:#fff}
.band-dark .btn-ghost,.band-red .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.band-dark .btn-ghost:hover,.band-red .btn-ghost:hover{background:#fff;color:var(--ink)}
.band-dark .small,.band-red .small{color:#9A9BA3}

/* Header — paper, quiet. Transparent over the video on the home page. */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(248,247,244,.94);color:var(--ink);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;
}
.topbar.over{position:absolute;left:0;right:0;background:linear-gradient(180deg,rgba(10,10,10,.45),rgba(10,10,10,0));color:#fff;border-bottom:0;backdrop-filter:none}
.tb-logo img{height:38px;width:auto}
.tb-logo .logo-light{display:none}.topbar.over .logo-light{display:block}.topbar.over .logo-dark{display:none}
.tb-nav{display:flex;gap:22px;flex-wrap:wrap}
.tb-nav a{font-size:13px;letter-spacing:.02em;font-weight:500;color:inherit;text-decoration:none;opacity:.8}
.tb-nav a.active,.tb-nav a:hover{opacity:1}
.tb-phone{font-weight:600;color:inherit;text-decoration:none;white-space:nowrap;font-size:15px}

/* Hero — the video. It ends on black with a line of words; the page adds only the invitation. */
.hero{position:relative;overflow:hidden;height:min(92vh,880px);display:flex;align-items:flex-end;background:var(--black);color:#fff}
.hero video,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .v-wide{display:block}.hero .v-tall{display:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,0) 45%,rgba(10,10,10,.7) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:56px;transition:opacity .8s ease}
.hero.ended .hero-inner{opacity:0}
.hero-inner .h1{color:#fff;font-size:clamp(26px,3.2vw,40px);font-weight:500;max-width:24ch}
.hero-inner .lede{color:#E6E6EA}
.hero-inner .eyebrow{color:#C9C9D0}
.hero-inner .small{color:#C9C9D0}
.hero-words{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 28px;margin:0;color:#fff;font-size:clamp(30px,4.6vw,60px);font-weight:500;letter-spacing:-.015em;line-height:1.15;
  opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero.ended .hero-words{opacity:1}
.hero-cap{position:absolute;right:16px;bottom:12px;z-index:3;margin:0;font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.65)}

/* Reviews under the hero */
.rating{display:flex;gap:24px;align-items:center;margin:0 0 32px;max-width:720px}
.rating .v{font-size:56px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ink);margin:0}
.rating .k{font-weight:600;color:var(--ink);margin:0 0 4px}
.quote{margin:0;padding:0 0 0 22px;border-left:2px solid var(--red);background:transparent}
.quote p{font-size:17px;color:var(--ink);margin:0 0 12px;line-height:1.6}
.quote cite{font-style:normal;font-size:13px;color:var(--muted)}
.stars{color:var(--red);letter-spacing:.05em;margin-right:6px}

/* Proof strip — quiet, hairlines, not a dark band */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.creds .v{font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1;margin:0 0 6px;color:var(--ink)}
.creds .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0}
.band-dark .creds{border-color:var(--line-d)}.band-dark .creds .v{color:#fff}

/* Grids, cards, alternating rows */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:32px}
.alt{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.alt.flip{grid-template-columns:.9fr 1.1fr}.alt.flip img{order:2}
.alt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.card{padding:0}
.card .h3{margin-bottom:.3em}
.card p:last-child{margin-bottom:0}
.num{font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--muted);margin:0 0 8px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:32px}
.steps > div{padding-top:16px;border-top:1px solid var(--line)}
.steps .n{font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--muted);margin:0 0 8px}

/* Photo strip and gallery */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 16px}
.strip img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.gallery figcaption{font-size:13px;color:var(--muted);padding:10px 2px 0}

/* Team */
.team-row{display:flex;flex-wrap:wrap;gap:14px}
.team-row img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px}
.person img{width:120px;height:120px;object-fit:cover;border-radius:50%;margin-bottom:16px}
.person .h3{margin-bottom:.15em}
.person .role{font-size:13px;color:var(--muted);margin:0 0 10px}

/* Designs */
.design img{width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:var(--r);margin-bottom:14px;background:#fff}
.design .h3{margin-bottom:.15em}
.design .spec{font-size:13px;color:var(--muted);margin:0 0 8px}

/* Long-form */
.prose{max-width:66ch}
.prose .h2{margin-top:1.4em;font-size:clamp(22px,2.6vw,30px)}
.prose p,.prose li{font-size:17px}
.prose ol,.prose ul{padding-left:22px}
.prose li{margin-bottom:.4em}
.prose ol li::marker,.prose ul li::marker{color:var(--muted)}
.tablewrap{overflow-x:auto;margin:1.4em 0;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose thead th{font-weight:600;border-bottom:2px solid var(--line);white-space:nowrap}
.prose tbody tr:last-child td{border-bottom:none}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;color:var(--ink);list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{max-width:62ch;margin:12px 0 0}

/* Footer */
footer{background:var(--char-2);color:var(--grey-d);padding:56px 0;font-size:14px}
footer a{color:#fff}
footer .credit{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-d);color:var(--muted);font-size:13px}
footer .credit a{color:var(--grey-d);text-decoration:underline;text-underline-offset:2px}
footer .credit a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-name{font-weight:600;font-size:17px;color:#fff;margin:0 0 8px}
.foot-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#9A9BA3;margin:0 0 10px}

/* Enquiry form — untouched behaviour, restyled */
.form{max-width:680px;margin-top:32px}
.form fieldset{border:0;padding:0;margin:0 0 28px}
.form legend,.form label.q{display:block;font-weight:600;color:var(--ink);margin:0 0 10px;font-size:17px}
.form .hint{font-size:14px;color:var(--muted);margin:-6px 0 10px}
.opts{display:grid;gap:8px}
.opts label{display:flex;align-items:center;gap:12px;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--ink);font-size:16px}
.opts label:hover{border-color:var(--muted)}
.opts input{accent-color:var(--red);width:18px;height:18px;margin:0}
.opts input:checked+span{font-weight:600}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.form input:focus,.form select:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.form button.btn{border:0;cursor:pointer;font-size:16px}
.form .status{margin-top:16px;font-size:15px;color:var(--ink)}
.form .status.ok{color:#1F7A3A;font-weight:600}
.form .status.err{color:var(--red-d)}
.form .gotcha{position:absolute;left:-9999px}

.todo{border:1px dashed var(--red);padding:18px 20px;margin:24px 0;font-size:13px;color:var(--ink)}

@media (max-width:860px){
  section{padding:60px 0}
  .topbar{flex-wrap:wrap}
  .tb-nav{order:3;width:100%;gap:14px}
  .topbar.over{position:sticky;background:rgba(248,247,244,.94);color:var(--ink);border-bottom:1px solid var(--line)}
  .topbar.over .logo-light{display:none}.topbar.over .logo-dark{display:block}
  .hero{height:min(80vh,700px)}
  .hero .v-wide{display:none}.hero .v-tall{display:block}
  .grid-2,.grid-3,.grid-4,.team-grid,.footer-grid,.steps,.alt,.alt.flip{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr 1fr}
  .alt.flip img{order:0}
  .strip{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .rating{flex-direction:column;align-items:flex-start}
}

/* The story section: the cutaway stand-in with three states (v7.1) */
.story .prose-copy p{font-size:18px;line-height:1.7;max-width:52ch}
.cut{position:relative;border-radius:var(--r);overflow:hidden;background:var(--char);aspect-ratio:4/3}
.cut-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.cut-img.on{opacity:1}
.cut-tag{position:absolute;left:16px;top:16px;background:rgba(34,35,42,.85);color:#fff;font-size:12px;padding:6px 10px;border-radius:6px}
.cut-pop{position:absolute;right:16px;bottom:16px;left:16px;max-width:320px;margin-left:auto;background:#fff;color:var(--ink);padding:14px 16px;border-radius:var(--r);box-shadow:0 8px 30px rgba(0,0,0,.25);font-size:15px;line-height:1.5}
.cut-pop strong{display:block;font-weight:600;margin-bottom:4px}
.stepdots{display:flex;gap:10px;margin:14px 0 0}
.stepdots button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.stepdots button.on{background:var(--char);color:#fff;border-color:var(--char)}
.cut-note{margin-top:10px}

/* v9: full-width auto-advancing cutaway, the close (reviews + form), the blog */
.story .h2{max-width:22ch}
.story .prose-copy{columns:2;column-gap:56px;margin-top:8px}
.story .prose-copy p{break-inside:avoid;max-width:none}
.cut-full{aspect-ratio:16/9;max-height:720px}
.cut-full .cut-tag{font-size:13px;padding:8px 12px}
.cut-full .cut-pop{right:24px;bottom:24px;left:auto;max-width:380px;padding:18px 20px;font-size:16px}
.cut-full .cut-pop .cut-step{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 6px}
.cut-pop{opacity:0;transform:translateY(8px)}
.cut-pop.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.cut-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25)}
.cut-bar i{display:block;height:100%;width:0;background:#fff}
.stepdots{align-items:center;flex-wrap:wrap}
.stepdots .cut-note{margin-left:8px}
.close-grid{align-items:start;gap:64px}
.close-grid .form{margin-top:20px;max-width:none}
.stack{display:grid;gap:22px;margin-top:8px}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.post{display:block;text-decoration:none;color:inherit}
.post img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);margin-bottom:14px}
.post .h3{margin:4px 0 8px}
.post p{color:var(--ink2)}
.post:hover .h3{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
@media (max-width:860px){
  .story .prose-copy{columns:1}
  .cut-full{aspect-ratio:4/3;max-height:none}
  .cut-full .cut-pop{left:16px;right:16px;max-width:none;bottom:16px}
  .close-grid{gap:40px}
  .posts{grid-template-columns:1fr}
}

/* v10: the form unfolds one question at a time */
.form [data-step].appear{animation:appear .5s ease}
@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* v11: Google mark + gold stars on the rating blocks */
.gbadge{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.gstars{display:inline-flex;gap:2px}
.gstars i{width:18px;height:18px;display:inline-block;background:#FBBC04;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gstars i.h{background:linear-gradient(90deg,#FBBC04 50%,#E6E4DF 50%)}

/* v12: clean white, hero-style story title with Nathan, big dark step panel, slide-across form */
:root{--paper:#FFFFFF;--line:#E9E8E6}
.topbar{background:rgba(255,255,255,.94)}
@media (max-width:860px){.topbar.over{background:rgba(255,255,255,.94)}}
.story{text-align:center}
.story-title{font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--ink);font-size:clamp(38px,5.6vw,72px);margin:0 auto;max-width:18ch;display:flex;flex-direction:column;align-items:center;gap:18px}
.nathan-ic{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.15)}
.cut-img{transition:opacity .5s ease}
.cut-full .cut-pop{left:24px;top:24px;bottom:24px;right:auto;width:38%;max-width:none;background:rgba(34,35,42,.94);color:#fff;border-radius:var(--r);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:none;font-size:17px;line-height:1.5}
.cut-full .cut-pop .cut-step{color:#9A9BA3;margin:0 0 auto}
.cut-full .cut-pop .cut-num{font-size:clamp(48px,6vw,84px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--red);margin:0 0 12px}
.cut-full .cut-pop strong{font-size:clamp(20px,2vw,26px);line-height:1.2;margin-bottom:10px}
.cut-full .cut-pop span{color:#D6D6DC}
.cut-full .cut-tag{left:auto;right:16px}
.wiz{position:relative;overflow:hidden}
.wiz-prog{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 14px}
/* The slide only runs with JS (html.js is set in <head>). Without it every step shows, stacked, and the form still posts. */
.js .wiz-step{position:absolute;top:0;left:0;width:100%;transform:translateX(60px);opacity:0;transition:transform .45s ease,opacity .45s ease;pointer-events:none}
.js .wiz-step.on{position:relative;transform:none;opacity:1;pointer-events:auto}
.js .wiz-step.prev{transform:translateX(-60px)}
html:not(.js) .wiz-prog,html:not(.js) .wiz-back{display:none}
.wiz-back{margin:6px 0 0;font-size:14px}
.wiz-back a{color:var(--muted)}
#book{background:#F6F6F5}
@media (max-width:860px){
  .cut-full .cut-pop{left:16px;right:16px;top:auto;bottom:16px;width:auto;height:46%;padding:18px}
  .cut-full .cut-pop .cut-num{font-size:40px}
  .story-title{font-size:34px}
}

/* v13: words on the picture, no panel; softer crossfade; placeholder video section */
.cut-img{transition:opacity 1.4s ease}
.cut-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.72) 100%);pointer-events:none}
.cut-full .cut-pop{left:32px;right:32px;top:auto;bottom:36px;width:auto;max-width:62%;background:transparent;padding:0;display:block;box-shadow:none;border-radius:0;z-index:2;color:#fff}
.cut-full .cut-pop .cut-step{color:rgba(255,255,255,.7);margin:0 0 8px}
.cut-full .cut-pop .cut-num{display:none}
.cut-full .cut-pop strong{display:block;font-size:clamp(28px,3.4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.cut-full .cut-pop span{font-size:clamp(17px,1.5vw,21px);color:#EDEDF0;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.cut-pop{transform:translateY(10px)}
.cut-pop.in{transition:opacity 1s ease,transform 1s ease}
.cut-full .cut-tag{z-index:2}
.cut-bar{z-index:2}
.vids .placeholder-note{background:#FFF4E5;border:1px solid #F3C98B;color:#7A4E00;padding:12px 14px;border-radius:var(--r);font-size:14px;max-width:70ch}
.vid{margin:0}
.vid video{width:100%;aspect-ratio:9/16;max-height:520px;object-fit:cover;border-radius:var(--r);background:#111}
.vid figcaption{font-size:13px;color:var(--muted);padding:10px 2px 0}
.ai-chip{display:inline-block;background:#FFF4E5;border:1px solid #F3C98B;color:#7A4E00;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:999px;margin-right:6px}
@media (max-width:860px){.cut-full .cut-pop{left:16px;right:16px;bottom:24px;max-width:none;height:auto}.vid video{max-height:none}}

/* v15: the end card — fade to black, the Sabre mark */
.cut-end{background:#0A0A0A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:3}
.cut-end img{width:min(46%,320px);height:auto;opacity:0;transform:translateY(8px);transition:opacity 1s ease .4s,transform 1s ease .4s}
.cut-end p{margin:0;color:#9A9BA3;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:0;transition:opacity 1s ease .9s}
.cut-end.on img,.cut-end.on p{opacity:1;transform:none}
.cut-full .cut-tag,.cut-full .cut-pop{transition:opacity .8s ease}

/* v17: floating contact button; Your design as a visual walk-through; wider family + video sections */
.fab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:14px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.fab:hover{background:var(--red-d)}
.vids-grid{gap:48px}
.vids-grid .vid{width:100%;justify-self:center;max-width:min(520px,calc((100vh - 90px) * 9 / 16));max-width:min(520px,calc((100svh - 90px) * 9 / 16))}
@media (max-width:860px){.vids-grid .vid{max-width:min(100%,max(280px,calc((100svh - 200px) * 9 / 16)))}}
.vids-grid .vid video{max-height:none}
.steps-vis{display:block}
.stepv{margin:0 0 28px;position:relative;border-radius:var(--r);overflow:hidden;background:var(--char)}
.stepv img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.stepv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 50%,rgba(10,10,10,.72) 100%);pointer-events:none}
.stepv figcaption{position:absolute;left:32px;right:32px;bottom:32px;z-index:2;color:#fff;max-width:62%}
.stepv .n{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:8px}
.stepv strong{display:block;font-size:clamp(26px,3.2vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.stepv span:last-child{font-size:clamp(16px,1.4vw,20px);color:#EDEDF0;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.35)}
@media (max-width:860px){
  .fab span{display:none}.fab{padding:14px;right:16px;bottom:16px}
  .vids-grid{gap:24px}
  .stepv img{aspect-ratio:4/3}.stepv figcaption{left:16px;right:16px;bottom:16px;max-width:none}
}

/* v18: the Your design journey — zigzag rows joined by a line */
.journey .jrow{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.journey .jrow.flip .jimg{order:2}
.journey .jimg{margin:0}
.journey .jimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.journey .jn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--red);margin:0 0 10px}
.journey .jtxt .h2{font-size:clamp(24px,2.6vw,34px)}
.journey .jtxt p{font-size:17px}
.journey .jlink{width:2px;height:64px;margin:12px auto;background:linear-gradient(180deg,var(--line),var(--muted));border-radius:2px}
.journey .jbig{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--char)}
.journey .jbig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.journey .jbig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 50%,rgba(10,10,10,.72) 100%);pointer-events:none}
.journey .jbig figcaption{position:absolute;left:32px;right:32px;bottom:32px;z-index:2;color:#fff;max-width:62%}
.journey .jbig .n{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:8px}
.journey .jbig strong{display:block;font-size:clamp(26px,3.2vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.journey .jbig span:last-child{font-size:clamp(16px,1.4vw,20px);color:#EDEDF0;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.jstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0 8px}
.jthumb{display:block;text-decoration:none;color:var(--muted);font-size:11px;text-align:center}
.jthumb img{width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:6px;background:#fff;margin-bottom:4px}
@media (max-width:860px){
  .journey .jrow,.journey .jrow.flip{grid-template-columns:1fr;gap:20px}
  .journey .jrow.flip .jimg{order:0}
  .journey .jlink{height:40px}
  .journey .jbig img{aspect-ratio:4/3}.journey .jbig figcaption{left:16px;right:16px;bottom:16px;max-width:none}
  .jstrip{grid-template-columns:repeat(3,1fr)}
}

/* v22: the article kit — Project 24 shape on Sabre's look (2026-09-17).
   Answer block · proof points · on-this-page · key takeaways · common questions · keep reading.
   Hairlines and paper only. Red stays on the button. */
.art-meta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px;color:var(--muted);margin:0 0 22px}
.art-meta .by{display:flex;align-items:center;gap:10px;color:var(--ink2)}
.art-meta .by img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.art-meta .by b{font-weight:600;color:var(--ink)}
.answer{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin:8px 0 34px;max-width:66ch}
.answer .eyebrow{margin-bottom:10px}
.answer p{font-size:18px;line-height:1.65;margin:0 0 .8em}
.answer p:last-child{margin-bottom:0}
.onpage{margin:0 0 40px;padding:0 0 18px;border-bottom:1px solid var(--line);max-width:66ch}
.onpage .eyebrow{margin-bottom:8px}
.onpage ol{margin:0;padding-left:20px;columns:2;column-gap:32px;font-size:15px}
.onpage li{margin-bottom:4px;break-inside:avoid}
.onpage a{color:var(--ink2);text-decoration-color:var(--line)}
.prose .h2{scroll-margin-top:96px}
.proof{margin:30px 0;padding:22px 26px;border-left:2px solid var(--ink);background:var(--white);border-radius:0 var(--r) var(--r) 0}
.proof p{font-size:18px;line-height:1.6;margin:0 0 8px;color:var(--ink)}
.proof p b{font-weight:600}
.proof cite{display:block;font-style:normal;font-size:14px;color:var(--muted)}
.prose ul.pts{list-style:none;padding:0;margin:0 0 1.2em}
.prose ul.pts li{position:relative;padding-left:20px;margin-bottom:.55em}
.prose ul.pts li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--ink)}
.takeaways{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin:44px 0 8px}
.takeaways .eyebrow{margin-bottom:12px}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{margin-bottom:.6em}
.takeaways li b{font-weight:600;color:var(--ink)}
.qa{margin:0}
.qa > div{padding:18px 0;border-top:1px solid var(--line)}
.qa > div:last-child{border-bottom:1px solid var(--line)}
.qa .q{font-weight:600;font-size:18px;color:var(--ink);margin:0 0 6px}
.qa p:last-child{margin:0}
.sources{margin-top:36px;padding-top:14px;border-top:1px solid var(--line)}
.related .h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:24px}
.related .posts{gap:28px}
.related .post .h3{font-size:18px}
@media (max-width:860px){
  .answer,.takeaways{padding:20px 20px}
  .proof{padding:18px 20px}
  .onpage ol{columns:1}
  .related .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.related .posts{grid-template-columns:1fr}}

/* v23: article layout — sticky "On this page" rail on the right (BBL / T&T pattern), a header image per
   article, and social icons in the footer (2026-09-17). */
.art-hero{margin:8px 0 0}
.art-hero img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r);background:var(--line)}
.art-hero figcaption{margin-top:8px}
.art-grid{display:grid;grid-template-columns:minmax(0,66ch) 232px;gap:64px;justify-content:center;align-items:start}
.art-grid .prose{max-width:none}
.art-side{position:sticky;top:92px}
.art-side .onpage{border:0;padding:0;margin:0;max-width:none}
.art-side .onpage ol{columns:1;list-style:none;padding:0;margin:0;font-size:14px;line-height:1.4}
.art-side .onpage li{margin:0;padding:7px 0 7px 14px;border-left:2px solid var(--line);transition:border-color .2s}
.art-side .onpage li a{color:var(--muted);text-decoration:none}
.art-side .onpage li.on{border-left-color:var(--ink)}
.art-side .onpage li.on a{color:var(--ink);font-weight:600}
.art-side .onpage li a:hover{color:var(--ink)}
.art-side .side-cta{margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:14px}
.art-side .side-cta a.btn{display:block;text-align:center;font-size:15px;padding:12px 16px;margin-top:10px}
.onpage.inline{display:none}
@media (max-width:1040px){
  .art-grid{display:block}
  .art-grid .prose{max-width:66ch}
  .art-side{display:none}
  .onpage.inline{display:block}
}
.social{display:flex;gap:10px;margin:14px 0 0}
.social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-d);border-radius:50%;color:#fff}
.social a:hover{background:#fff;color:var(--char-2);border-color:#fff}
.social svg{width:18px;height:18px}
.social a[hidden]{display:none}
@media (max-width:640px){.art-hero img{aspect-ratio:3/2}}

/* v24: the blog index in sections with the same sticky rail (2026-09-17) */
.blog-grid{grid-template-columns:minmax(0,1fr) 232px}
.blog-main .onpage.inline{margin-bottom:34px}
.blog-sec{padding:0 0 56px;border-top:0;margin-bottom:24px;scroll-margin-top:96px}
.blog-sec + .blog-sec{padding-top:48px;border-top:1px solid var(--line)}
.blog-sec .h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:.3em}
.blog-sec .lede{margin-bottom:28px;max-width:66ch}
.blog-sec .posts{gap:32px 28px}
.blog-sec .post .h3{font-size:18px}
.blog-sec .post img{aspect-ratio:3/2}
@media (max-width:1040px){.blog-grid{display:block}}

/* v25 · click images (2026-09-17). The card/hero image sells the article; the map or diagram moves INTO the
   article as .art-fig. The suburb/topic label is HTML over the image, never baked into the pixels. */
.art-hero .thumb,.post .thumb{position:relative;display:block}
.art-hero .thumb img{display:block}
.post .thumb{margin-bottom:14px;border-radius:var(--r);overflow:clip}
.post .thumb img{margin-bottom:0;display:block}
.art-hero .label,.post .label{position:absolute;left:0;right:0;bottom:0;padding:64px 22px 18px;border-radius:0 0 var(--r) var(--r);background:linear-gradient(to top,rgba(34,35,42,.74),rgba(34,35,42,0));color:#fff;pointer-events:none}
.art-hero .label span,.post .label span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#D9D9DE;margin-bottom:6px}
.art-hero .label b,.post .label b{display:block;font-weight:600;letter-spacing:-.02em;line-height:1.05;font-size:clamp(28px,4vw,46px)}
.post .label{padding:44px 16px 14px}
.post .label span{font-size:11px;margin-bottom:3px}
.post .label b{font-size:22px}
.post:hover .thumb img{filter:brightness(1.04)}
.art-fig{margin:32px 0}
.art-fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.art-fig figcaption{margin-top:8px}
@media (max-width:640px){.art-hero .label{padding:48px 16px 14px}.art-hero .label b{font-size:26px}}

/* v29: upright video inside an article column (knockdown guide) — phone-shaped, not column-wide */
.art-vid{width:min(300px,100%);margin:0 0 36px}
.art-vid video{max-height:none}