:root{
  /* Layout: a watchmaker's catalogue. Stone-white pages, deep green bands, brass only where time and price matter. */
  --paper:#F6F2E9; --paper-2:#EDE8DB; --card:#FBF9F3; --white:#fff;
  --ink:#1B1D1A; --muted:#565C56; --line:#DBD5C6; --field:#CEC7B6;
  --green:#1E3B30; --green-2:#264A3C; --brass:#A9823A; --brass-2:#C9A45A;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.06;text-wrap:balance;font-optical-sizing:auto}
.display em{font-style:italic;color:var(--brass)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--brass);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass)}

/* an optional printed-paper grain, switched on with data-texture on the root */
:root[data-texture]{--grain:.4}
:root[data-texture="news"]{--paper:#F1EDE1;--paper-2:#E7E2D3;--card:#F8F5EC;--grain:.78}
:root[data-texture]::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;mix-blend-mode:multiply;opacity:var(--grain);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E") repeat;background-size:220px 220px}

/* the minute track of a dial, used as a divider */
.track{height:12px;background:
  repeating-linear-gradient(90deg,var(--brass) 0 1px,transparent 1px 60px) left bottom/100% 12px no-repeat,
  repeating-linear-gradient(90deg,var(--field) 0 1px,transparent 1px 12px) left bottom/100% 7px no-repeat}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:4px;border:1px solid transparent;font:600 15.5px/1 var(--body);letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn-sm{min-height:42px;padding:0 18px;font-size:14.5px}
.btn-green{background:var(--green);color:var(--paper)}
.btn-green:hover{background:var(--green-2)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-brass{background:var(--brass-2);color:var(--ink)}
.btn-brass:hover{background:#d6b46d}
.btn-line-light{border-color:rgba(245,243,238,.6);color:var(--paper)}
.btn-line-light:hover{background:var(--paper);color:var(--green)}
.btn svg{width:17px;height:17px;flex:none}
.btn-whatsapp-bar{appearance:none;background:var(--card);border:1px solid var(--field);border-radius:999px;width:48px;height:48px;display:inline-grid;place-items:center;color:var(--green);flex:none}
.btn-whatsapp-bar svg{width:22px;height:22px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(245,243,238,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:30px;min-height:80px}
/* the registered clock mark, shown on its own exactly as filed, next to the name set in Bodoni */
.logo{margin-right:auto;flex:none;display:flex;align-items:center;gap:14px}
.mark{position:relative;width:60px;height:60px;overflow:hidden;flex:none}
.mark img{height:60px;width:auto;max-width:none}
.mark::after{content:"®";position:absolute;right:-1px;bottom:-2px;font:600 9px/1 var(--body);color:var(--muted)}
.name{display:flex;flex-direction:column;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.name small{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.24em;color:var(--brass);margin-top:5px}
.nav{display:flex;gap:22px;font-weight:500;font-size:15px}
.nav a,.tel{position:relative;white-space:nowrap}
.nav a:hover,.tel:hover{color:var(--brass)}
/* the page you are on keeps a brass rule under it, so the header says where you are */
.nav a[aria-current=page]{color:var(--brass)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brass)}
.tel{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}

/* the phone menu: a button in the header and a panel that drops out of it */
.menu-btn{display:none;appearance:none;background:transparent;border:1px solid var(--field);border-radius:4px;width:44px;height:44px;place-items:center;color:var(--ink);cursor:pointer;flex:none}
.menu-btn:hover{border-color:var(--ink)}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.menu-btn .bar-2{transition:opacity .15s ease}
.menu-btn[aria-expanded=true] .bar-1{transform:translateY(5px) rotate(45deg);transform-origin:center}
.menu-btn[aria-expanded=true] .bar-2{opacity:0}
.menu-btn[aria-expanded=true] .bar-3{transform:translateY(-5px) rotate(-45deg);transform-origin:center}
.menu-panel{display:none;border-top:1px solid var(--line);background:var(--paper)}
.menu-panel.open{display:block}
.menu-panel .wrap{display:grid;padding:10px 0 18px}
.menu-panel a{padding:14px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:17px}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a[aria-current=page]{color:var(--brass);font-weight:700}
.menu-panel .menu-tel{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums;padding-top:18px}

/* hero */
.hero{padding:76px 0 84px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(46px,6.6vw,88px);margin-top:22px}
.lede{font-size:19px;color:var(--muted);max-width:33em;margin-top:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:36px;font-size:14.5px;color:var(--muted)}
.facts li{padding:0 18px;border-left:1px solid var(--line)}
.facts li:first-child{padding-left:0;border-left:0}
.dial-wrap{display:grid;justify-items:center;gap:18px}
/* the engraved plate, with the working dial laid exactly over the blank face in the picture */
.clockshot{position:relative;margin:0;width:min(100%,280px);line-height:0}
.clockshot img{width:100%;height:auto;mix-blend-mode:multiply}
.clockshot-face{position:absolute;left:31.87%;top:41.37%;width:37.03%;height:auto;transform:translate(-50%,-50%)}
.clockshot-face text{font-family:var(--display);font-weight:600}
.dial-cap{font-family:var(--display);font-style:italic;font-size:18px;text-align:center;max-width:19em;line-height:1.5;text-wrap:balance}
.dial-cap .pair{white-space:nowrap}
.dial-cap mark{background:none;color:var(--brass);font-style:normal;font-weight:700;font-size:1.34em;letter-spacing:.005em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(169,130,58,.45)}

/* sections */
.section{padding:96px 0}
.band{background:var(--paper-2)}
section[id],form[id]{scroll-margin-top:96px}
.section h2{font-size:clamp(36px,4.6vw,58px);margin-top:16px;max-width:16em}
.sub{color:var(--muted);margin-top:16px;max-width:36em}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:52px}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step .n{font-family:var(--display);font-style:italic;font-size:44px;line-height:1;color:var(--brass)}
.step h3{font-size:19px;font-weight:700;margin-top:16px}
.step p{font-size:15.5px;color:var(--muted);margin-top:8px}
.tip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;align-items:baseline;margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
.tip p{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.4vw,27px);max-width:30em}
.tip small{font-size:14px;color:var(--muted)}

/* order form */
.order-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.order-side{position:sticky;top:120px}
.next{margin-top:30px;display:grid;gap:14px}
.next li{display:grid;grid-template-columns:34px 1fr;gap:4px;font-size:15.5px;color:var(--muted)}
.next b{font-family:var(--display);font-style:italic;font-weight:500;font-size:20px;color:var(--brass);line-height:1.2}
.contact-card{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);font-size:15.5px}
.contact-card a{display:block;font-weight:600;font-size:18px;margin-top:4px}
.contact-card a:hover{color:var(--brass)}
.form{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:36px}
fieldset{border:0;padding:0;margin:0 0 30px;min-width:0}
legend{padding:0;margin-bottom:14px;font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.full{grid-column:1 / -1}
.field{display:block;min-width:0}
.lbl{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.lbl small{font-weight:400;color:var(--muted)}
.form input:not([type=radio]):not([type=checkbox]),.form select,.form textarea{display:block;width:100%;min-width:0;height:46px;padding:0 12px;border:1px solid var(--field);border-radius:4px;background:var(--white);color:var(--ink);font:400 16px/1.3 var(--body);-webkit-appearance:none;appearance:none}
.form textarea{height:auto;padding:11px 12px;line-height:1.45;resize:vertical}
.form select{padding-right:34px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%231B1D1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,59,48,.14)}
.seg{display:inline-flex;border:1px solid var(--field);border-radius:4px;overflow:hidden;background:var(--white)}
.seg label{position:relative}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;min-width:64px;padding:11px 18px;text-align:center;font-weight:600;font-size:14.5px;border-right:1px solid var(--field)}
.seg label:last-child span{border-right:0}
.seg input:checked + span{background:var(--green);color:var(--paper)}
.seg input:focus-visible + span{outline:2px solid var(--brass);outline-offset:-3px}
.yesno{display:flex;flex-wrap:wrap;gap:14px 26px}
.yesno .lbl{margin-bottom:6px}
.price-box{display:flex;align-items:center;border:2px solid var(--brass);border-radius:4px;background:var(--white)}
.price-box b{font-family:var(--display);font-weight:500;font-size:30px;color:var(--brass);padding:0 4px 0 16px}
.form .price-box input{border:0;height:62px;font-family:var(--display);font-size:30px;font-weight:600;box-shadow:none}
.price-note{font-size:14px;color:var(--muted);margin-top:8px}
[hidden]{display:none !important}
.times{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.form .times input[type=time]{width:auto;flex:0 1 150px;font-variant-numeric:tabular-nums}
.times .dash{font-size:15.5px;color:var(--muted)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.quick button{appearance:none;background:transparent;border:1px solid var(--field);border-radius:999px;padding:8px 15px;font:600 13.5px/1 var(--body);color:var(--muted);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.quick button:hover{border-color:var(--brass);color:var(--ink)}
.quick button[aria-pressed=true]{border-color:var(--green);background:var(--green);color:var(--paper)}
.hint{font-size:13.5px;color:var(--muted);margin-top:10px}
.hint.bad{color:#8C2F23;font-weight:600}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--muted);margin-top:4px}
.agree input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--green);flex:none}
.field-toggle{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin-bottom:16px;cursor:pointer}
.field-toggle input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--green);flex:none}
.agree a{text-decoration:underline;text-underline-offset:2px}
.form .btn{width:100%;margin-top:22px;min-height:56px;font-size:16.5px}
.form-note{font-size:14.5px;font-weight:600;color:var(--green);margin-top:12px;min-height:1px}
.form-note.bad{color:#8C2F23}

/* The loading loop at the top of the page: a mover wheels boxes out of the flats and into
   the van, then goes back for more. Drawn flat and chunky rather than shaded, and run off one
   9s clock so the walk, the wheel and the boxes stay in step without a timer in JavaScript. */
.scene{padding:30px 24px 0}
.scene-in{margin:0}
.ayp{width:100%;max-width:400px;height:auto;margin-inline:auto}
.ayp-line{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.ayp-thin{stroke-width:2.6}
.ayp-wall{fill:var(--card)}
.ayp-glass{fill:var(--paper-2)}
.ayp-hall{fill:var(--ink);opacity:.82;stroke:none}
.ayp-paint{fill:var(--green)}
.ayp-knob{fill:var(--brass-2);stroke:none}
.ayp-body{fill:var(--white)}
.ayp-deep{fill:var(--paper-2);stroke:none}
.ayp-band{fill:var(--green);stroke:none}
.ayp-bumper{fill:var(--green)}
.ayp-lamp{fill:var(--brass-2)}
.ayp-wheel-hub{fill:var(--ink)}
.ayp-roundel{fill:none;stroke:var(--brass)}
.ayp-type{fill:var(--brass);stroke:none;font:700 9px/1 var(--body);letter-spacing:.09em}
.ayp-box{fill:var(--brass-2)}
.ayp-coat{fill:var(--green)}
.ayp-cap{fill:var(--green)}
.ayp-skin{fill:var(--card)}
.ayp-eye{fill:var(--ink);stroke:none}
.ayp-boot{fill:var(--ink)}
/* limbs are drawn twice: a fat ink stroke for the outline, a thinner coloured one over it,
   so an arm or a leg has a cloth colour instead of reading as one black bar */
.ayp-limb{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.ayp-leg{fill:none;stroke:var(--muted);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.ayp-sleeve{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

.ayp-mover{animation:ayp-walk 9s linear infinite}
@keyframes ayp-walk{
  0%,4%{transform:translateX(112px)}
  37%,47%{transform:translateX(232px)}
  80%,100%{transform:translateX(112px)}
}

/* a little bounce in the step, which is what makes it read as a cartoon rather than a slide */
.ayp-bob{animation:ayp-bob .42s ease-in-out infinite}
@keyframes ayp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* the barrow wheel winds forward on the way out and unwinds on the way back, so it never
   looks as though it is rolling the wrong way */
.ayp-barrow{transform-box:fill-box;transform-origin:50% 50%;animation:ayp-roll 9s linear infinite}
@keyframes ayp-roll{
  0%,4%{transform:rotate(0deg)}
  37%,47%{transform:rotate(620deg)}
  80%,100%{transform:rotate(0deg)}
}

/* two drawn strides, cut between rather than tweened */
.ayp-pose-a{animation:ayp-pose-a .42s step-end infinite}
.ayp-pose-b{animation:ayp-pose-b .42s step-end infinite}
@keyframes ayp-pose-a{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes ayp-pose-b{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

/* the boxes leave the barrow at the van and are back in his hands at the door */
.ayp-carry{animation:ayp-carry 9s linear infinite}
@keyframes ayp-carry{
  0%,40%{opacity:1}
  44%,92%{opacity:0}
  97%,100%{opacity:1}
}
.ayp-load{animation:ayp-load 9s linear infinite}
.ayp-load-2{animation-name:ayp-load-2}
.ayp-load-3{animation-name:ayp-load-3}
@keyframes ayp-load{0%,41%{opacity:0}44%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes ayp-load-2{0%,43%{opacity:0}46%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes ayp-load-3{0%,45%{opacity:0}48%,92%{opacity:1}97%,100%{opacity:0}}

/* the street door stands edge-on while he is coming and going, and shut while he is away */
.ayp-door{transform-box:fill-box;transform-origin:0 50%;animation:ayp-door 9s linear infinite}
@keyframes ayp-door{
  0%,6%{transform:scaleX(.1)}
  16%,74%{transform:scaleX(1)}
  84%,100%{transform:scaleX(.1)}
}

/* anyone who has asked their machine to stop moving things gets the drawing, held still */
@media (prefers-reduced-motion:reduce){
  .ayp-mover,.ayp-bob,.ayp-barrow,.ayp-pose-a,.ayp-pose-b,.ayp-carry,.ayp-load,.ayp-door{animation:none}
  .ayp-mover{transform:translateX(176px)}
  .ayp-pose-b,.ayp-load{opacity:0}
  .ayp-door{transform:scaleX(.1)}
}

/* about */
.about-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;align-items:start}
.about-in .photo{margin:0;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:4px}
.about-in .photo img{width:100%;height:auto;aspect-ratio:2 / 3;object-fit:cover;object-position:50% 45%;border-radius:2px}
.about-in p + p{margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(36px,4vw,50px);line-height:1;font-variant-numeric:lining-nums}
.stats span{display:block;font-size:14.5px;color:var(--muted);margin-top:10px}

/* advice */
.advice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:44px}
.advice li{padding:24px 0;border-top:1px solid var(--line)}
.advice-ic{width:26px;height:26px;color:var(--brass);display:block;margin-bottom:10px}
.advice h3{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.2}
.advice p{font-size:15.5px;color:var(--muted);margin-top:8px}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:52px}
.review{border-top:1px solid var(--ink);padding-top:24px}
.review .q{font-family:var(--display);font-size:64px;line-height:.6;color:var(--brass);height:26px}
.review blockquote{font-family:var(--display);font-size:21px;line-height:1.4}
.review figcaption{font-size:14.5px;font-weight:600;margin-top:18px;color:var(--muted)}

/* call to action */
.cta{background:var(--green);color:var(--paper);padding:88px 0}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.cta h2{font-size:clamp(38px,5vw,64px)}
.cta h2 em{color:var(--brass-2)}
.cta .cta-row{margin-top:0}
.cta-contact{display:flex;flex-wrap:wrap;gap:16px 56px;margin-top:30px}
.cta-contact li{display:flex;flex-direction:column;gap:5px;min-width:0}
.cta-contact span{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}
.cta-contact a{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cta-contact a:hover{color:var(--brass-2)}

/* footer */
.foot{background:var(--paper-2);padding:64px 0 32px;font-size:15px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.foot .logo{display:inline-flex}
.foot p{color:var(--muted);margin-top:16px;max-width:22em}
.foot h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:14px}
.foot li{margin-top:6px}
.foot li a:hover{color:var(--brass)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* phone bar */
.mbar{display:none}

/* strip shown only on the draft address */
.draft-note{background:var(--ink);color:var(--paper-2);font-size:12.5px;text-align:center;padding:7px 16px}

@media (max-width:1180px){
  /* the standing phone number goes first — it is still in the menu, the bar and the footer */
  .top .tel{display:none}
}
@media (max-width:1060px){
  /* below this the row of links will not fit, so it becomes the menu button instead */
  .nav{display:none}
  .menu-btn{display:grid}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero{padding:48px 0 64px}
  .hero-in,.order-in,.about-in{grid-template-columns:minmax(0,1fr);gap:44px}
  /* once About us stacks to one column, read the story first and the van photo after it */
  .about-in .photo{order:2}
  /* on a narrow screen the two drawings stack into a column of pictures, so the clock post
     stands down and the loading scene at the top stays. The line underneath is about the
     clock, so it stands down with it rather than floating with nothing above it. */
  .clockshot,.dial-cap{display:none}
  .order-side{position:static}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews{grid-template-columns:minmax(0,1fr);gap:32px}
  .advice{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in > :first-child{grid-column:1 / -1}
  .section{padding:72px 0}
}
@media (max-width:640px){
  .top-in{min-height:68px}
  .mark{width:50px;height:50px}
  .mark img{height:50px}
  .name{font-size:17px}
  .top .tel,.top .btn{display:none}
  .steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .form{padding:24px 18px}
  .lede{font-size:17.5px}
  .facts{flex-direction:column}
  .facts li{padding:0;border-left:0}
  .mbar{display:grid;grid-template-columns:auto 1fr 1.4fr;align-items:stretch;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(245,243,238,.97);border-top:1px solid var(--line)}
  body{padding-bottom:72px}
  /* on a phone the drawing sits tighter to the header and keeps its gutters */
  .scene{padding:18px 16px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}