/* BC Crew deck. Barnwell Cambridge brand: navy #021F57 on white, Inter (as on barnwellcambridge.com.au). Harris deck mechanics, white theme. */
:root{
  --navy:#021F57; --navy-2:#0a2c6e; --ink:#0d1a36; --body:#3a4560; --muted:#5f6a85;
  --rule:#e1e5ee; --tint:#f4f6fa; --tint-2:#e9eef7; --paper:#fdfdfe;
  --red:#a61e34; --red-tint:#fbedef;
  --top:76px; --bottom:76px; --gutter:clamp(16px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:light } }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--paper)}
body{font-family:Inter,system-ui,sans-serif;color:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow:hidden}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{color:var(--ink);text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,68px);font-weight:800;letter-spacing:-0.035em;line-height:1.04;color:var(--navy)}
h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-0.03em;line-height:1.08;color:var(--navy);margin-bottom:14px;max-width:22ch}
h3{font-size:17px;font-weight:700;letter-spacing:-0.01em;line-height:1.3}
p{max-width:68ch}
.lede{font-size:clamp(16px,1.35vw,19px);color:var(--body);max-width:62ch;margin-bottom:32px}
.note{font-size:14px;color:var(--muted);margin-top:22px}

/* chrome */
.top{position:fixed;inset:0 0 auto;height:var(--top);background:rgb(253 253 254 / .94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid var(--rule)}
.segs{list-style:none;display:flex;gap:6px;padding:14px var(--gutter) 0}
.segs li{flex:1;height:3px;border-radius:3px;background:var(--rule);cursor:pointer;transition:background .4s var(--ease)}
.segs li.done{background:var(--navy)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter) 0}
.marks{display:flex;align-items:center;gap:12px}
.marks .bc{height:22px;width:auto}
.marks .x{font-size:13px;color:var(--muted)}
.marks .rr{font-size:15px;color:var(--ink);letter-spacing:-0.01em}
.marks .rr b{font-weight:800}
.for{font-size:14px;color:var(--muted)}
.bottom{position:fixed;inset:auto 0 0;height:var(--bottom);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);background:rgb(253 253 254 / .94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule);z-index:10}
.count{font-size:14px;color:var(--muted);text-align:center}
.count #cur{color:var(--ink);font-weight:600}
#prev{justify-self:start;background:none;border:0;font:inherit;font-size:15px;color:var(--navy);font-weight:600;padding:10px 4px;cursor:pointer}
#prev:disabled{visibility:hidden}
#next{justify-self:end;display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border:0;border-radius:999px;font:inherit;font-weight:600;font-size:15px;padding:12px 22px;cursor:pointer;box-shadow:0 6px 18px rgb(2 31 87 / .22);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
#next:hover{box-shadow:0 10px 24px rgb(2 31 87 / .28)}
#next:active{transform:translateY(1px) scale(.98)}
#next svg{width:16px;height:16px}

/* pages */
#deck{position:fixed;inset:var(--top) 0 var(--bottom)}
.pg{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateX(28px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.pg.back{transform:translateX(-28px)}
.pg.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.wrap{max-width:1240px;margin:0 auto;padding:clamp(28px,5vh,64px) var(--gutter) 56px}
@media (prefers-reduced-motion: reduce){.pg,.pg.on,.pg.back{transition:none;transform:none}}

/* start */
.start{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:100%}
.hello{font-size:17px;color:var(--muted);margin-bottom:18px}
.start .sub{font-size:clamp(16px,1.4vw,19px);margin-top:22px;max-width:46ch}
.meta{display:flex;gap:40px;margin-top:40px;padding-top:22px;border-top:1px solid var(--rule)}
.meta dt{font-size:13px;color:var(--muted)}
.meta dd{font-size:15px;color:var(--ink);font-weight:600;margin-top:2px}
.start-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block;box-shadow:0 30px 60px -20px rgb(2 31 87 / .35)}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;border-radius:16px;overflow:hidden;border:1px solid var(--rule)}
.compare .col{padding:28px 30px}
.compare .now{background:var(--tint)}
.compare .then{background:var(--navy);color:#dfe6f6}
.compare .then h3{color:#fff}
.compare ul{list-style:none;margin-top:14px}
.compare li{padding:11px 0;border-top:1px solid var(--rule)}
.compare .then li{border-top-color:rgb(255 255 255 / .14)}
.compare li:first-child{border-top:0}

/* proof */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:f;margin-bottom:36px}
.flow li{counter-increment:f;border-top:2px solid var(--navy);padding-top:16px}
.flow li::before{content:counter(f);display:block;font-size:34px;font-weight:800;color:var(--navy);letter-spacing:-0.03em;line-height:1;margin-bottom:10px}
.flow p{font-size:15px;margin-top:6px}
.lines{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.lines h3{margin-bottom:8px}
.lines ul{list-style:none}
.lines li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--rule);font-size:15px}
.lines li::before{content:"";position:absolute;left:2px;top:15px;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.no li::before{color:var(--red);--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.yes li::before{color:var(--navy);--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* roles */
.roles{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:start}
.role-list{display:flex;flex-direction:column;gap:4px}
.role-list button{all:unset;cursor:pointer;padding:12px 16px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:10px;transition:background .2s var(--ease)}
.role-list button small{font-weight:500;color:var(--muted);font-size:13px}
.role-list button:hover{background:var(--tint)}
.role-list button[aria-selected="true"]{background:var(--navy);color:#fff}
.role-list button[aria-selected="true"] small{color:#b8c5e3}
.role-list button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.role-card{background:var(--tint);border-radius:18px;padding:28px 30px;display:grid;grid-template-columns:1fr 240px;gap:28px;min-height:480px}
.role-card h3{font-size:24px;letter-spacing:-0.02em;color:var(--navy)}
.role-card .who{color:var(--muted);margin:4px 0 18px;font-size:15px}
.role-card .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.role-card h4{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.role-card ul{list-style:none}
.role-card li{padding:7px 0;border-top:1px solid var(--rule);font-size:14.5px;color:var(--ink)}
.role-card li:first-child{border-top:0}
.role-card .cant li{color:var(--muted)}
.role-card .where{margin-top:18px;font-size:14px;color:var(--muted)}

/* phone (real HTML component) */
.phone{align-self:start;border-radius:34px;background:#0b0f1a;padding:9px;box-shadow:0 24px 50px -18px rgb(2 31 87 / .45)}
.screen{border-radius:26px;background:#fff;height:440px;overflow:hidden;display:flex;flex-direction:column;font-size:12px;color:var(--ink)}
.sbar{display:flex;justify-content:space-between;padding:10px 18px 4px;font-size:11px;font-weight:600}
.ahead{display:flex;align-items:center;gap:8px;padding:6px 16px 10px;border-bottom:1px solid var(--rule)}
.ahead img{height:18px}
.ahead b{font-size:13px}
.ahead span{margin-left:auto;font-size:11px;color:var(--muted)}
.sc{padding:12px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.sc .s{font-size:11px;color:var(--muted)}
.sc .big{font-size:18px;font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.sc .row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--rule)}
.sc .row:first-child{border-top:0}
.sc .row small{display:block;color:var(--muted);font-size:10.5px}
.tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--tint-2);color:var(--navy);white-space:nowrap}
.tag.on{background:var(--navy);color:#fff}
.tag.flag{background:var(--red-tint);color:var(--red)}
.qr{width:150px;height:150px;margin:2px auto;border-radius:12px;border:1.5px solid var(--navy);background:var(--tint);display:grid;place-items:center;position:relative}
.qr::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;background:var(--navy);opacity:.5;animation:scan 2.4s var(--ease) infinite alternate}
@keyframes scan{from{transform:translateY(-52px)}to{transform:translateY(52px)}}
@media (prefers-reduced-motion: reduce){.qr::after{animation:none}}
.qr i{font-style:normal;font-size:10.5px;color:var(--muted);text-align:center;padding:0 14px}
.btn{margin-top:auto;background:var(--navy);color:#fff;border-radius:12px;padding:11px;text-align:center;font-weight:600;font-size:12.5px}
.receipt{background:var(--tint);border-radius:10px;padding:9px 11px;font-size:11px}
.receipt b{display:block;font-size:12.5px}
.offer{border:1px solid var(--navy);border-radius:12px;padding:11px}
.offer .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.offer .pair span{text-align:center;padding:8px;border-radius:9px;font-weight:600}
.offer .pair .a{background:var(--navy);color:#fff}
.offer .pair .d{border:1px solid var(--rule)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpi div{background:var(--tint);border-radius:10px;padding:8px 10px}
.kpi b{display:block;font-size:17px;letter-spacing:-0.02em}
.kpi small{color:var(--muted);font-size:10.5px}

/* offline */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:start}
.ticks{list-style:none}
.ticks li{padding:13px 0;border-top:1px solid var(--rule);font-size:15.5px}
.ticks li:first-child{border-top:0}
.ticks b{color:var(--ink)}
.photo-tall img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;display:block}

/* rules */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rule{background:var(--tint);border-radius:14px;padding:20px 22px}
.rule h3{margin-bottom:6px}
.rule .law{font-size:14.5px;color:var(--body)}
.rule .how{font-size:14.5px;color:var(--ink);margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.rule .how b{color:var(--navy)}

/* spec */
.spec{columns:3 300px;column-gap:28px}
.group{break-inside:avoid;margin-bottom:26px}
.group h3{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:2px solid var(--navy);margin-bottom:4px}
.group h3 small{font-size:13px;color:var(--muted);font-weight:500}
.group ul{list-style:none}
.group li{padding:7px 0;font-size:14.5px;color:var(--ink);border-top:1px solid var(--rule)}
.group li:first-child{border-top:0}

/* gantt */
.gantt{display:grid;grid-template-columns:260px 1fr;row-gap:12px;align-items:center}
.gantt .lbl{font-weight:600;color:var(--ink);font-size:15px;line-height:1.3}
.gantt .lbl small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.track{position:relative;height:30px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--tint) 0,var(--tint) calc(100%/18 - 2px),transparent calc(100%/18 - 2px),transparent calc(100%/18))}
.track .bar{position:absolute;top:4px;bottom:4px;border-radius:6px;background:var(--navy);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.track .bar.soft{background:#7d93c4}
.pg.on .track .bar{transform:scaleX(1)}
.weeks{grid-column:2;display:grid;grid-template-columns:repeat(18,1fr);font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.track .bar{transition:none;transform:none}}

/* stores */
.stores{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.stores ol{padding-left:20px}
.stores ol li{padding:8px 0;font-size:15px;color:var(--ink)}
.stores ol li span{display:block;color:var(--body);font-size:14px}
.access{width:100%;border-collapse:collapse;font-size:14px}
.access th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:0 10px 8px 0;border-bottom:1.5px solid var(--navy)}
.access td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule);color:var(--ink);vertical-align:top}
.access td:last-child{color:var(--muted);white-space:nowrap}

/* price */
.price{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.price>div{border-radius:18px;padding:28px 30px}
.p-build{background:var(--tint)}
.p-ret{background:var(--navy);color:#dfe6f6}
.p-ret h3{color:#fff}
.p-when{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px}
.p-ret .p-when{color:#a9b8dc}
.p-figure{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-0.03em;color:var(--navy);margin:8px 0 12px;line-height:1.1}
.p-ret .p-figure{color:#fff}
.p-figure small{font-size:15px;font-weight:500;letter-spacing:0;color:#a9b8dc}
.ret-list{list-style:none;columns:2 220px;column-gap:24px}
.ret-list li{break-inside:avoid;padding:7px 0;border-top:1px solid rgb(255 255 255 / .14);font-size:14.5px}

/* yours */
.yours{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:8px 0 40px}
.yours h3{padding-top:14px;border-top:2px solid var(--navy);margin-bottom:6px}
.yours p{font-size:15px}
.next{background:var(--tint);border-radius:18px;padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:10px 40px}
.next h3{grid-row:span 2}
.next ol{padding-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;font-size:15px;color:var(--ink)}
.sign{font-size:14px;color:var(--muted);margin-top:10px}
.sign b{color:var(--ink);margin-right:6px}
.sign .num{margin:0 8px}

/* mobile */
@media (max-width: 900px){
  :root{--top:70px;--bottom:70px}
  .for,.marks .x{display:none}
  .start,.split,.compare,.lines,.roles,.role-card,.role-card .cols,.rules,.stores,.price,.next,.next ol{grid-template-columns:1fr}
  .start-photo{order:-1}
  .start-photo img{aspect-ratio:16/10}
  .flow{grid-template-columns:1fr 1fr}
  .yours{grid-template-columns:1fr 1fr}
  .gantt{grid-template-columns:1fr;row-gap:6px}
  .gantt .weeks{grid-column:1}
  .gantt .track{margin-bottom:8px}
  .role-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .role-list button{white-space:nowrap;scroll-snap-align:start}
  .role-list button small{display:none}
  .role-card .phone{max-width:260px;margin:0 auto}
  .meta{gap:22px;flex-wrap:wrap}
  .access td:last-child{white-space:normal}
}
@media (max-width: 520px){ .flow,.yours{grid-template-columns:1fr} }