/* ==========================================================================
   Conceito A BarberHouse
   Palette and marks are sampled from their own 2026 packages poster; see
   assets/BRIEF.md section 5 for where every value came from.
   ========================================================================== */

@font-face{font-family:Oswald;src:url(fonts/oswald-var.woff2) format('woff2');
  font-weight:200 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;src:url(fonts/oswald-var-ext.woff2) format('woff2');
  font-weight:200 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(fonts/archivo-var.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(fonts/archivo-var-ext.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0A0E13;          /* the page, a near-black carrying the navy's cast */
  --ink-2:#10161F;        /* raised surfaces */
  --navy:#0C1824;         /* sampled: the wordmark's letterforms */
  --red:#8A2A24;          /* sampled: the A, the pole's stripes. Fills only */
  --red-lit:#E0685A;      /* the same ink lifted until it passes AA on --ink */
  --bone:#DAD8D7;         /* sampled: the torn paper the wordmark sits on */
  --bone-2:#9AA0A6;       /* secondary text, 7:1 on --ink */
  --line:#232B36;

  --display:Oswald,'Arial Narrow',system-ui,sans-serif;
  --sans:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;

  --gut:clamp(20px,5vw,64px);
  --r:2px;                /* one radius for the whole page: near-square */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.005em}
p,ul,dl{margin:0}
ul{list-style:none;padding:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--bone);color:var(--ink);
  padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--red-lit);outline-offset:3px}

section{scroll-margin-top:92px}

/* ---------- shared type ---------- */
.h2{font-size:clamp(30px,4.6vw,58px);line-height:1.06;letter-spacing:-.005em}
.h2 .dim{color:var(--bone-2)}
.lead{color:var(--bone-2);max-width:46ch;font-size:1.02em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;border-radius:var(--r);
  font-family:var(--display);font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;
  transition:background-color .18s,border-color .18s,color .18s,translate .18s;
}
.btn--red{background:var(--red);color:var(--bone)}
.btn--red:hover{background:#A03127}
.btn--ghost{border-color:var(--line);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone-2);background:#151C26}
.btn:active{translate:0 1px}

.link{color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--red);padding-bottom:2px}
.link:hover{border-bottom-color:var(--bone)}

/* ---------- the barber pole ----------
   It stands in for the I in their wordmark, so it is the page's only rule. A real
   one turns, and so does this: the stripes live on a child that is rotated once and
   then translated by exactly one stripe period, which loops seamlessly and stays on
   the compositor. Animating background-position would repaint the full width every
   frame instead. */
.pole,.poleline{overflow:hidden;background:var(--bone)}
.pole::before,.poleline::before{
  content:'';position:absolute;left:-150%;top:-150%;width:400%;height:400%;
  background:repeating-linear-gradient(180deg,
    var(--red) 0 8px,transparent 8px 16px,var(--navy) 16px 24px,transparent 24px 32px);
  transform:rotate(-60deg);
}
.js .pole::before,.js .poleline::before{animation:barberspin 2.4s linear infinite}
@keyframes barberspin{
  from{transform:rotate(-60deg) translateY(0)}
  to  {transform:rotate(-60deg) translateY(32px)}
}

.poleline{position:absolute;left:0;right:0;bottom:0;height:6px;opacity:.9}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  height:72px;padding:0 var(--gut);
  background:var(--ink);border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__mark{display:block;line-height:0;flex:none}
.nav__mark img{width:150px;height:auto}
.nav__links{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;
  font-family:var(--display);font-size:14px;text-transform:uppercase;
  letter-spacing:.1em}
.nav__links a{text-decoration:none;color:var(--bone-2);padding:6px 0;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav__links a:hover{color:var(--bone);border-bottom-color:var(--red)}
.nav__cta{min-height:40px;padding:0 18px;font-size:13px}
/* Held back until the page has scrolled, so a phone never shows this and the
   hero's own button at the same time. Gated behind .js: without JavaScript the
   is-stuck class never lands, so the button simply stays visible. */
.js .nav__cta{opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.js .nav.is-stuck .nav__cta{opacity:1;visibility:visible}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:clip;   /* clip, not hidden: hidden would make this a
                                        scroll container and break view() below */
  display:flex;align-items:center;
  padding:clamp(44px,7vh,96px) var(--gut) clamp(72px,10vh,124px);
  min-height:min(720px,calc(100dvh - 72px));
}
.hero__text{position:relative;z-index:1;max-width:min(880px,68vw)}
.hero__mark{margin:0 0 clamp(22px,3.4vh,38px)}
/* capped at 360px: the mark's master is 720px wide, and 360 is the largest slot
   that still delivers 2x on a retina screen. Measured, not guessed. */
.hero__mark img{width:clamp(240px,30vw,360px);height:auto}
.hero h1{
  font-size:clamp(29px,3.6vw,50px);line-height:1.14;
  letter-spacing:-.005em;margin-bottom:.6em;padding-bottom:.08em;
  text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--red-lit);line-height:1.2}
.hero__sub{color:var(--bone-2);max-width:40ch;font-size:1.06em}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vh,40px)}

/* The razor lies across the hero at the angle it sits at in their wordmark, and
   runs off the right edge so it reads as the surface rather than as an icon. */
.hero__razor{
  position:absolute;z-index:0;pointer-events:none;
  right:-7%;top:63%;
  width:min(64vw,820px);translate:0 -50%;rotate:-24deg;
}
/* No drop-shadow filter here. The blade rotates forever, and a filter on a
   rotating element of this size re-rasterizes every frame and pins the renderer.
   The depth comes from the stroke and the fill instead. */
.razor{width:100%;height:auto;overflow:visible}
.razor .draw{stroke:var(--bone);stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;fill:#0E141C}
.razor .tang{fill:#0B1017}
.razor .blade-edge{stroke:var(--red-lit);stroke-width:1.4;fill:none}
.razor .pivot{fill:var(--ink);stroke-width:1.4}

/* ---------- pillars ---------- */
.pillars{padding:clamp(52px,8vh,104px) var(--gut);border-top:1px solid var(--line)}
.pillars__list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,34px);margin-top:clamp(30px,4vh,50px);
}
.pillars__list li{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(14px,1.15vw,17px);
  letter-spacing:.06em;line-height:1.3;color:var(--bone);
  padding-left:20px;position:relative;min-height:60px;display:flex;align-items:center;
}
.pole{position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:4px}

/* ---------- serviços ---------- */
.svc{padding:clamp(52px,8vh,100px) var(--gut);
  border-top:1px solid var(--line);background:var(--ink-2);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}
.svc__head{position:sticky;top:96px}
.svc__head .lead{margin:18px 0 26px}
.svc__groups{
  display:grid;gap:clamp(22px,2.6vw,40px) clamp(24px,3vw,48px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.svc__group h3{font-size:14px;letter-spacing:.16em;color:var(--bone-2);
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.svc__group li{padding:7px 0;font-size:1.02em}
.svc__note{margin-top:18px;color:var(--bone-2);font-size:.92em;max-width:30ch}

/* ---------- o trabalho ----------
   Their own posters pin photographs up as tilted cards with a thick white border,
   so the grid does the same rather than sitting square. Eight photographs, eight
   cells, four columns, two rows: no empty tile and no ragged bottom. Capped at
   1236px because the masters are 600px and a wider cell would be shown larger
   than its pixels support. */
.work{padding:clamp(48px,7vh,88px) 0 clamp(56px,8vh,96px);
  border-top:1px solid var(--line);overflow:clip}
.work > .h2{padding:0 var(--gut)}
/* max-width is border-box here, so the gutters have to be added back or the line
   wraps roughly two words early */
.work__note{padding:0 var(--gut);margin-top:14px;color:var(--bone-2);
  max-width:calc(46ch + var(--gut) * 2)}
/* Deliberately small. The masters are 600px, so a 134px picture area is shown at
   better than 2x on a retina screen, which is the only size at which this material
   looks crisp. Small also suits the device: a wall of snapshots, not a portfolio. */
.work__grid{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(10px,1.3vw,18px);
  max-width:1300px;margin:clamp(34px,4.5vh,52px) auto 0;padding:0 var(--gut);
}
.work__grid figure{
  margin:0;
  background:var(--bone);padding:6px 6px 22px;
  box-shadow:0 12px 26px rgb(0 0 0 / .55);
  transition:rotate .45s cubic-bezier(.16,1,.3,1),
             translate .45s cubic-bezier(.16,1,.3,1),
             box-shadow .45s;
}
.work__grid figure:nth-child(4n+1){rotate:-2.2deg}
.work__grid figure:nth-child(4n+2){rotate:1.4deg}
.work__grid figure:nth-child(4n+3){rotate:-.9deg}
.work__grid figure:nth-child(4n+4){rotate:2.4deg}
.work__grid figure:hover{rotate:0deg;translate:0 -7px;
  box-shadow:0 20px 38px rgb(0 0 0 / .6)}
.work__grid img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:saturate(.86) contrast(1.05) brightness(.96)}
.work__grid figure:hover img{filter:saturate(1) contrast(1.05) brightness(1)}

/* ---------- o quadro ----------
   Their own handwriting, photographed off the wall of the shop, pinned up the same
   way the gallery is, next to the other line they write on everything. */
.board{
  display:grid;grid-template-columns:min(340px,38vw) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(48px,7vh,88px) var(--gut);
  border-top:1px solid var(--line);background:var(--ink-2);
}
.board__img{margin:0;width:100%;
  background:var(--bone);padding:9px 9px 30px;rotate:-2deg;
  box-shadow:0 18px 38px rgb(0 0 0 / .55)}
.board__quote{margin:0;max-width:22ch}
.board__quote p{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(28px,4vw,50px);line-height:1.12;letter-spacing:-.005em}
.board__quote em{font-style:italic;color:var(--red-lit);
  line-height:1.2;display:inline-block;padding-bottom:.08em}

/* ---------- kids ---------- */
.kids{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(52px,8vh,100px) var(--gut);border-top:1px solid var(--line);
}
.kids__text .lead{margin:20px 0 28px}
/* Two snapshots pinned up, the same device as the gallery, overlapped. */
/* padding-right leaves room for the second card's tilt, which would otherwise
   push past the section's gutter and give the page horizontal overflow */
.kids__pics{display:flex;align-items:flex-end;justify-content:flex-end;
  padding:16px 10px 16px 0;max-width:100%}
.kids__pics figure{margin:0;background:var(--bone);padding:8px 8px 26px;
  box-shadow:0 16px 34px rgb(0 0 0 / .55);
  transition:rotate .45s cubic-bezier(.16,1,.3,1),translate .45s cubic-bezier(.16,1,.3,1)}
.kids__pics figure:first-child{width:min(284px,30vw);rotate:-2.4deg;z-index:1}
.kids__pics figure:last-child{width:min(204px,22vw);rotate:3deg;margin-left:-40px}
.kids__pics figure:hover{rotate:0deg;translate:0 -7px;z-index:2}
.kids__pics img{width:100%;height:auto}

/* ---------- visitar ---------- */
.visit{padding:clamp(52px,8vh,104px) var(--gut);
  border-top:1px solid var(--line);background:var(--ink-2)}
/* Explicit placement, not auto-fit. With auto-fit the two span-2 blocks landed
   in whichever column was left over and pushed the tag row off the right edge. */
.visit__grid{
  display:grid;gap:clamp(22px,2.8vw,40px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,4.5vh,56px);align-items:start;
}
.visit__block h3{font-size:13px;letter-spacing:.16em;color:var(--bone-2);
  margin-bottom:12px}
.visit__block p{margin-bottom:10px}
.visit__block--wide{grid-column:1 / span 3;grid-row:2}
.hours div{display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.hours dt{color:var(--bone-2)}
.hours dd{margin:0;font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line);border-radius:var(--r);
  padding:6px 12px;font-size:.86em;color:var(--bone-2)}
.visit__img{margin:0;grid-column:4;grid-row:1 / span 2;align-self:end;
  justify-self:end;width:min(300px,100%);
  background:var(--bone);padding:8px 8px 26px;rotate:1.6deg;
  box-shadow:0 16px 34px rgb(0 0 0 / .55)}
/* the img carries a width attribute for CLS; without this it would sit at that
   intrinsic width and leave the card padded out on one side */
.visit__img img{width:100%}

/* ---------- footer ---------- */
.foot{padding:clamp(48px,7vh,88px) var(--gut) clamp(40px,6vh,64px);
  border-top:1px solid var(--line);display:grid;gap:24px;justify-items:start}
.foot__mark{margin:0}
.foot__mark img{width:230px;height:auto}
.foot__meta{color:var(--bone-2);font-size:.92em}

/* ==========================================================================
   Motion. Every starting state below is gated behind html.js, so a visitor
   without JavaScript gets the finished page rather than an empty one.
   ========================================================================== */

/* --- reveals: scroll-driven where supported, IntersectionObserver otherwise --- */
.js .reveal{opacity:0;translate:0 22px}

@supports (animation-timeline:view()){
  .js:not(.no-sdt) .reveal{
    animation:rise both;
    animation-timeline:view();
    animation-range:entry 8% cover 26%;
  }
}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

.js.no-sdt .reveal{transition:opacity .7s cubic-bezier(.16,1,.3,1),
                              translate .7s cubic-bezier(.16,1,.3,1)}
.js.no-sdt .reveal.is-in{opacity:1;translate:0 0}

/* Photo cards get their own reveal, on opacity and scale only. The generic one
   animates translate, and an animation holding translate:0 would win over the
   card's hover lift for the rest of the page's life. */
.js .card{opacity:0}
@supports (animation-timeline:view()){
  .js:not(.no-sdt) .card{
    animation:cardin both;animation-timeline:view();
    animation-range:entry 4% entry 62%;
  }
}
@keyframes cardin{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
.js.no-sdt .card{transition:opacity .6s cubic-bezier(.16,1,.3,1),
                            scale .6s cubic-bezier(.16,1,.3,1);scale:.9}
.js.no-sdt .card.is-in{opacity:1;scale:1}

/* --- the razor ---
   It draws itself once, then keeps doing the one thing a razor does: it opens,
   rests open for most of the cycle, folds shut, and starts again. A highlight
   runs down the blade in between. Only rotate, translate and opacity are
   animated, so all of it stays on the compositor. */
.js .razor .draw{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.js .razor .handle{animation:stroke .9s .2s ease-out forwards,
                              inkin .6s .9s ease-out forwards}
.js .razor .pivot{animation:stroke .3s 1s ease-out forwards,
                             inkin .3s 1.15s ease-out forwards}
.js .razor .tang{animation:stroke .4s 1.1s ease-out forwards,
                            inkin .4s 1.3s ease-out forwards}
.js .razor .blade{animation:stroke 1.1s 1.2s ease-out forwards,
                             inkin .7s 1.9s ease-out forwards}
.js .razor .blade-edge{animation:stroke 1s 1.7s ease-out forwards}

.js .razor__blade{transform-origin:230px 60px;rotate:171deg;
  animation:bladecycle 16s 1.35s infinite both}
@keyframes bladecycle{
  0%   {rotate:171deg;animation-timing-function:cubic-bezier(.32,1.06,.3,1)}
  11%  {rotate:0deg}
  78%  {rotate:0deg;animation-timing-function:cubic-bezier(.6,0,.4,1)}
  88%  {rotate:171deg}
  100% {rotate:171deg}
}

/* the highlight travelling down the blade, and only while the blade is open */
.razor .sheenbar{opacity:0}
.js .razor .sheenbar{animation:sheen 16s 1.35s infinite both}
@keyframes sheen{
  0%,14%   {translate:230px 0;opacity:0}
  18%      {opacity:1}
  40%      {translate:-90px 0;opacity:0}
  44%      {translate:230px 0;opacity:0}
  48%      {opacity:1}
  70%      {translate:-90px 0;opacity:0}
  100%     {translate:-90px 0;opacity:0}
}

/* the whole razor breathes, so it never looks like a frozen sticker */
.js .hero__razor{animation:drift 13s 2s ease-in-out infinite alternate}
@keyframes drift{from{rotate:-24deg;translate:0 -50%}
                 to{rotate:-22.4deg;translate:0 calc(-50% - 10px)}}

@keyframes stroke{to{stroke-dashoffset:0}}
@keyframes inkin{to{fill-opacity:1}}

/* --- scroll-driven depth: the strip of snapshots slides a little against the
       page as its section passes, and the pinned chalkboard straightens up. Both
       are scrubbed by scroll position, so they cost no main-thread work. --- */
@supports (animation-timeline:view()){
  .js:not(.no-sdt) .work__grid{
    animation:driftx linear both;animation-timeline:view();animation-range:cover;
  }
  .js:not(.no-sdt) .board__img{
    animation:straighten linear both;animation-timeline:view();
    animation-range:entry 10% cover 70%;
  }
  .js:not(.no-sdt) .pillars__list li{
    animation:rise both;animation-timeline:view();animation-range:entry 10% cover 30%;
  }
  .js:not(.no-sdt) .pillars__list li:nth-child(2){animation-range:entry 6% cover 32%}
  .js:not(.no-sdt) .pillars__list li:nth-child(3){animation-range:entry 2% cover 34%}
  .js:not(.no-sdt) .pillars__list li:nth-child(4){animation-range:entry -2% cover 36%}
}
@keyframes driftx{from{translate:-26px 0}to{translate:26px 0}}
@keyframes straighten{from{rotate:-5.5deg;translate:0 14px}to{rotate:-.5deg;translate:0 -10px}}
.js .pillars__list li{opacity:1}

/* --- the hero's own copy arrives once, under its own steam --- */
.js .hero__text > *{opacity:0;translate:0 14px;
  animation:rise .8s cubic-bezier(.16,1,.3,1) forwards}
.js .hero__mark{animation-delay:.05s}
.js .hero h1{animation-delay:.18s}
.js .hero__sub{animation-delay:.3s}
.js .hero__acts{animation-delay:.42s}
/* app.js sets this when the intro has had its chance, or immediately if the page
   loaded in a background tab where the document timeline never advances */
.js.intro-done .hero__text > *{animation:none;opacity:1;translate:0 0}

/* set only while the page is hidden, where a scroll-driven timeline cannot
   advance either. Everything lands at its finished state so the page is never
   blank; a visitor who is actually looking at it still gets the reveals. */
.js.settled .reveal,.js.settled .card,
.js.settled .pillars__list li,.js.settled .work__grid,.js.settled .board__img{
  animation:none;opacity:1;translate:0 0;scale:1;
}
.js.settled .board__img{rotate:-2deg}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js.no-sdt .reveal{opacity:1;translate:0 0;animation:none;transition:none}
  .js .card,.js.no-sdt .card{opacity:1;scale:1;animation:none;transition:none}
  .work__grid figure{transition:none}
  .js .pole::before,.js .poleline::before{animation:none}
  .js:not(.no-sdt) .work__grid,.js:not(.no-sdt) .board__img,
  .js:not(.no-sdt) .pillars__list li{animation:none;translate:0 0;rotate:0deg}
  .board__img{rotate:-2deg}
  .js .hero__text > *{opacity:1;translate:0 0;animation:none}
  .js .razor .draw{stroke-dashoffset:0;fill-opacity:1;animation:none}
  .js .razor__blade{rotate:0deg;animation:none}
  .js .razor .sheenbar{animation:none;opacity:0}
  .js .hero__razor{animation:none}
  .work__grid img{transition:none}
  *{scroll-behavior:auto !important}
}

/* ==========================================================================
   Narrower viewports. Base rules are declared above; these only override.
   ========================================================================== */
@media (max-width:1100px){
  /* The services head is sticky and two-column on wide screens. Both have to go
     here, or the head sits over the list it is meant to introduce. */
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc__head{position:static}
  .svc__groups{margin-top:8px}
  .work__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1000px){
  .hero{min-height:0;padding-bottom:clamp(52px,7vh,80px)}
  /* animation:none first, so the drift keyframes cannot reinstate the desktop
     position over these values */
  .js .hero__razor,.hero__razor{animation:none;
    width:150vw;right:-38vw;top:auto;bottom:-6%;translate:0 0;rotate:-16deg;opacity:.55}
  .board,.kids{grid-template-columns:minmax(0,1fr)}
  .board__img{max-width:480px}
  .kids__pics{justify-content:flex-start}
}
@media (max-width:760px){
  .nav{gap:12px}
  .nav__mark img{width:104px}
  .nav__links{font-size:12px;letter-spacing:.06em;gap:12px}
  .visit__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visit__block--wide{grid-column:1 / span 2;grid-row:auto}
  .visit__img{grid-column:1 / span 2;grid-row:auto;width:min(340px,80vw)}
  .pillars__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board{justify-content:start}
  .board__img{width:min(300px,62vw)}
  .board__quote{max-width:none}
}
@media (max-width:560px){
  .nav__links a:nth-child(2){display:none}
  .hero__acts .btn{flex:1 1 100%}
  /* Two across, not eight: at 8 columns a phone shows thumbnails nobody can read. */
  .work__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .svc__groups{grid-template-columns:minmax(0,1fr)}
  .kids{grid-template-columns:minmax(0,1fr)}
  .kids__pics{justify-content:flex-start}
  .kids__pics figure:first-child{width:56vw}
  .kids__pics figure:last-child{width:38vw;margin-left:-26px}
}