/* Blossom's designs: the properties every part is themed from.

   A site sets these in its own theme.css for its business; the parts never name a colour, a typeface or a size of
   their own. The values here are a neutral example so that a part renders on its own, not a look to ship. */
:root{
  /* Colour. --brand is the business's main colour, for dark bands and the header's rule; --brand-2 the second, for
     buttons, numbers and the offset shadows. Each has the colour of words set on it. */
  --brand:#1f3d2c;
  --brand-ink:#ffffff;
  --brand-2:#7b1d2a;
  --brand-2-ink:#ffffff;
  --ink:#1d2320;              /* words on paper */
  --ink-soft:#4b534e;         /* quieter words */
  --paper:#f6f1e6;            /* the page */
  --paper-2:#ffffff;          /* cards, frames and lifted boxes */
  --tint:#e9e2d1;             /* the alternate light band */
  --dark:#15201a;             /* the dark band between light ones */
  --dark-ink:#e9ede6;
  --line:#cfc7b3;             /* thin rules */
  --photo-tint-rgb:16,18,22;  /* the colour laid over a photograph that has words on it, as r,g,b */

  /* Type. Headings are set in the display face; everything else in the body face. */
  --display-font:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body-font:"Source Sans 3",Arial,Helvetica,sans-serif;
  --display-weight:400;
  --display-case:none;        /* uppercase for a condensed sans */
  --display-tracking:0;
  --display-leading:1;        /* the main heading's line height */
  --h1:clamp(40px,6.2vw,90px);        /* the home page's opening: 40px on a phone, 89px at 1440 */
  --h1-inner:clamp(34px,4.4vw,60px);  /* an inner page's opening */
  --h2:clamp(32px,3.9vw,54px);        /* section headings */
  --h3:clamp(19px,1.6vw,23px);        /* tiles, cards, team */
  --body:17px;
  --small:15px;

  /* Shape. The hard offset shadow is the look's signature; --frame is the border round a photograph. */
  --shadow:12px;
  --shadow-small:6px;
  --shadow-colour:var(--brand-2);
  --radius:3px;
  --frame:4px;
  --frame-colour:var(--paper-2);

  /* Space. */
  --wrap:1200px;                       /* the content column, gutters included */
  --gutter:clamp(18px,3vw,32px);
  --band:clamp(48px,6.5vw,88px);       /* a band's padding above and below */
  --gap:clamp(20px,3vw,48px);          /* between the columns of a grid */

  /* Motion. */
  --quick:.25s;                        /* a hover response */
  --rise:.7s;                          /* the openings' entrance */
}

/* The bones every page shares: the reset, the type, the content column, the bands and their tones, and the two
   motions every part uses (the openings' entrance and the scroll reveal). Loaded after tokens.css, before the parts. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body-font);font-size:var(--body);line-height:1.6}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-2)}
h1,h2,h3,h4{font-family:var(--display-font);font-weight:var(--display-weight);text-transform:var(--display-case);letter-spacing:var(--display-tracking);line-height:1.1;margin:0 0 .5em;color:var(--brand)}
h1{font-size:var(--h1-inner)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p,ul,ol,dl{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.nw{white-space:nowrap}
.lead{font-size:clamp(17px,1.3vw,20px)}

/* Bands: full-width colour, content on the column. Alternate the tones so that sections do not all look alike. */
.band{padding:var(--band) 0}
.band.tight{padding:calc(var(--band) * .6) 0}
.tone-paper{background:var(--paper);color:var(--ink)}
.tone-paper-2{background:var(--paper-2);color:var(--ink)}
.tone-tint{background:var(--tint);color:var(--ink)}
.tone-brand{background:var(--brand);color:var(--brand-ink)}
.tone-brand-2{background:var(--brand-2);color:var(--brand-2-ink)}
.tone-dark{background:var(--dark);color:var(--dark-ink)}
:is(.tone-brand,.tone-brand-2,.tone-dark) :is(h1,h2,h3,h4){color:inherit}
:is(.tone-brand,.tone-brand-2,.tone-dark) a:not(.btn){color:inherit}

/* A small label above a heading. */
.eyebrow{font-family:var(--body-font);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2);margin:0 0 1em}
/* Full opacity on purpose: an element that moves in and ends under 90% opacity is reported as left faint. */
:is(.tone-brand,.tone-brand-2,.tone-dark) .eyebrow{color:inherit}

/* A section's heading and its line of words, as one block or as two columns. */
.section-head{max-width:46em;margin:0 0 clamp(24px,3vw,40px)}
.section-head h2{margin:0 0 .3em}
.section-head p{margin:0}
.section-head.two{max-width:none}
@media (min-width:900px){
  .section-head.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end}
  .section-head.two h2{margin:0}
}

/* Motion, only where the visitor has not asked for less: the page is complete and still without it. */
@media (prefers-reduced-motion:no-preference){
  /* The openings' entrance: heading, words and buttons rise in once, one after another. */
  @keyframes bd-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  /* The scroll reveal: a block rises the last 18px into place as it comes on screen. It starts at .7, never hidden, and is
     wholly in place once all of it is on the screen (entry 100%), at the foot of the page too. Put .reveal on a block, or
     .reveal-each on a list to reveal its items one by one. */
  @supports (animation-timeline:view()){
    @keyframes bd-reveal{from{opacity:.7;transform:translateY(18px)}to{opacity:1;transform:none}}
    .reveal,.reveal-each>*{animation:bd-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}

/* Part 1: the header. One row of logo, menu and one action from 1024px up; below that the menu folds behind the Menu
   button at the right, opened without JavaScript by the checkbox (hidden by opacity and size, not moved off the screen, so
   the keyboard still reaches it). The logo keeps its own size at every width. */
.site-header{position:relative;z-index:10;background:var(--paper-2);border-bottom:4px solid var(--brand)}
.top-bar{margin:0;background:var(--brand);color:var(--brand-ink);font-size:14px;line-height:1.3;padding:7px var(--gutter);display:flex;justify-content:space-between;gap:16px;white-space:nowrap;overflow:hidden}
.top-bar a{color:inherit;font-weight:700;text-decoration:none}
.top-bar a:hover{text-decoration:underline}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:84px}
.brand{display:flex;flex-direction:column;justify-content:center;flex:none;text-decoration:none;color:var(--ink)}
.brand img{height:56px;width:auto}
.brand-name{font-family:var(--display-font);font-weight:var(--display-weight);text-transform:var(--display-case);letter-spacing:var(--display-tracking);font-size:26px;line-height:1;color:var(--brand);white-space:nowrap}
.brand-line{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px;white-space:nowrap}
.menu{display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(10px,1.5vw,24px)}
.menu li a{display:block;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap;padding:6px 0;border-bottom:3px solid transparent}
.menu li a:hover,.menu li a[aria-current]{border-bottom-color:var(--brand-2)}
.menu-action{padding:10px 18px;font-size:15px}
.menu-box{position:absolute;opacity:0;width:1px;height:1px;margin:0;right:var(--gutter);bottom:30px}
.menu-button{display:none}
@media (max-width:1023px){
  .menu-button{display:inline-block;background:var(--brand-2);color:var(--brand-2-ink);font-weight:700;font-size:15px;line-height:1.2;padding:10px 18px;border-radius:var(--radius);cursor:pointer}
  .menu-box:focus-visible+.menu-button{outline:3px solid var(--brand);outline-offset:2px}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper-2);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px;border-bottom:4px solid var(--brand);box-shadow:0 14px 24px rgba(0,0,0,.15)}
  .menu-box:checked~.menu{display:flex}
  .menu ul{flex-direction:column;gap:0}
  .menu li a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu li a[aria-current]{border-bottom-color:var(--brand-2)}
  .menu .menu-action{margin-top:14px;text-align:center}
}
@media (max-width:599px){
  .top-bar .top-note{display:none}
  .top-bar{justify-content:center}
  .header-row{min-height:70px}
  .brand img{height:46px}
  .brand-name{font-size:22px}
  .brand-line{font-size:10px}
}
@media (max-width:479px){
  /* Beside the Menu button a long second line would push the row past a narrow phone's edge: the name alone stays. */
  .brand-line{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .menu li a{transition:border-color var(--quick),color var(--quick)}
  .menu-button{transition:background-color var(--quick)}
  .menu-button:hover{background:var(--brand)}
}

/* Part 2: the footer. Compact columns on the dark tone: the brand, where, when, how to reach it, and the pages. */
.site-footer{background:var(--dark);color:var(--dark-ink);font-size:var(--small);line-height:1.55;padding:calc(var(--band) * .8) 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr .8fr;gap:var(--gap);padding-bottom:32px}
.site-footer h3{font-family:var(--body-font);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.7;margin:0 0 .9em}
.site-footer p{margin:0 0 .8em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 6px}
.site-footer a{color:inherit}
.footer-brand img{height:52px;width:auto;background:var(--paper-2);padding:6px 10px;border-radius:var(--radius);margin-bottom:12px}
.footer-brand .brand-name{display:block;color:inherit;margin-bottom:8px}
.footer-legal{border-top:1px solid rgba(255,255,255,.18);padding:14px 0 18px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.footer-legal a{opacity:.85}
@media (max-width:899px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:479px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
}

/* Part 3: buttons, cards and photo frames. Every part uses these; their hover motion is the look's. */
.btn{display:inline-block;background:var(--brand-2);color:var(--brand-2-ink);border:2px solid var(--brand-2);text-decoration:none;font-family:var(--body-font);font-weight:700;font-size:16px;line-height:1.2;padding:12px 22px;border-radius:var(--radius);white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.alt{background:transparent;color:var(--brand-2)}
.btn.line{background:transparent;color:inherit;border-color:currentColor}
.btn.line:hover{background:var(--paper-2);color:var(--brand);border-color:var(--paper-2)}
.btn.light{background:var(--paper-2);color:var(--brand);border-color:var(--paper-2)}
.btn.light:hover{background:var(--brand-2);color:var(--brand-2-ink);border-color:var(--brand-2)}
/* On a band in the brand colour a solid button would vanish on hover, so it turns to paper; on the second colour it is paper to start. */
:is(.tone-brand,.tone-dark) .btn:hover{background:var(--paper-2);color:var(--brand);border-color:var(--paper-2)}
.tone-brand-2 .btn:not(.line){background:var(--paper-2);color:var(--brand-2);border-color:var(--paper-2)}
.tone-brand-2 .btn:not(.line):hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.more{font-weight:700;color:var(--brand-2);text-decoration:none}
.more::after{content:" \2192"}
.more:hover{text-decoration:underline}
:is(.tone-brand,.tone-brand-2,.tone-dark) .more{color:inherit}
.card{background:var(--paper-2);color:var(--ink);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-small) var(--shadow-small) 0 var(--shadow-colour)}
.card h3{margin:0 0 .4em}
.card p:last-child{margin:0}
.frame{margin:0;border:var(--frame) solid var(--frame-colour);border-radius:var(--radius);box-shadow:var(--shadow) var(--shadow) 0 var(--shadow-colour);background:var(--dark);overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
@media (max-width:599px){
  .btn{white-space:normal;text-align:center}
  .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform var(--quick),box-shadow var(--quick),background-color var(--quick),color var(--quick),border-color var(--quick)}
  .btn:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.25)}
  .card{transition:transform var(--quick),box-shadow var(--quick)}
  .card:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--shadow-small) + 3px) calc(var(--shadow-small) + 3px) 0 var(--shadow-colour)}
  .frame{transition:transform .3s,box-shadow .3s}
  .frame:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--shadow) + 3px) calc(var(--shadow) + 3px) 0 var(--shadow-colour)}
  .frame img{transition:transform .3s}
  .frame:hover img{transform:scale(1.04)}
}

/* Part 4: the inner-page opening. A band in the brand colour with a slanted slab of the second colour behind the words,
   the page's heading at the inner size, a line of words, and optionally a framed photo at the right. */
.page-opening{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 clamp(40px,5.5vw,72px);border-bottom:6px solid var(--brand-2)}
.page-opening::before{content:"";position:absolute;top:-10%;bottom:-10%;right:-6%;width:38%;background:var(--brand-2);opacity:.16;transform:skewX(-12deg)}
.page-opening .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center}
.page-opening h1{font-size:var(--h1-inner);line-height:1.02;margin:0 0 .3em;text-wrap:balance;max-width:14em}
.page-opening .lead{margin:0;max-width:40em}
.page-opening .eyebrow{margin-bottom:.8em}
.page-opening-photo{display:none;aspect-ratio:3 / 2;max-width:520px;margin:0 var(--shadow) var(--shadow) 0}
.page-opening.with-photo .page-opening-photo{display:block}
@media (min-width:900px){
  .page-opening.with-photo .wrap{grid-template-columns:7fr 5fr}
  .page-opening.with-photo .page-opening-photo{max-width:none;justify-self:end;width:calc(100% - var(--shadow))}
}
@media (prefers-reduced-motion:no-preference){
  .page-opening-words>*{animation:bd-rise var(--rise) ease-out backwards}
  .page-opening-words>:nth-child(2){animation-delay:.12s}
  .page-opening-words>:nth-child(3){animation-delay:.24s}
  .page-opening-photo{animation:bd-rise var(--rise) ease-out .2s backwards}
}

/* Part 5: the bold opening. The display heading, up to 90px at 1440 and 40px on a phone, beside a collage of one large
   and two small photographs that overlap a little, each in its frame with the hard shadow. */
.bold-opening{overflow:hidden;padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px)}
.bold-opening .wrap{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);align-items:center}
.bold-opening h1{font-size:var(--h1);line-height:var(--display-leading);margin:0 0 .35em;text-wrap:balance;max-width:10.5em}
.bold-opening .lead{max-width:32em;margin:0 0 1.5em}
.bold-opening .eyebrow{margin-bottom:1.2em}
.collage{position:relative;aspect-ratio:6 / 5;width:calc(100% - var(--shadow));max-width:600px}
.collage .frame{position:absolute}
.collage-1{left:0;top:0;width:78%;height:64%;z-index:1}
.collage-2{right:0;top:44%;width:46%;height:40%;z-index:2;--shadow-colour:var(--tint)}
.collage-3{left:6%;top:60%;width:42%;height:38%;z-index:3}
@media (min-width:900px){
  .bold-opening .wrap{grid-template-columns:1.1fr .9fr}
  .collage{max-width:none}
}
@media (prefers-reduced-motion:no-preference){
  .bold-opening-words>*{animation:bd-rise var(--rise) ease-out backwards}
  .bold-opening-words>:nth-child(2){animation-delay:.12s}
  .bold-opening-words>:nth-child(3){animation-delay:.24s}
  .bold-opening-words>:nth-child(4){animation-delay:.36s}
  .collage .frame{animation:bd-rise .8s ease-out backwards}
  .collage-1{animation-delay:.2s}
  .collage-2{animation-delay:.4s}
  .collage-3{animation-delay:.55s}
  /* The frames keep their hover from part 3; in the collage the lift is in place, not a move. */
  .collage .frame:hover{transform:none}
}

/* Part 6: the full-photo opening. The photograph fills the band; a tint in --photo-tint-rgb lies over all of it, deepest
   where the words are, so that white words read at every width whatever the photograph shows there. */
.photo-opening{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(520px,78vh,780px);color:#fff;padding:clamp(56px,8vw,112px) 0 clamp(44px,6vw,80px);border-bottom:6px solid var(--brand-2)}
.photo-opening-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photo-opening::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(var(--photo-tint-rgb),.92) 0%,rgba(var(--photo-tint-rgb),.72) 45%,rgba(var(--photo-tint-rgb),.42) 100%)}
.photo-opening .eyebrow{color:#fff;margin-bottom:1.2em}
.photo-opening h1{font-size:var(--h1);line-height:var(--display-leading);color:#fff;margin:0 0 .35em;text-wrap:balance;max-width:10.5em}
.photo-opening .lead{max-width:34em;margin:0 0 1.5em}
.photo-opening .btn:not(.line){background:var(--brand-2);color:var(--brand-2-ink);border-color:var(--brand-2)}
.photo-opening .btn:not(.line):hover{background:#fff;color:var(--brand);border-color:#fff}
.photo-opening .btn.line:hover{background:#fff;color:var(--brand);border-color:#fff}
@media (prefers-reduced-motion:no-preference){
  @keyframes bd-settle{from{transform:scale(1.04)}to{transform:none}}
  .photo-opening-img{animation:bd-settle 1.6s ease-out both}
  .photo-opening-words>*{animation:bd-rise var(--rise) ease-out backwards}
  .photo-opening-words>:nth-child(2){animation-delay:.12s}
  .photo-opening-words>:nth-child(3){animation-delay:.24s}
  .photo-opening-words>:nth-child(4){animation-delay:.36s}
}

/* Part 7: numbered service tiles. One column on a phone, two from 600px, and from 900px a four-column grid of mixed sizes
   whose first tile is the large one. Tiles are placed in the order written, never densely, so the numbers run along each
   row and then down; the rules by count below close the grid without a gap for 3 to 8 items. */
.tiles{counter-reset:tile;list-style:none;margin:0;padding:0 var(--shadow-small) var(--shadow-small) 0;display:grid;grid-template-columns:1fr;gap:14px}
.tile{counter-increment:tile;position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 22px;background:var(--paper-2);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-small) var(--shadow-small) 0 var(--shadow-colour)}
.tile::before{content:counter(tile,decimal-leading-zero);font-family:var(--display-font);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:34px;line-height:1;color:var(--brand-2)}
.tile h3{margin:0;line-height:1.2;color:var(--brand)}
.tile p{margin:0;font-size:var(--small);line-height:1.5;color:var(--ink-soft)}
.tile .more{margin-top:auto;font-size:var(--small);padding-top:6px}
.tile-photo{margin:4px 0 0;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius)}
.tile-photo img{width:100%;height:100%;object-fit:cover}
/* The large tile: in the brand colour, with a bigger number and name. */
.tile:first-child{background:var(--brand);color:var(--brand-ink);padding:26px 28px}
.tile:first-child::before{font-size:60px;color:var(--brand-ink)}
.tile:first-child h3{font-size:clamp(23px,2.2vw,32px);color:inherit}
.tile:first-child p{color:inherit;font-size:var(--body);opacity:.92}
.tile:first-child .more{color:inherit}
.tile:first-child .tile-photo{flex:1 1 auto;min-height:150px;max-height:260px;aspect-ratio:auto}
@media (min-width:600px){
  .tiles{grid-template-columns:1fr 1fr;gap:16px}
  .tile:first-child{grid-column:span 2}
  /* With the first tile across both columns, an even count leaves the last alone: it takes both columns too. */
  .tile:nth-child(even):last-child{grid-column:span 2}
}
@media (min-width:900px){
  .tiles{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto)}
  .tile:first-child{grid-column:span 2;grid-row:span 2}
  .tile:nth-child(even):last-child{grid-column:auto}
  /* By count, so that the grid closes without a gap and the order still reads along the rows:
     3: a wide first tile and two beside it;  4: the large tile beside 02 and 03, 04 wide under them;
     5: the large tile with two pairs;  6: a wide first tile, then 02 03, then 04 05 06 with 06 wide;
     7: the large tile, 02 03, 04 05, then 06 and 07 both wide;  8: the large tile, three pairs, 08 wide. */
  .tile:first-child:nth-last-child(3),.tile:first-child:nth-last-child(6){grid-row:span 1}
  .tile:nth-child(4):last-child,.tile:nth-child(6):last-child,.tile:nth-child(6):nth-last-child(2),.tile:nth-child(7):last-child,.tile:nth-child(8):last-child{grid-column:span 2}
}
@media (prefers-reduced-motion:no-preference){
  .tile{transition:transform var(--quick),box-shadow var(--quick)}
  .tile:hover{transform:translateY(-4px);box-shadow:calc(var(--shadow-small) + 2px) calc(var(--shadow-small) + 4px) 0 var(--shadow-colour)}
  .tile-photo img{transition:transform .3s}
  .tile:hover .tile-photo img{transform:scale(1.04)}
}

/* Part 8: the scrolling band. Still, the items wrap and centre inside a band no wider than the screen; with motion, the
   track becomes two copies side by side sliding left by half their width, which loops without a jump. */
.scrolling-band{overflow:hidden;padding:11px 0}
.scrolling-track{display:flex}
.scrolling-track ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;flex:1 1 auto}
.scrolling-track li{position:relative;white-space:nowrap;padding:3px 28px;font-family:var(--display-font);font-weight:var(--display-weight);font-size:clamp(15px,1.3vw,20px);line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
.scrolling-track li::after{content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;margin-top:-5px;background:currentColor;opacity:.55;transform:rotate(45deg)}
.scrolling-track .scrolling-copy{display:none}
@media (max-width:599px){
  .scrolling-track li{padding:2px 18px;font-size:14px}
  .scrolling-track li::after{width:7px;height:7px;margin-top:-4px;right:-4px}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes bd-scroll{to{transform:translateX(-50%)}}
  .scrolling-track{width:max-content;animation:bd-scroll 40s linear infinite}
  .scrolling-track ul{flex-wrap:nowrap;justify-content:flex-start;flex:none}
  .scrolling-track .scrolling-copy{display:flex}
  .scrolling-band:hover .scrolling-track{animation-play-state:paused}
}

/* Part 9: the photo collage section. Words in a narrow column, a mosaic of framed photographs beside them. On a phone the
   mosaic is two columns with the first photo across both; from 900px it is a six-column grid of mixed sizes, closed
   without a gap for 3, 4 or 5 photos, placed in the order written. */
.collage-section .wrap{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center}
.collage-words h2{margin:0 0 .4em}
.collage-words p:last-child{margin:0}
.mosaic{list-style:none;margin:0;padding:0 var(--shadow) var(--shadow) 0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(110px,28vw,180px);gap:clamp(12px,1.8vw,20px)}
.mosaic .frame{margin:0}
.mosaic li:first-child{grid-column:span 2}
@media (min-width:900px){
  .collage-section .wrap{grid-template-columns:4fr 8fr}
  .mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,11vw,150px)}
  /* 3 and 5: the first photo over four columns and two rows, the next two beside it; the fourth and fifth share the row below. */
  .mosaic li:first-child{grid-column:span 4;grid-row:span 2}
  .mosaic li:nth-child(2),.mosaic li:nth-child(3){grid-column:span 2}
  .mosaic li:nth-child(4),.mosaic li:nth-child(5){grid-column:span 3}
  /* 4: two large photos over two rows, two small ones stacked at the right. */
  .mosaic li:first-child:nth-last-child(4),.mosaic li:first-child:nth-last-child(4)~li:nth-child(2){grid-column:span 2;grid-row:span 2}
  .mosaic li:first-child:nth-last-child(4)~li:nth-child(3),.mosaic li:first-child:nth-last-child(4)~li:nth-child(4){grid-column:span 2;grid-row:span 1}
}

/* Part 10: the call-to-action band. The heading and a line of facts at the left, the phone number in display type and
   the buttons at the right; one column on a phone. */
.cta-band .wrap{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);align-items:center}
.cta-band h2{margin:0 0 .3em}
.cta-band p{margin:0}
.cta-band .cta-phone{font-family:var(--display-font);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:clamp(28px,3vw,42px);line-height:1.1;margin:0 0 .5em}
.cta-phone a{color:inherit;text-decoration:none;white-space:nowrap}
.cta-phone a:hover{text-decoration:underline}
@media (min-width:900px){
  .cta-band .wrap{grid-template-columns:1.2fr 1fr}
  .cta-side{justify-self:end;text-align:right}
  .cta-side .actions{justify-content:flex-end}
}

/* Part 11: text with a photo. One column on a phone, the photo first; from 900px the photo takes five columns of twelve
   at the left (.split), at the right (.flip), or four columns as a portrait beside text in two columns (.tall). */
.split{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center}
.split .frame{aspect-ratio:4 / 3;margin:0 var(--shadow) var(--shadow) 0;max-width:560px}
.split.tall .frame{aspect-ratio:3 / 4;max-width:400px}
.split-words h2{margin:0 0 .4em}
.split-words p:last-child{margin:0}
.split-words .eyebrow{margin-bottom:.8em}
@media (min-width:900px){
  .split{grid-template-columns:5fr 7fr}
  .split .frame{max-width:none}
  .split.flip .frame{order:2}
  .split.tall{grid-template-columns:4fr 8fr;align-items:start}
  .split.tall .split-words>div{columns:2;column-gap:var(--gap)}
  .split.tall .split-words>div p{break-inside:avoid}
}

/* Part 12: the price or menu list. Rows in columns (one on a phone, two from 600px, three with .three from 900px), each
   a name with its price at the right and a line of words under, divided by a thin rule. A group heading is a row of its
   own. No box, frame or shadow round an item: a long list stays light. */
.price-list{list-style:none;margin:0;padding:0;columns:1;column-gap:var(--gap)}
.price-list li{break-inside:avoid;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.price-list .item-name{font-weight:700}
.price-list .item-price{font-weight:700;color:var(--brand-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.price-list .item-words{grid-column:1 / -1;font-size:var(--small);line-height:1.5;color:var(--ink-soft)}
.price-list .item-group{display:block;border-bottom:2px solid var(--brand);padding:22px 0 6px;break-after:avoid}
.price-list .item-group:first-child{padding-top:0}
.price-list .item-group h3{margin:0;color:var(--brand)}
:is(.tone-brand,.tone-brand-2,.tone-dark) .price-list li{border-color:rgba(255,255,255,.25)}
:is(.tone-brand,.tone-brand-2,.tone-dark) .price-list :is(.item-price,.item-words,.item-group h3){color:inherit}
:is(.tone-brand,.tone-brand-2,.tone-dark) .price-list .item-words{opacity:.85}
@media (min-width:600px){
  .price-list{columns:2}
}
@media (min-width:900px){
  .price-list.three{columns:3}
}

/* Part 13: the gallery grid. Two columns on a phone; from 900px a six-column mosaic in a pattern of eight that repeats.
   Photos may be placed densely here: nothing is numbered, and each carries its own caption. */
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(150px,36vw,210px);gap:12px}
.gallery li{min-width:0}
.gallery figure{margin:0;height:100%;display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--paper-2);border-radius:var(--radius);box-shadow:0 1px 0 var(--line)}
.gallery img{width:100%;height:100%;min-height:0;object-fit:cover}
.gallery figcaption{font-size:13px;line-height:1.3;padding:8px 10px;color:var(--ink-soft);border-top:3px solid var(--brand-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery li:nth-child(5n+1){grid-column:span 2}
@media (min-width:900px){
  .gallery{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(130px,12vw,170px);grid-auto-flow:dense;gap:16px}
  .gallery li:nth-child(5n+1){grid-column:auto}
  /* The pattern of eight: a large photo with two small beside it (rows 1 and 2), a square with two wide beside it
     (rows 3 and 4), two half-width (row 5). Six photos fill four rows; eight fill five. */
  .gallery li:nth-child(8n+1){grid-column:span 4;grid-row:span 2}
  .gallery li:nth-child(8n+2),.gallery li:nth-child(8n+3){grid-column:span 2}
  .gallery li:nth-child(8n+4){grid-column:span 2;grid-row:span 2}
  .gallery li:nth-child(8n+5),.gallery li:nth-child(8n+6){grid-column:span 4}
  .gallery li:nth-child(8n+7),.gallery li:nth-child(8n+8){grid-column:span 3}
}
@media (prefers-reduced-motion:no-preference){
  .gallery img{transition:transform .3s}
  .gallery figure:hover img{transform:scale(1.04)}
}

/* Part 14: testimonials. One large quote in display type, centred and balanced; or cards in a row, one column on a
   phone, two from 600px, three from 900px. */
.quote-large{margin:0 auto;max-width:34em;text-align:center}
.quote-large p{font-family:var(--display-font);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:clamp(22px,2.3vw,32px);line-height:1.3;margin:0 0 .9em;text-wrap:balance;color:var(--brand)}
.quote-large p::before{content:"\201C";color:var(--brand-2);margin-right:.1em}
.quote-large p::after{content:"\201D";color:var(--brand-2);margin-left:.1em}
:is(.tone-brand,.tone-brand-2,.tone-dark) .quote-large p,:is(.tone-brand,.tone-brand-2,.tone-dark) .quote-large p::before,:is(.tone-brand,.tone-brand-2,.tone-dark) .quote-large p::after{color:inherit}
.quote-who{font-size:var(--small);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.quote-who cite{font-style:normal;font-weight:400;opacity:.8}
.quotes{list-style:none;margin:0;padding:0 var(--shadow-small) var(--shadow-small) 0;display:grid;grid-template-columns:1fr;gap:var(--gap)}
.quotes li{display:flex;flex-direction:column}
.quotes blockquote{margin:0 0 14px;flex:1 1 auto}
.quotes blockquote p{margin:0;font-size:var(--body);line-height:1.55}
.stars{color:var(--brand-2);letter-spacing:.12em;font-size:15px;margin:0 0 10px}
.quotes .quote-who{font-size:13px}
@media (min-width:600px){
  .quotes{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .quotes{grid-template-columns:repeat(3,1fr)}
}

/* Part 15: team cards. One column on a narrow phone, two from 480px, four from 900px (three with .three). The photo is
   4:3, framed, and never drawn wider than 240px, so a small portrait from the old site (200px) stays sharp. */
.team{list-style:none;margin:0;padding:0 var(--shadow-small) var(--shadow-small) 0;display:grid;grid-template-columns:1fr;gap:var(--gap)}
.team-photo{margin:0 0 16px;aspect-ratio:4 / 3;width:min(100%,240px);overflow:hidden;border-radius:var(--radius);border:var(--frame) solid var(--frame-colour);box-shadow:var(--shadow-small) var(--shadow-small) 0 var(--shadow-colour);background:var(--dark)}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team h3{margin:0;line-height:1.2}
.team-role{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-2);margin:5px 0 10px}
.team p{margin:0;font-size:var(--small);line-height:1.5;color:var(--ink-soft)}
:is(.tone-brand,.tone-brand-2,.tone-dark) .team :is(.team-role,p){color:inherit;opacity:.85}
@media (min-width:480px){
  .team{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .team{grid-template-columns:repeat(4,1fr)}
  .team.three{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:no-preference){
  .team-photo{transition:transform var(--quick),box-shadow var(--quick)}
  .team li:hover .team-photo{transform:translate(-3px,-3px);box-shadow:calc(var(--shadow-small) + 3px) calc(var(--shadow-small) + 3px) 0 var(--shadow-colour)}
}

/* Part 16: the contact block. Details at the left (five columns of twelve from 900px), the map at the right filling
   the height; one column on a phone with the map last. Time ranges stay on one line. */
.contact-block .wrap{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:stretch}
.contact-details h2{margin:0 0 .6em}
.contact-details h3{font-family:var(--body-font);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);margin:0 0 .8em}
.contact-details dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0 0 26px}
.contact-details dt{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-2);padding-top:4px}
.contact-details dd{margin:0}
.hours{list-style:none;margin:0 0 26px;padding:0;max-width:30em}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--small)}
.hours li span:first-child{font-weight:600}
.map-slot{min-height:320px;background:var(--tint);border-radius:var(--radius);overflow:hidden;display:grid}
.map-slot iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.map-link{display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;padding:32px;color:var(--ink);text-decoration:none;font-size:var(--small);background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0 / 48px 48px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0 / 48px 48px,var(--tint)}
.map-link strong{font-size:var(--body)}
.map-link:hover{text-decoration:underline}
.map-pin{width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--brand-2);transform:rotate(-45deg);margin-bottom:10px;box-shadow:inset 0 0 0 6px var(--paper-2)}
:is(.tone-brand,.tone-brand-2,.tone-dark) .contact-details :is(h3,dt){color:inherit;opacity:.85}
:is(.tone-brand,.tone-brand-2,.tone-dark) .hours li{border-color:rgba(255,255,255,.25)}
@media (min-width:900px){
  .contact-block .wrap{grid-template-columns:5fr 7fr}
}

/* Part 17: questions and answers. Each is a <details> on a paper tile with the second colour at its left edge and a
   plus that becomes a minus when it opens; one column on a phone, two from 900px. */
.questions{display:grid;grid-template-columns:1fr;gap:12px var(--gap);align-items:start}
.qa{background:var(--paper-2);color:var(--ink);border-radius:var(--radius);border-left:4px solid var(--brand-2);padding:0 20px}
.qa summary{cursor:pointer;list-style:none;font-weight:700;font-size:var(--body);line-height:1.4;padding:16px 40px 16px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--display-font);font-weight:var(--display-weight);font-size:30px;line-height:1;color:var(--brand-2)}
.qa[open] summary::after{content:"\2013"}
.qa summary:hover{color:var(--brand-2)}
.qa-answer{padding:0 0 18px;color:var(--ink-soft)}
.qa-answer p{margin:0 0 .8em}
.qa-answer p:last-child{margin:0}
@media (min-width:900px){
  .questions{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:no-preference){
  .qa summary{transition:color var(--quick)}
}

/* Part 18: the contact form's styling, for the markup forms.py writes: labels and boxes in one column, the boxes in
   the page's own 17px type so that a phone does not zoom in on them, the Send button as a .btn. A heading and a line
   of words sit beside the form from 900px. */
.form-band .wrap{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}
.form-words h2{margin:0 0 .4em}
.form-words p:last-child{margin:0}
.contact-form{display:grid;grid-template-columns:1fr;gap:6px;max-width:640px}
.contact-form label{font-weight:700;font-size:var(--small);letter-spacing:.02em;margin-top:12px}
.contact-form label:first-of-type{margin-top:0}
.contact-form input:not([type=hidden]):not([type=checkbox]),.contact-form textarea{font:inherit;line-height:1.4;color:var(--ink);background:var(--paper-2);border:2px solid var(--line);border-radius:var(--radius);padding:12px 14px;width:100%;margin:0}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:3px solid var(--brand-2);outline-offset:1px;border-color:var(--brand)}
.contact-form button{justify-self:start;margin-top:18px;background:var(--brand-2);color:var(--brand-2-ink);border:2px solid var(--brand-2);font:inherit;font-weight:700;font-size:16px;line-height:1.2;padding:12px 26px;border-radius:var(--radius);cursor:pointer}
.contact-form button:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
:is(.tone-brand,.tone-brand-2,.tone-dark) .contact-form input:not([type=hidden]):not([type=checkbox]),:is(.tone-brand,.tone-brand-2,.tone-dark) .contact-form textarea{border-color:transparent}
@media (min-width:900px){
  .form-band .wrap{grid-template-columns:5fr 7fr}
}
@media (prefers-reduced-motion:no-preference){
  .contact-form input,.contact-form textarea{transition:border-color var(--quick)}
  .contact-form button{transition:transform var(--quick),box-shadow var(--quick),background-color var(--quick),border-color var(--quick)}
  .contact-form button:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.25)}
}