/* Canelos Tire Shop sample.

   Concept: his wall, then room to breathe. Aban saw the loud first version and the bland second one and asked for the
   middle: clean and easy on the eye, but clearly his shop.

   The black off his wall carries his real white lettering at the top of every page, and the first big photo shows the
   whole shop. The page moves from white to one soft gray to black so it has a rhythm, never two black sections in a row.
   The signature is "Do you have my size?", set on black like the boards on his wall.

   Headlines are Patua One, a sturdy slab with warmth that sits well next to hand-painted lettering. Reading text is
   Schibsted Grotesk, plain, with no slash in its zero. Yellow is a softer version of his banner, used on Call and the
   review stars and nowhere else. Nothing here is drawn, and the only pictures are their photos. */

/* ---------- fonts (self-hosted, SIL OFL) ---------- */
@font-face{font-family:"Patua One";src:url(fonts/patua-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --wall:#17181b;      /* wall paint: the header, black sections and the footer */
  --wall-up:#2e3035;   /* one step up on black */
  --page:#ffffff;
  --tint:#f3f3f1;      /* the one soft gray */
  --ink:#17181b;
  --ink-soft:#54565b;
  --line:#e2e2df;      /* quiet lines */
  --line-strong:#8b8d91; /* the edge of anything you tap or type in */
  --line-dark:#3a3c40;
  --soft-on-wall:#cfcfcb;
  --placeholder:#6f7175;
  --yellow:#ece06f;    /* his banner yellow, softened: Call and the stars only */
  --yellow-up:#f1e684; /* Call, pressed */
  --open-on-wall:#46d17c;
  --open-on-page:#127a3a;
  --head:"Patua One",Rockwell,Georgia,serif;
  --font:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --gut:16px;
  --bar-h:72px;
  --r-photo:12px;
  --outline-image:rgba(0,0,0,.1);
  --r-btn:8px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px;color-scheme:light}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.6 var(--font);font-synthesis:none;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
img{height:auto}
picture{display:block}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.16;margin:0;text-wrap:balance}
h1{font-size:clamp(32px,10vw,38px)}
h2{font-size:30px}
h3{font-size:22px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:24px}
li{margin-bottom:8px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
b,strong{font-weight:600}
figure{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.on-wall :focus-visible{outline-color:#fff}
.wrap{width:100%;max-width:calc(1116px + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.prose{max-width:68ch;min-width:0}
.soft{color:var(--ink-soft)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-64px;z-index:60;background:var(--page);color:var(--ink);padding:12px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:8px}
.i{width:20px;height:20px;fill:currentColor;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border:1px solid transparent;border-radius:var(--r-btn);font:600 18px/1.2 var(--font);text-decoration:none;text-align:center;cursor:pointer;transition:background-color 150ms var(--ease-out),transform 100ms var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}
.btn--call{background:var(--yellow);color:var(--ink)}
.btn--white{background:var(--page);color:var(--ink)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
@media (hover:hover) and (pointer:fine){
  .btn--call:hover{background:var(--yellow-up)}
  .btn--white:hover{background:var(--tint)}
  .btn--ghost:hover{background:rgba(23,24,27,.06)}
}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* ---------- the header: his wall, his lettering ---------- */
header{background:var(--wall);color:#fff}
.strip{font-size:clamp(15px,4.1vw,16px);line-height:1.3;border-bottom:1px solid var(--line-dark)}
.strip__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.strip .open{font-weight:500;text-wrap:balance}
.strip__addr{display:none;margin:0 0 0 auto;color:var(--soft-on-wall)}
.strip__tel{flex:none;display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.strip__tel:hover{text-decoration:underline}
.top__in{display:flex;align-items:center;gap:8px;min-height:88px;padding-block:8px}
.logo{display:flex;align-items:center;margin-right:auto;min-height:44px;color:#fff;text-decoration:none}
.logo img{width:auto;height:72px}
.wordmark{font:400 24px/1.1 var(--head)}
.wordmark small{display:block;font:400 17px/1.2 var(--font)}
.top__nav,.top__call{display:none}
.lang{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;font-weight:600;font-size:17px}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:72px;height:44px;padding:0 12px;background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-btn);color:#fff;font:600 17px/1 var(--font);cursor:pointer}
.menu-btn__close{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__open{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__close{display:inline}
.menu{border-top:1px solid var(--line-dark)}
.menu[hidden]{display:none}
.menu__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;padding-block:12px 24px}
.menu ul{margin:0;padding:0;list-style:none}
.menu li{margin:0}
.menu a{display:flex;align-items:center;min-height:48px;font-size:18px;line-height:1.2;text-decoration:none}
.menu a[aria-current]{font-weight:600}
.menu__where{grid-column:1/-1;margin:12px 0 0;padding-top:16px;border-top:1px solid var(--line-dark);font-size:17px;color:var(--soft-on-wall)}

/* ---------- open line and rating ---------- */
.open{display:flex;align-items:baseline;gap:8px;margin:0}
.open__dot{flex:none;width:9px;height:9px;border-radius:50%;background:transparent;transform:translateY(-1px)}
.is-open .open__dot{background:var(--open-on-page)}
.is-closed .open__dot{background:var(--placeholder)}
.on-wall .is-open .open__dot{background:var(--open-on-wall)}
.on-wall .is-closed .open__dot{background:var(--soft-on-wall)}
/* the rating sits on black so the stars read strong and clear */
.rate{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:44px;padding:8px 12px;border-radius:var(--r-btn);background:var(--wall);color:#fff;font-size:17px;font-weight:600;line-height:1.25;text-decoration:none}
.rate:hover{text-decoration:underline}
.stars{display:inline-flex;gap:2px;color:var(--yellow)}
.stars .i{width:18px;height:18px}

/* ---------- the photo that opens a page: big, inside the margins, soft corners ---------- */
.photo{overflow:hidden;border-radius:var(--r-photo);background:var(--tint)}
.photo img,.spot img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,50% 50%)}
.page-head .photo{max-width:var(--file-w,none)} /* never stretched past its real pixels */
.photo .frame,.spot .frame{aspect-ratio:4/3;border-radius:var(--r-photo)}
.spot{overflow:hidden;margin-bottom:48px;border-radius:var(--r-photo)}
.photo img,.spot img,.tile img,.shot img{outline:1px solid var(--outline-image);outline-offset:-1px}

/* ---------- home, first screen ---------- */
.hero{padding-top:16px}
.hero__text{padding-top:24px}
.hero h1 span{display:block}
.hero__name{margin-bottom:4px;font-size:.6em;line-height:1.2}
.hero .rate{margin-top:16px}
.hero__act{margin-top:16px}
.hero__line{margin:0 0 16px;font-size:19px;line-height:1.45;color:var(--ink-soft)}
.hero__act .btn{width:100%}
.hero__act .btn--call{display:none} /* a phone has Call in the bar at the bottom */

/* ---------- sections: white, one soft gray, black ---------- */
.sec{padding-block:56px}
.sec--first{padding-top:40px;padding-bottom:0}
.sec--tint{background:var(--tint)}
.sec--wall{background:var(--wall);color:#fff}
.sec--wall a:not(.btn){color:#fff}
.sec--wall .prose h2{margin-bottom:16px}
.sec__head{margin-bottom:24px;max-width:68ch}
.sec__note{margin:16px 0 0;max-width:60ch;color:var(--ink-soft)}

/* quotes */
.q{margin:0}
.q blockquote{margin:0}
.q blockquote p{margin:0 0 8px}
.q blockquote p::before{content:"\201C"}
.q blockquote p::after{content:"\201D"}
.q figcaption{font-size:17px;color:var(--ink-soft)}
.q--lead{max-width:40em}
.q--lead blockquote{font-size:21px;line-height:1.45}
.quotes{display:grid;gap:32px;margin-bottom:32px}
.quotes:last-child{margin-bottom:0}
.quotes--1 blockquote{font-size:21px;line-height:1.45;max-width:40em}

/* what we do: tiles from his photos, the rest as plain links */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin:0 0 24px;padding:0;list-style:none}
.tiles li{margin:0}
.tile{display:block;text-decoration:none}
.tile img,.tile .frame{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,50% 50%);border-radius:var(--r-photo)}
.tile__name{display:block;margin-top:8px;font:400 20px/1.2 var(--head)}
a.tile:hover .tile__name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.more{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
.more li{margin:0}
.more a,.more span{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---------- size check: the signature, on black ---------- */
.size{display:grid;gap:24px}
.size h2{font-size:34px}
.size__lead{margin:8px 0 0;max-width:52ch;color:var(--soft-on-wall)}
.size__form{display:grid;gap:24px;margin:0;min-width:0}
.field{min-width:0;margin:0;padding:0;border:0}
.field>label,.field>legend{display:block;margin:0 0 8px;padding:0;font-weight:600}
.size__input{display:block;width:100%;height:64px;padding:0 16px;background:var(--page);color:var(--ink);border:1px solid var(--page);border-radius:var(--r-btn);font:500 24px/1 var(--font);text-transform:uppercase;appearance:none}
.size__input::placeholder{color:var(--placeholder);opacity:1}
.size__input:focus{outline:2px solid #fff;outline-offset:2px}
.size__hint{margin:8px 0 0;font-size:17px;line-height:1.4;color:var(--soft-on-wall)}
.size__nudge{margin:8px 0 0;font-size:17px;line-height:1.4;font-weight:600}
.size__nudge:empty{display:none}
.size__pick{display:flex;flex-wrap:wrap;gap:24px 32px}
.seg{display:flex}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 16px;margin-left:-1px;border:1px solid var(--line-strong);background:transparent;font-weight:600;cursor:pointer;transition:background-color 100ms var(--ease-out),color 100ms var(--ease-out)}
.seg span:first-of-type label{margin-left:0;border-radius:var(--r-btn) 0 0 var(--r-btn)}
.seg span:last-of-type label{border-radius:0 var(--r-btn) var(--r-btn) 0}
.seg input:checked+label{background:var(--page);border-color:var(--page);color:var(--ink)}
.seg input:focus-visible+label{outline:2px solid #fff;outline-offset:2px;position:relative;z-index:1}
.size .btns .btn{flex:1 1 auto}
.size__desk{margin:0;padding:16px;background:var(--wall-up);border-radius:var(--r-btn)}
.size__desk[hidden]{display:none}
.size__desk p{margin:0}
.size__desk p+p{margin-top:8px}
.size__desk .msg{font-weight:600}
.size__only-desk{display:none;margin:0;font-size:17px;color:var(--soft-on-wall)}
.is-computer .size__only-desk{display:block}
.size__desk:not([hidden])+.size__only-desk,.size__form:has(.size__nudge:not(:empty)) .size__only-desk{display:none}

/* ---------- hours and where ---------- */
.visit{display:grid;gap:32px}
.visit address{font-style:normal;margin:16px 0;font-size:20px;line-height:1.4;font-weight:600}
.visit .open{margin-bottom:16px;font-weight:600}
.visit__facts{margin:0 0 16px;max-width:52ch}
.hours{width:100%;max-width:520px;border-collapse:collapse;margin:0}
.hours caption{text-align:left}
.hours th,.hours td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
.hours td{text-align:right;white-space:nowrap}
.hours tr:first-child th,.hours tr:first-child td{border-top:1px solid var(--line)}
.hours .is-today th,.hours .is-today td{font-weight:600}
.hours .today{margin-left:8px;font-size:17px;font-weight:400;color:var(--ink-soft)}

/* ---------- inner pages ---------- */
.page-head{padding-block:16px 40px}
.page-head+.sec:not(.sec--wall){padding-top:16px}
.crumbs{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;font-size:17px;color:var(--ink-soft)}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin-inline:8px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.page-head h1{margin-top:4px}
.page-head__lead{margin:12px 0 0;max-width:60ch;font-size:19px;line-height:1.5;color:var(--ink-soft)}
.page-head__act{margin-top:16px}
.page-head__act:empty{display:none}
.page-head__act .btns{display:none}
.body{display:grid;gap:40px}
.body h2,.body-plain h2{margin-top:40px;margin-bottom:12px;font-size:26px}
.body h2:first-child,.body-plain h2:first-child{margin-top:0}
.body__side{display:block;min-width:0}
.body__side h2{margin:0 0 8px;font-size:22px}
.body__side .more{display:block}
.shot{margin-block:32px;max-width:560px}
.body__side .shot{margin:0;max-width:340px}
.shot--strip{max-width:700px}
.shot--wide{max-width:800px;margin-block:0}
.shot picture,.shot img,.shot .frame{width:100%;aspect-ratio:var(--r);border-radius:var(--r-photo)}
.shot figcaption{margin-top:8px;font-size:17px;color:var(--ink-soft)}
.steps{margin:0 0 16px;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;margin:0;padding:12px 0 12px 40px;border-top:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:8px;font:400 24px/1.4 var(--head)}

/* reviews page */
.score{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.score__num{font:400 64px/1 var(--head)}
.score .stars{color:var(--ink)}
.score p{margin:0}
.score__btn{margin-bottom:48px}
.theme{margin-bottom:48px}
.theme:last-child{margin-bottom:0}
.theme h2{margin-bottom:4px}
.theme__note{margin:0 0 24px;color:var(--ink-soft)}
.theme__list{display:grid;gap:24px}
.reply blockquote span{display:block}

/* no-photo frame */
.frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;aspect-ratio:var(--r,4/3);padding:16px;background:var(--tint);border:1px dashed var(--line-strong);color:var(--ink);text-align:center;font-weight:600}
.frame small{max-width:32ch;font-size:17px;font-weight:400;line-height:1.3;color:var(--ink-soft)}

/* ---------- footer ---------- */
.foot{background:var(--wall);color:#fff}
.foot__in{display:grid;gap:32px;padding-block:48px 32px}
.foot h2{margin-bottom:8px;font-size:21px}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin:0}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot address{font-style:normal;margin-bottom:4px}
.foot address a{display:inline-flex;align-items:center;min-height:44px}
.foot__logo{display:inline-flex}
.foot__logo img{width:auto;height:88px}
.foot__hours{margin:0;color:var(--soft-on-wall)}
.foot__label{margin:0;padding-block:8px 16px;border-top:1px solid var(--line-dark);font-size:15px;line-height:1.4;color:var(--soft-on-wall)}
.foot__label a{display:inline-flex;align-items:center;min-height:44px}
.foot__pages{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.foot__follow{display:flex;flex-wrap:wrap;gap:0 16px}

/* ---------- phone bar ---------- */
.bar{position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:7px 12px calc(8px + env(safe-area-inset-bottom));background:var(--wall);border-top:1px solid var(--line-dark)}
.bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:56px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:transparent;color:#fff;font:600 clamp(15px,4.4vw,17px)/1.1 var(--font);text-decoration:none;transition:background-color 100ms var(--ease-out)}
.bar a:first-child{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.bar a:active{background:var(--wall-up)}
.bar a:first-child:active{background:var(--yellow-up)}
.bar a:focus-visible{outline-offset:1px}

/* On a small phone the top line drops "Closed now" and keeps when they're back, so it stays quiet. */
@media (max-width:479px){
  .strip .open__lead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- tablets and up ---------- */
@media (min-width:768px){
  :root{--gut:24px}
  body{padding-bottom:0}
  .bar{display:none}
  h1{font-size:44px}
  h2{font-size:36px}
  .top__in{min-height:104px;gap:12px}
  .logo img{height:88px}
  .top__call{display:inline-flex;min-height:48px;padding-inline:16px;white-space:nowrap;font-size:17px}
  .hero{padding-top:24px}
  .page-head{padding-block:24px 48px}
  .hero .photo img,.hero .photo .frame{aspect-ratio:1116/590}
  .page-head .photo img,.page-head .photo .frame{aspect-ratio:2/1}
  .page-head--tall .photo img,.page-head--tall .photo .frame,.spot img,.spot .frame{aspect-ratio:1246/745}
  .hero__text{padding-top:32px}
  .hero__act .btn{width:auto}
  .hero__act .btn--call{display:inline-flex}
  .sec{padding-block:80px}
  .sec--first{padding-top:56px;padding-bottom:0}
  .sec__head{margin-bottom:32px}
  .q--lead blockquote,.quotes--1 blockquote{font-size:26px;line-height:1.4}
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  .quotes--1{grid-template-columns:minmax(0,1fr)}
  .quotes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;margin-bottom:32px}
  .tile__name{margin-top:12px;font-size:24px}
  .size h2{font-size:42px}
  .visit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .spot{margin-bottom:64px}
  .page-head__act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px}
  .page-head__act .btns{display:flex}
  .body{grid-template-columns:minmax(0,1fr) 300px;gap:64px}
  .theme__list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 48px}
  .foot__in{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.7fr) minmax(0,.6fr);padding-block:64px 40px}
}

@media (min-width:900px){
  .strip__addr{display:block}
  .size{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
}

/* ---------- laptops ---------- */
@media (min-width:1060px){
  .top__nav{display:flex;align-items:center;gap:24px;margin-right:12px}
  .top__nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap}
  .top__nav a:hover{text-decoration:underline}
  .top__nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
  .menu-btn,.menu{display:none}
  .hero__text{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:48px}
  .hero__act{margin-top:8px;max-width:520px}
  .body{gap:96px}
}

@media (min-width:1200px){
  :root{--gut:32px}
  h1{font-size:52px}
  h2{font-size:38px}
  .sec{padding-block:96px}
  .sec--first{padding-top:64px;padding-bottom:0}
}

/* A small file stays at its real size, with Call and the rating beside it so the space isn't left empty. */
@media (min-width:900px){
  .page-head--small .wrap{--head-w:var(--file-w);display:grid;grid-template-columns:minmax(0,var(--head-w)) minmax(290px,1fr);column-gap:32px}
  .page-head--small .photo{grid-area:1/1;max-width:none}
  .page-head--small .page-head__act{grid-area:1/2;display:flex;flex-direction:column;align-items:stretch;align-self:center;gap:12px;margin:0}
  .page-head--small .page-head__act .btns{flex-direction:column}
  .page-head--small .page-head__act .btn{width:100%}
  .page-head--small .page-head__act .rate{justify-content:center;text-align:center}
  .page-head--small .crumbs,.page-head--small h1,.page-head--small .page-head__lead{grid-column:1/-1}
}

/* ---------- short laptop screens ----------
   The photo scales down whole, same crop and same shape, so the headline lands on the first screen. Taller screens keep
   the big size. Home works out its width from the window height, then Call and the size check sit beside the photo. */
@media (min-width:768px) and (max-height:879px){
  :root{--home-h:max(222px,calc(100vh - 300px));--head-h:max(210px,calc(100vh - 328px))}
  .top__in{min-height:88px}
  .logo img{height:72px}
  .hero{padding-top:16px}
  .page-head{padding-top:16px}
  .hero__text{padding-top:24px}
  .hero .photo{max-width:calc(var(--home-h) * 1116 / 590)}
  .page-head .photo{max-width:min(var(--file-w,9999px),calc(var(--head-h) * 2))}
  .page-head--tall .photo{max-width:calc(var(--head-h) * 1246 / 745)}
  .hero h1,.page-head h1{font-size:44px}
}
@media (min-width:900px) and (max-height:879px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,calc(var(--home-h) * 1116 / 590)) minmax(290px,1fr);column-gap:32px}
  .hero__text{display:contents}
  .hero .photo{grid-area:1/1;max-width:none}
  .hero__act{grid-area:1/2;align-self:center;margin:0;max-width:none}
  .hero__act .btns{flex-direction:column}
  .hero__act .btn{width:100%}
  .hero__main{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;padding-top:24px}
  .hero .rate{margin-top:0}
  .page-head .wrap{--head-w:min(var(--file-w,9999px),calc(var(--head-h) * 2));display:grid;grid-template-columns:minmax(0,var(--head-w)) minmax(290px,1fr);column-gap:32px}
  .page-head .photo{grid-area:1/1;max-width:none}
  .page-head__act{grid-area:1/2;display:flex;flex-direction:column;align-items:stretch;align-self:center;gap:12px;margin:0}
  .page-head__act .btns{flex-direction:column}
  .page-head__act .btn{width:100%}
  .page-head__act .rate{justify-content:center;text-align:center}
  .page-head .crumbs,.page-head h1,.page-head__lead{grid-column:1/-1}
  .page-head--tall .wrap{--head-w:calc(var(--head-h) * 1246 / 745)}
  .hero__act .rate{justify-content:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.bar a,.seg label{transition:none}
  .btn:active{transform:none}
}