/* Tektura: styles for the case studies only, split out of site.css so no other page has to
   download them. Loaded after site.css. The rules are in the order they had there, and
   none of them needs to win against a later rule of the same weight in site.css, so the
   split changes nothing on screen. A rule another page needs goes in site.css. */

 .r-img{--r:var(--r-img)}

@media (prefers-reduced-motion:no-preference){
  :is(.case,.wk-row):is(:hover,:focus-visible,.sc-play) .photo.scroll>img{transform:translateY(var(--scroll,-70%));transition:transform var(--sdur,10s) cubic-bezier(.25,.3,.35,1)}
}
/* Case studies */
.cs-reasons .card p{color:var(--on-ink);font-size:16px}

/* ---------- Accent bar for a caveat ---------- */
.caveat{display:flex;gap:16px;align-items:flex-start}
.caveat::before{content:"";width:6px;align-self:stretch;background:var(--signal);border-bottom-left-radius:4px;border-top-right-radius:4px;flex-shrink:0}
.caveat p{font-size:15px;color:var(--body)}
@media (min-width:900px){
/* a heading that is an h3 for its place in the page but set as a subheading keeps that size */
:where(body:not(.staff,.client)) .as-h4{font-size:17px}
}

/* ---- Work, the index. One row per project: the screen big enough to be worth looking
   at, the facts under the sentence, sides alternating down the page. ---- */
.wk-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:end;border-bottom:1px solid var(--rule);padding-bottom:22px}
.wk-head .htab{margin-bottom:0}
.wk-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,4vw,56px);align-items:center;padding:clamp(32px,4.4vw,58px) 0;border:0;border-bottom:1px solid var(--rule);color:var(--ink)}
.wk-row:hover{color:var(--ink)}
.wk-row.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.wk-row.flip>.photo{order:2}
.wk-row>.photo{aspect-ratio:4/3}
.wk-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.wk-no{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--slate)}
.wk-row h2{font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.01em;margin:12px 0 0}
.wk-row .one{font-size:16px;line-height:1.55;color:var(--body);margin:14px 0 0;max-width:var(--measure);text-align:left}
/* The labels share one column as wide as the widest of them, so every value starts at the same place. */
.wk-facts{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:14px}
.wk-facts li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;font-size:14.5px;line-height:1.45;padding:9px 0;border-top:1px solid var(--rule);text-align:left}
.wk-facts i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.wk-go{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-weight:600;font-size:15px;border-bottom:2px solid var(--signal);padding-bottom:3px;transition:border-color .2s ease}
.wk-row:hover .wk-go,.wk-row:focus-visible .wk-go{border-bottom-color:var(--ink)}
/* Each project gets its own ground — paper, white, then ink — so the three sections
   are told apart by colour and not only by a hairline. The header already turns itself
   over when a dark band passes under it. */
.wk-band{padding-block:clamp(30px,4.2vw,56px)}
.wk-band .wk-row{border-bottom:0;padding:0}
.wk-band.dark .wk-row,.wk-band.dark .wk-row h2{color:var(--paper)}
.wk-band.dark .wk-row .one{color:var(--on-ink)}
.wk-band.dark .wk-no,.wk-band.dark .wk-facts i{color:var(--on-ink-dim)}
.wk-band.dark .wk-facts li{border-top-color:rgba(255,255,255,.14)}
/* One status tag on all these pages: a hairline box, and a green mark when it is live. */
:is(.cf-crumb,.wk-top) .tag{background:transparent;color:var(--slate);box-shadow:inset 0 0 0 1px var(--rule-strong)}
:is(.cf-crumb,.wk-top) .tag.live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;vertical-align:1px;background:var(--status);border-top-right-radius:3px;border-bottom-left-radius:3px}
.wk-band.dark .tag{color:var(--on-ink-dim);box-shadow:inset 0 0 0 1px rgba(242,241,238,.26)}
.wk-band.dark .tag.live::before{background:var(--status-bg)}
.wk-band.dark .wk-go{border-bottom-color:var(--signal-dark)}
.wk-band.dark .wk-row:hover .wk-go{border-bottom-color:var(--paper)}
@media (max-width:860px){
  .wk-head{grid-template-columns:1fr;align-items:start;gap:18px}
  .wk-row{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .wk-row.flip{grid-template-columns:1fr}
  .wk-row.flip>.photo{order:0}
  .wk-row h2{margin-top:10px}
}

/* work: after its frame is drafted, the screenshot is uncovered along the diagonal */
.m-wk .photo{clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .9s cubic-bezier(.6,0,.2,1) calc(var(--d,0ms) + .6s)}
.m-wk.on .photo{clip-path:polygon(0 100%,0 -100%,200% 100%)}
.live-link{margin-left:12px;font-size:15px;font-weight:500;border-bottom:1px solid currentColor}
.live-link:hover{color:var(--signal)}
.m-lite .m-wk .photo{transition-duration:.6s;transition-delay:calc(var(--d,0ms) + .25s)}
@media (max-width:560px){
  .wk-facts li i{font-size:11.5px}
}
/* Phone type scale: this page's share. The scale is described at the end of site.css. */
@media (max-width:520px){
  /* labels and tags */
  .wk-facts li i{font-size:12px}
  /* secondary text */
  .wk-facts li{font-size:15px}
  /* body text inside cards and lists */
  .wk-row .one,.cs-reasons .card p{font-size:17px}
}

/* ---- A case study's site, shown large (work-show.js): a browser frame that glides
   down the whole home page, with the phone beside it, on an ink stage. Under it, when
   and where the pictures were taken; they are retaken on their own
   (tools/capture-previews.mjs). ---- */
.cs-show{margin-top:36px}
.cs-stage{position:relative;padding:clamp(18px,3.4vw,44px) clamp(18px,3.4vw,44px) clamp(18px,3.4vw,44px);background:var(--ink);border-top-right-radius:var(--r-img);border-bottom-left-radius:var(--r-img);overflow:visible}
.cs-stage::before{content:"";position:absolute;inset:0;border-top-right-radius:inherit;border-bottom-left-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(242,241,238,.04) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(242,241,238,.04) 31px 32px);pointer-events:none}
.cs-browser{position:relative;margin:0;background:var(--white);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cs-show.with-phone .cs-browser{margin-right:clamp(0px,14vw,170px)}
.cs-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#E9E7E2;border-bottom:1px solid var(--rule)}
.cs-chrome i{width:9px;height:9px;border-radius:50%;background:#C9C6BF}
.cs-url{margin-left:10px;flex:1;max-width:420px;padding:3px 12px;background:var(--white);font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--slate);border-top-right-radius:6px;border-bottom-left-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-scroll{height:clamp(300px,44vw,560px);overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:#B9B6AF transparent;background:#1a1a1a}
/* Until it is clicked, tapped or tabbed to, the wheel and swipes scroll the page
   (work-show.js); the script still glides it. */
.cs-scroll.idle{overflow-y:hidden}
.cs-hint{position:absolute;left:14px;top:48px;padding:10px 16px;background:var(--ink);color:var(--paper);font:500 14px var(--sans);white-space:nowrap;border-top-right-radius:var(--r-btn);border-bottom-left-radius:var(--r-btn);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s ease}
.cs-hint.on{opacity:1}
@media (prefers-reduced-motion:reduce){.cs-hint{transition:none}}
.cs-scroll:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.cs-scroll img{display:block;width:100%;height:auto}
.cs-phone{position:absolute;right:clamp(14px,3.4vw,44px);bottom:clamp(-28px,-2vw,-14px);width:clamp(120px,18vw,230px);margin:0;padding:7px;background:#0B0D10;border-radius:30px;box-shadow:0 0 0 1.5px #2A2F36,0 30px 50px -18px rgba(0,0,0,.7)}
.cs-phone img{display:block;width:100%;height:auto;border-radius:23px}
/* A phone that holds the whole page: one screen shows, and the pointer over it scrolls it down. */
.cs-pscr{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:23px;background:#0B0D10}
.cs-pscr>img{border-radius:0}
/* An app's tab bar stays put at the foot of the screen while the page moves under it. */
.cs-pscr>.cs-pbar{position:absolute;left:0;bottom:0}
@media (prefers-reduced-motion:no-preference){
  .cs-pscr>img:first-child{transition:transform .9s cubic-bezier(.25,.3,.35,1)}
  .cs-phone:hover .cs-pscr>img:first-child{transform:translateY(var(--scroll,-85%));transition:transform var(--sdur,12s) cubic-bezier(.25,.3,.35,1)}
}
.cs-under{display:flex;align-items:center;justify-content:flex-end;gap:12px 20px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,28px)}
.cs-pictured{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--slate)}
.cs-pictured svg{width:16px;height:16px;flex:none}
@media (max-width:700px){
  .cs-show.with-phone .cs-browser{margin-right:0}
  .cs-scroll{height:min(78vw,420px)}
  /* On a phone the frame is already phone-sized, so the small phone is left out. */
  .cs-phone{display:none}
}
.cs-browser,.cs-chrome,.cs-url,.cs-show,.cs-stage{min-width:0}

/* ---- A case study, laid out afresh (patch_fresh.py): paper ground, hairlines and mono
   labels like the Case studies index, one big picture of the site, and few boxes. ---- */
.cf-top{padding-bottom:clamp(40px,5vw,72px)}
.cf-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.cf-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.cf-crumb a{color:var(--slate)}
.cf-crumb .tag{margin:0}
.cf-head h1{margin:18px 0 0}
.cf-head .lede{margin:18px 0 0;max-width:40ch;text-align:left}
/* Once the site is live the link sits under the lede, on its own line and flush with it. */
.cf-head .live-link:not([hidden]){display:table;margin:16px 0 0}
.cf-facts{margin:0}
.cf-top .cs-show{margin-top:clamp(36px,4.6vw,64px)}
.cf-sh{display:flex;align-items:baseline;gap:18px;padding-bottom:16px;margin-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--rule)}
.dark .cf-sh{border-bottom-color:rgba(242,241,238,.16)}
.cf-sh .label{font-family:var(--mono);color:var(--signal)}
/* On ink the number takes the lighter orange: 5.1:1, where signal is 3.5:1. */
.dark .cf-sh .label{color:var(--signal-dark)}
.cf-sh h2{margin:0;font-size:clamp(28px,3.4vw,44px);font-weight:600;line-height:1.05;letter-spacing:-.015em;text-transform:none}
.dark .cf-sh h2{color:var(--paper)}
.cf-shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink);border-top-right-radius:var(--r-img);border-bottom-left-radius:var(--r-img)}
/* A hairline edge, so a mostly white page still stops where the picture does. */
.cf-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--rule-strong);pointer-events:none}
.dark .cf-shot::after{box-shadow:inset 0 0 0 1px rgba(242,241,238,.16)}
.cf-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cf-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px)}
.cf-p{margin:0}
.cf-p figcaption,.cf-in figcaption{display:flex;align-items:baseline;gap:12px;margin-top:14px;font-size:15px;color:var(--body)}
.cf-p figcaption span,.cf-in figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);flex:none}
.cf-p.now figcaption span{color:var(--signal)}
.cf-p.now figcaption{color:var(--ink);font-weight:500}
.cf-table{width:100%;margin-top:clamp(36px,4.6vw,60px);border-collapse:collapse}
.cf-table th{text-align:left;padding:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);border-bottom:1.5px solid var(--ink)}
.cf-table th:last-child{color:var(--signal)}
.cf-table td{width:50%;padding:18px 0;vertical-align:top;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.5}
.cf-table td.was{padding-right:clamp(20px,3vw,48px);color:var(--slate)}
.cf-table td.now{color:var(--ink);font-weight:500}
.cf-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.cf-in{margin:0}
.cf-in figcaption{flex-direction:column;gap:4px}
.cf-why-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px)}
.cf-why-c{border-top:1.5px solid var(--signal);padding-top:20px}
.cf-n{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--signal-dark,#F08A5D)}
.cf-why-c h3{margin:14px 0 0;font-size:19px;font-weight:600;line-height:1.3;color:var(--paper);text-transform:none;letter-spacing:0}
.cf-a{margin:8px 0 14px;color:var(--paper);font-weight:600;font-size:16px}
.cf-why-c p:not(.cf-a){color:var(--on-ink);font-size:15.5px;line-height:1.6}
.cf-x{margin-top:14px}
.cf-meas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
/* The heading's rule is the line above the measures, so they draw none of their own. */
.cf-meas li{display:grid;gap:12px;align-content:start}
.cf-meas b{font-size:19px;font-weight:600;line-height:1.3}
.cf-meas span{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.cf-meas span::after{content:"";flex:1;height:0;border-top:2px dashed var(--rule)}
.cf-note{margin:18px 0 0;font-size:14px;color:var(--slate)}
.cf-cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-top:clamp(40px,5vw,64px)}
.cf-ask{margin:10px 0 0;font-size:20px;font-weight:600;line-height:1.3}
.cf-next{display:flex;align-items:baseline;gap:16px;margin-top:22px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)!important;color:var(--ink);text-decoration:none}
.cf-next b{font-size:20px;font-weight:600}
.cf-next>span:last-child{margin-left:auto;font-size:20px;transition:transform .2s ease}
.cf-next:hover>span:last-child{transform:translateX(6px)}
.cf-end .caveat{margin-top:28px}
.caveat p{max-width:var(--measure)}
/* This site's own parts: a paragraph, and the staff area beside what is in it. */
.cf-body{margin:0;max-width:var(--measure);font-size:17px;line-height:1.6;color:var(--body);text-align:left}
.cf-sys{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.cf-lh{margin:28px 0 0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.cf-list{list-style:none;margin:12px 0 0;padding:0}
.cf-list li{padding:10px 0;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.5;color:var(--ink);text-align:left}
.cf-why-c h3+p{margin-top:10px}
.cf-table td,.cf-why-c p,.cf-head .lede,.cf-p figcaption,.cf-in figcaption,.cf-meas b{text-align:left!important;hyphens:manual!important;-webkit-hyphens:manual!important}
@media (max-width:980px){.cf-head{grid-template-columns:1fr;align-items:start}.cf-why-g{grid-template-columns:1fr}}
@media (max-width:860px){.cf-sys{grid-template-columns:1fr}}
@media (max-width:700px){
  .cf-pair,.cf-ins,.cf-meas{grid-template-columns:1fr}
  .cf-meas li+li{padding-top:16px;border-top:1px solid var(--rule)}
  .cf-table thead{display:none}
  .cf-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
  .cf-table td{display:block;width:auto;padding:0;border:0;font-size:15px}
  .cf-table td.was{padding:0 0 8px}
  .cf-table td::before{display:block;margin-bottom:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
  .cf-table td.was::before{content:"Before";color:var(--slate)}
  .cf-table td.now::before{content:"After";color:var(--signal)}
}

/* ---- Bandroom's case study: the parts only it has. The page stays in Tektura's look;
   the pictures of Bandroom (the seat chart, its type and colours) are in Bandroom's own,
   brass and ink, Archivo and Atkinson, with the arch: round at the top, square at the foot. ---- */
@font-face{font-family:BrHead;src:url(/assets/fonts/br-archivo-wide-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:BrText;src:url(/assets/fonts/br-atkinson.woff2) format("woff2");font-weight:200 800;font-display:swap}
.br-seat-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.br-big{margin:0;font-size:clamp(22px,2.3vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-align:left}
.br-seat-w>p:not(.br-big){margin:18px 0 0;max-width:42ch;text-align:left}
.br-key{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.br-key li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--body)}
.br-key i,.br-count i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--k)}
.br-key i.o,.br-count i.o{background:#fff;box-shadow:inset 0 0 0 1.5px #B9BCB6}
.br-key .y,.br-count .y{--k:#2BD67B}.br-key .m,.br-count .m{--k:#FFA51F}.br-key .n,.br-count .n{--k:#FF5A4E}.br-key .d,.br-count .d{--k:#4F8BFF}
.br-card{margin:0;padding:clamp(18px,2.4vw,28px);background:#FFC21F;color:#111311;border-radius:28px 28px 0 0;font-family:BrText,var(--sans)}
.br-card-top{display:grid;gap:4px}
.br-band{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.br-band span{display:grid;place-items:center;width:22px;height:22px;background:#13583A;color:#fff;font-size:12px;border-radius:5px 5px 0 0}
.br-card strong{margin-top:10px;font-family:BrHead,var(--sans);font-weight:900;font-size:clamp(34px,4.4vw,54px);line-height:1;letter-spacing:-.01em}
.br-card em{font-family:BrHead,var(--sans);font-weight:900;font-style:normal;font-size:clamp(19px,2vw,25px);line-height:1.1}
.br-chart{margin-top:clamp(16px,2vw,22px);padding:clamp(14px,2.4vw,30px);background:#FFF0C6;border-radius:22px 22px 0 0}
.br-chart svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;overflow:visible}
.br-seats circle{transition:fill .25s ease}
.br-seats circle.br-pop{animation:br-pop .42s cubic-bezier(.3,1.6,.5,1)}
.br-seats circle{transform-box:fill-box;transform-origin:center}
@keyframes br-pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:none}}
.br-count{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:15px;font-weight:600}
.br-count span{display:inline-flex;align-items:center;gap:7px}
.br-count b{font-variant-numeric:tabular-nums;min-width:1.2em;text-align:right}
@media (prefers-reduced-motion:reduce){.br-seats circle{transition:none}.br-seats circle.br-pop{animation:none}}

.br-phones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.br-phones li:nth-child(even){margin-top:clamp(24px,4vw,56px)}
.br-phones figure{margin:0}
.br-ph{padding:6px;background:#0B0D10;border-radius:28px;box-shadow:0 0 0 1.5px #2A2F36,0 26px 44px -22px rgba(0,0,0,.55)}
.br-ph img{display:block;width:100%;height:auto;border-radius:22px}
.br-phones figcaption{display:grid;gap:4px;margin-top:16px;font-size:15px;line-height:1.45;color:var(--body);text-align:left}
.br-phones figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.br-phones:focus-visible{outline:3px solid var(--signal);outline-offset:6px}

.br-why{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(36px,4vw,56px)}

.br-look-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.br-lk{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,28px);background:var(--white);box-shadow:inset 0 0 0 1px var(--rule);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.br-lk .label{color:var(--slate)}
.br-lk-logo img{width:100%;max-width:240px;height:auto;margin:6px 0 4px}
.br-lk p{margin:0;font-size:15px;line-height:1.55;color:var(--body);text-align:left}
.br-sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.br-sw li{display:grid;gap:2px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--slate)}
.br-sw li::before{content:"";height:58px;margin-bottom:8px;background:var(--c);border-radius:16px 16px 0 0;box-shadow:inset 0 0 0 1px rgba(17,19,17,.12)}
.br-sw b{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink)}
.br-sw-s{grid-template-columns:repeat(4,minmax(0,1fr))}
.br-sw-s li::before{height:26px;border-radius:50%;width:26px}
.br-t1{font-family:BrHead,var(--sans);font-weight:900;font-size:clamp(26px,2.6vw,34px)!important;line-height:1.05!important;color:#111311!important;margin-top:4px!important}
.br-t2{font-family:BrText,var(--sans);font-size:17px!important;line-height:1.45!important;color:#111311!important}
.br-t-n{font-family:var(--mono);font-size:11px!important;letter-spacing:.06em;color:var(--slate)!important;margin-top:-6px!important}
.br-look-more{margin:22px 0 0;font-size:15px;color:var(--body);text-align:left}

@media (max-width:980px){.br-seat-g{grid-template-columns:1fr}.br-look-g{grid-template-columns:1fr 1fr}.br-lk-logo{grid-column:1/-1}.br-why{grid-template-columns:1fr}}
@media (max-width:860px){
  .br-phones{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 18px;margin:0 -16px;scrollbar-width:thin}
  .br-phones li{flex:0 0 62vw;max-width:250px;scroll-snap-align:center}
  .br-phones li:nth-child(even){margin-top:0}
}
@media (max-width:700px){.br-look-g{grid-template-columns:1fr}}
.br-seat-w p,.br-lk p,.br-phones figcaption,.br-look-more,.br-why p{text-align:left!important;hyphens:manual!important;-webkit-hyphens:manual!important}