/* st-media-2026-08-29 - image and film blocks used across the US pages.
   Kept here rather than repeated as a <style> in every page. */
.st-media{margin:2.4rem 0}
.st-media figure{margin:0 0 1.6rem}
.st-media img,.st-media video{display:block;width:100%;height:auto;max-width:100%}
.st-media img{background:#d9d3c4}
.st-media video{aspect-ratio:16/9;background:#141210}
.st-media .st-detail{max-height:72vh;object-fit:cover}
.st-media figcaption{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#65655d;margin-top:.6rem}
.st-note{background:#efece3;border-left:2px solid #9b7d45;padding:1.2rem 1.5rem;margin:2.6rem 0;font-size:.95rem;max-width:40rem}
.st-note p{margin:0}


/* ---- us-match-uk-2026-08-30 : bring the page geometry into line with squareandtrue.uk ----
   Measured at 1800px, the UK site puts its page shell at 1536px and its image
   bands at 1504px, with the reading column at 736px inside them. This site had
   the shell at 1240px and every image trapped in the 720px reading column, so
   it read as one narrow ribbon with no rhythm. These two rules make the numbers
   match the UK site exactly. The reading column is unchanged.
   Delete this block to revert. */
@media (min-width:1240px){ :root{ --wrap: clamp(60rem,88vw,96rem); } }
@media (min-width:1100px){
  .wrap.narrow .st-media{ width:min(1504px,calc(var(--wrap) - 2rem),calc(100vw - 5rem)); margin-left:50%; transform:translateX(-50%); }
}
@media (min-width:1400px){ .wrap.narrow{ max-width:46rem; } }   /* 736px, the UK reading column */

/* ---- st-trio : the three-up image row the UK site uses between prose and full-width bands.
   Without an intermediate width the page alternates 736px text and 1504px images and nothing else,
   which is what made this site feel unlike the UK one. ---- */
.wrap.narrow .st-trio{ width:min(1504px,calc(var(--wrap) - 2rem),calc(100vw - 5rem)); margin-left:50%; transform:translateX(-50%);
  display:grid; gap:clamp(1.25rem,2.4vw,2rem); grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2.5rem,5vw,3.5rem); margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.st-trio figure{margin:0}
.st-trio img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--sawn)}
.st-trio figcaption{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:.6rem}
@media(max-width:900px){ .wrap.narrow .st-trio{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .wrap.narrow .st-trio{grid-template-columns:1fr;width:auto;margin-left:0;transform:none} }

/* ---- st-group-strip : the four sister brands, on the kitchens page ---- */
.st-group-strip{background:var(--chalk);border-top:1px solid var(--rule);padding-block:clamp(3rem,6vw,5rem);text-align:center;margin-top:clamp(3rem,6vw,5rem)}
.st-group-strip h2{font-weight:400;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;margin:0 0 1rem;color:var(--ink)}
.st-group-lede{max-width:56rem;margin:0 auto clamp(2.2rem,4vw,3.2rem);font-size:1.02rem;line-height:1.62;color:var(--mut)}
.st-group-marks{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.st-group-item{margin:0}
.st-group-link{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-decoration:none;color:inherit}
.st-group-plate{display:flex;align-items:center;justify-content:center;height:clamp(56px,5.4vw,84px);width:100%}
.st-group-plate img{max-height:100%;max-width:min(100%,180px);width:auto;height:auto;object-fit:contain;opacity:.86;transition:opacity .2s ease}
a.st-group-link:hover .st-group-plate img{opacity:1}
.st-group-cap{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);line-height:1.45;text-wrap:balance;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
a.st-group-link:hover .st-group-cap{color:var(--brass)}
@media(max-width:900px){.st-group-marks{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 1.5rem}}
@media(max-width:460px){.st-group-marks{grid-template-columns:1fr}}


/* ---- us-shell-align-2026-08-30 : one vertical edge down the page ----
   The widths already matched squareandtrue.uk; the ALIGNMENT did not. The shell
   (header, hero copy, footer, the disclosure note, the sister-brand strip) sat
   at 1536/132 while the image bands sat at 1504/148, so every image stepped
   16px in from the header and the footer, and the note hung off the left edge
   of the page entirely. On squareandtrue.uk the header brand, the footer and
   the image bands all share one edge (148 at 1800px) and only the hero copy is
   inset by a gutter (180). These rules reproduce that here, edge for edge.
   Delete this block to revert. */
@media (min-width:1240px){
  .mast,
  footer > .wrap,
  .st-group-strip > .wrap,
  section > .wrap:not(.narrow){ width:min(1600px,100%); max-width:none; margin-inline:auto; padding-inline:3rem; }
  .wrap.narrow .st-media,
  .wrap.narrow .st-trio{ width:min(1600px,100vw); padding-inline:3rem; }
  body{ overflow-x:clip; }
  .hero > .wrap{ padding-inline:3rem; }
}
body > .st-note{ margin-inline:max(1.125rem,calc(50% - 23rem)) !important; }


/* ---- us-home-close-2026-08-30 : the foot of the page ----
   Three things Torben picked up on the home page: too much air between the
   disclosure note, the sister-brand band and the closing block; the closing
   block left-aligned while everything around it is centred; and the "Make an
   inquiry" button drawn in #171814, the same ink as the footer it sits against,
   so it disappeared into the black. Delete this block to revert. */
section:has(> .wrap.narrow > .st-note){ padding-block:2rem }
.st-note{ margin-block:1.2rem }
.st-group-strip{ margin-top:0 !important; padding-block:clamp(2.5rem,4.5vw,3.75rem) }
.next{ padding-block:clamp(2.25rem,3.5vw,3rem) clamp(3.25rem,4.5vw,4.25rem) }
.next .wrap{ text-align:center }
.next .btn{ background:#8C6F3C; border:1px solid #8C6F3C; color:#F6F4EF }
.next .btn:hover,.next .btn:focus{ background:#755B2F; border-color:#755B2F; color:#F6F4EF }


/* ---- us-measure-and-rhythm-2026-08-30 : wider text, less air ----
   Torben: the body copy sat in a 736px ribbon while the images ran the full
   band above and below it, so every page had wide empty gutters, ~250px of
   nothing between sections, and went on for ever. Two changes: the reading
   column goes 736 -> 960px with the type up from 19.5 to 22px (75 -> 87
   characters a line, still a readable measure), and the vertical rhythm comes
   in by roughly half. Headings run the full column. Delete to revert. */
@media (min-width:1240px){
  .wrap.narrow{ max-width:70rem !important }
  .wrap.narrow p,
  .wrap.narrow li{ font-size:1.5rem; line-height:1.55 }
  .wrap.narrow p.note{ font-size:1.06rem; line-height:1.6 }   /* small print stays small print */
  .wrap.narrow p{ margin-bottom:1.1rem }
  body > .st-note{ margin-inline:max(1.125rem,calc(50% - 35rem)) !important }
  main > section,
  body > section{ padding-block:clamp(2.75rem,4.2vw,4rem) !important }
  .hero{ padding-block:clamp(5rem,8vw,7rem) clamp(3.5rem,5vw,4.5rem) }
  .st-media{ margin-block:1.8rem }
  .st-media figure{ margin-bottom:1.1rem }
  .wrap.narrow h2{ margin-top:2.2rem }
  /* the images were the real reason the pages ran on: a 1504px band at 3:2 is
     a 1000px wall of picture. Cap them so they read as bands, not billboards. */
  .st-media img{ max-height:66vh; object-fit:cover }
  .st-media video{ max-height:66vh }
}


/* ---- us-bands-and-close-2026-08-31 : the two things squareandtrue.uk has and
   this site did not — a full-bleed image band, and a dark band to close on.
   The UK page alternates: full-bleed hero, paper section, a photograph running
   the whole width of the screen, card grids, then a dark green band with the
   call to action. This site ran one continuous pale column from the hero to the
   footer, which is why it read flatter however wide the text was.
   Delete this block to revert. */

/* 1. the full-bleed band. Any .st-media carrying .st-band breaks the shell and
   runs the width of the window; its caption still lines up with everything else. */
.wrap.narrow .st-media.st-band{
  width:100vw; margin-left:calc(50% - 50vw); transform:none;
  padding-inline:0; margin-block:clamp(3rem,6vw,6.5rem);
}
.wrap.narrow .st-media.st-band figure{ margin-bottom:.9rem }
.wrap.narrow .st-media.st-band img{ width:100%; max-height:min(72vh,760px); object-fit:cover }
.wrap.narrow .st-media.st-band figcaption{ padding-inline:max(1.125rem,calc(50vw - 800px + 3rem)) }

/* 2. the closing band, drawn like the UK site's: fen green, chalk type,
   an outlined light button rather than a solid one. */
.next{ background:#24352d; color:#f6f4ef; padding-block:clamp(3.5rem,5.5vw,5.25rem) !important; box-shadow:inset 0 1px 0 rgba(217,211,196,.18) }
.next h2{ color:#f6f4ef }
.next p{ color:#e4e1d7 }
.next .ui{ color:#dad5c8 }
.next .btn{ background:transparent; border:1px solid #dad5c8; color:#f6f4ef }
.next .btn:hover,.next .btn:focus{ background:#f6f4ef; border-color:#f6f4ef; color:#171814 }


/* ---- us-section-rhythm-2026-08-31 : make the alternating sections actually read ----
   section.pale was #fffdfa against a #f6f4ef page — a three per cent difference,
   invisible on any screen, so the whole page read as one flat sheet. The UK site
   steps its banded sections to #efece3, which is soft but unmistakable. Same here.
   Delete this block to revert. */
section.pale{ background:#efece3 }


/* ---- group-centred-headings-2026-08-31 : the group standard ----
   Torben's decision: section headings centred across the group, as on
   reeveandco.com. The same carve-outs apply here as there — a heading that
   belongs to a card, a grid cell, a callout, a table or a list keeps its own
   alignment, and the photographic hero is left as composed. Body copy stays
   left-aligned; only the heading and its eyebrow centre.
   Delete this block to revert. */
section > .wrap > h2,
section > .wrap > h3,
.next > .wrap > h2{ text-align:center }
section > .wrap > span.ui,
.next > .wrap > span.ui{ display:block; text-align:center }


/* ---- us-whatsapp-2026-08-31 : WhatsApp in the header ----
   Added as a custom link on the main menu (no theme edit needed) and drawn in
   brass so it reads as a way to reach us rather than another page. The nav only
   holds nine items on one row above 1400px, so below that the link is hidden
   here and lives on the contact page instead — where it is written out in full
   with the country code, which an American visitor needs.
   Delete this block and the menu item to revert. */
.mast nav li.menu-wa a{ color:#9b7d45 }
.mast nav li.menu-wa a:hover,.mast nav li.menu-wa a:focus{ color:#171814 }
@media (max-width:1399px){ .mast nav li.menu-wa{ display:none } }


/* ---- us-enquiry-form-2026-08-31 : the enquiry form ----
   Contact Form 7 ships unstyled — Arial, browser-default boxes — which would
   have looked worse than no form at all. This dresses it in the site's own
   language: uppercase UI labels, chalk fields with a hairline rule, brass on
   focus, and the site's button. The column is held to 40rem so the fields do
   not run the full 1120px of the reading measure.
   Delete this block to revert the styling; deactivate Contact Form 7 to remove
   the form itself. */
.wpcf7{ max-width:40rem; margin-inline:auto; text-align:left }
.wpcf7-form label{
  display:block; margin:0 0 1.35rem;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#65655d; }
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form select,
.wpcf7-form textarea{
  display:block; width:100%; box-sizing:border-box; margin-top:.5rem;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem; line-height:1.5; letter-spacing:normal; text-transform:none;
  color:#171814; background:#fffdfa; border:1px solid #dfdacd; border-radius:0;
  padding:.8rem .9rem; }
.wpcf7-form textarea{ min-height:9.5rem; resize:vertical }
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{
  outline:none; border-color:#9b7d45; box-shadow:0 0 0 1px #9b7d45 }
.wpcf7-form input::placeholder,.wpcf7-form textarea::placeholder{ color:#9a9a90 }
.wpcf7-form input[type=submit]{
  width:auto; margin-top:.4rem; cursor:pointer;
  background:#9b7d45; border:1px solid #9b7d45; color:#f6f4ef; border-radius:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; padding:1rem 1.65rem; }
.wpcf7-form input[type=submit]:hover,.wpcf7-form input[type=submit]:focus{ background:#7d6438; border-color:#7d6438 }
.wpcf7-form .wpcf7-not-valid-tip{ font-size:.82rem; letter-spacing:normal; text-transform:none; color:#853b2d; margin-top:.4rem }
.wpcf7-form .wpcf7-response-output{ margin:1.6rem 0 0; padding:.95rem 1.1rem; border:1px solid #dfdacd; font-size:1rem; letter-spacing:normal; text-transform:none }
.wpcf7-spinner{ margin-left:.8rem }


/* ---- us-legal-line-2026-08-31 : the privacy and cookies links ----
   The footer is hardcoded in the theme and carried no route to either page, so
   neither was reachable from the site at all. Snippet ST-US-LEGAL-LINKS adds a
   slim line under the footer; this dresses it. Remove both once the links are
   in footer.php properly. */
.st-legal-line{ background:#171814; color:#8a8a80; padding:0 0 2rem }
.st-legal-line .wrap{ width:min(1600px,100%); max-width:none; margin-inline:auto; padding-inline:clamp(1.125rem,4vw,3rem) }
.st-legal-line a{ color:#8a8a80; text-decoration:none; border-bottom:1px solid rgba(138,138,128,.35);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase }
.st-legal-line a:hover{ color:#f6f4ef; border-bottom-color:#f6f4ef }
.st-legal-line span{ font-size:.66rem; opacity:.6 }


/* ---- us-kitchens-pairs-2026-08-31 : shorten the ranges page ----
   /kitchens/ ran to roughly 18,700px because each of the seven ranges stacks
   three full-width elements: the room shot, a detail, and the walkthrough film.
   The room shot still leads at full band width; the detail and the film now sit
   side by side underneath it, which takes a whole row out of every range.
   Scoped to this page only. Delete this block to put it back. */
@media (min-width:1100px){
  body.page-id-102 .wrap.narrow .st-media:not(.st-band){
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
  body.page-id-102 .wrap.narrow .st-media:not(.st-band) > figure{ margin-bottom:0 }
  body.page-id-102 .wrap.narrow .st-media:not(.st-band) > figure:first-child{ grid-column:1 / -1 }
  body.page-id-102 .wrap.narrow .st-media:not(.st-band) > figure:nth-child(2) img{
    aspect-ratio:16/9; max-height:none; object-fit:cover; object-position:center }
}


/* us-consent-banner-20260901 */
/* Complianz ships an unstyled blue/Arial banner. Dressed here in the US site's
   own language: chalk card, ink type, Georgia title, brass primary button,
   square corners, tracked uppercase labels. Both the plugin's CSS variables and
   the elements themselves are set, because the cascade order of Complianz's own
   :root block is not the same on every site in the group. */
:root{
  --cmplz_banner_background_color:#FFFDFA;
  --cmplz_banner_border_color:rgba(23,24,20,.16);
  --cmplz_banner_border_width:1px 1px 1px 1px;
  --cmplz_banner_border_radius:0 0 0 0;
  --cmplz_banner_width:540px;
  --cmplz_button_border_radius:0 0 0 0;
  --cmplz_text_color:#3F3A33;
  --cmplz_hyperlink_color:#8C6F3C;
  --cmplz_slider_active_color:#8C6F3C;
  --cmplz_text_font_size:13px;
  --cmplz_title_font_size:23px;
  --cmplz_button_font_size:11px;
  --cmplz_link_font_size:12px;
}
html body .cmplz-cookiebanner{
  background-color:#FFFDFA !important;
  border:1px solid rgba(23,24,20,.16) !important; border-radius:0 !important;
  box-shadow:0 18px 54px rgba(23,24,20,.18) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  padding:30px 30px 24px !important;
}
@media(min-width:768px){ html body .cmplz-cookiebanner{min-width:580px !important;max-width:calc(100vw - 40px) !important} }
html body .cmplz-cookiebanner .cmplz-title{
  font-family:Georgia,"Times New Roman",serif !important; font-weight:400 !important;
  line-height:1.18 !important; color:#171814 !important; margin-bottom:.45em !important;
}
html body .cmplz-cookiebanner .cmplz-message{line-height:1.62 !important;color:#3F3A33 !important}
html body .cmplz-cookiebanner .cmplz-buttons{display:flex !important;flex-wrap:wrap !important;gap:10px !important}
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  border-radius:0 !important; flex:1 1 auto !important; min-width:max-content !important; width:auto !important;
  font-family:Georgia,"Times New Roman",serif !important;
  text-transform:uppercase !important; letter-spacing:.13em !important; font-weight:400 !important;
  padding:12px 15px !important; font-size:10.5px !important;
  border-width:1px !important; border-style:solid !important;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease !important;
}
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept{
  background-color:#8C6F3C !important; border-color:#8C6F3C !important; color:#FFFDFA !important;
}
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options{
  background-color:transparent !important; border-color:rgba(23,24,20,.30) !important; color:#171814 !important;
}
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover{
  background-color:#24352D !important; border-color:#24352D !important; color:#FFFDFA !important;
}
html body .cmplz-cookiebanner .cmplz-links a{
  color:#8C6F3C !important; text-decoration:none !important;
  border-bottom:1px solid rgba(140,111,60,.55) !important; padding-bottom:1px;
}
html body .cmplz-cookiebanner .cmplz-categories .cmplz-category{border-color:rgba(23,24,20,.12) !important;border-radius:0 !important}
html body .cmplz-cookiebanner .cmplz-close{color:#6F6658 !important}
html body #cmplz-manage-consent .cmplz-manage-consent{
  background-color:#24352D !important; color:#FFFDFA !important;
  border:0 !important; border-radius:0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  text-transform:uppercase !important; letter-spacing:.12em !important;
  font-size:10.5px !important; padding:11px 16px !important;
}


/* ---- us-uk-design-system-20260904 : the squareandtrue.uk design system ----
   The US site was running a cut-down version of the brand: Georgia for
   everything, system-ui for the small caps, a slightly different palette and a
   heavy drop shadow under every photograph. squareandtrue.uk runs three
   self-hosted faces - Cormorant Garamond for display, Source Serif for
   reading, Inter for the tracked uppercase labels - over a tighter palette.
   This block brings the two into line without touching a template. The font
   files were copied across by one-off snippet ST-US-UK-FONTS and live in
   /wp-content/uploads/st-fonts/. Delete this block to revert. */

@font-face{font-family:'Display';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/st-fonts/cormorant-garamond-400.woff2) format('woff2')}
@font-face{font-family:'Display';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/uploads/st-fonts/cormorant-garamond-500.woff2) format('woff2')}
@font-face{font-family:'Display';font-style:italic;font-weight:400;font-display:swap;src:url(/wp-content/uploads/st-fonts/cormorant-garamond-400i.woff2) format('woff2')}
@font-face{font-family:'Body';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/st-fonts/source-serif-400.woff2) format('woff2')}
@font-face{font-family:'Body';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/uploads/st-fonts/source-serif-600.woff2) format('woff2')}
@font-face{font-family:'Body';font-style:italic;font-weight:400;font-display:swap;src:url(/wp-content/uploads/st-fonts/source-serif-400i.woff2) format('woff2')}
@font-face{font-family:'UI';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/st-fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'UI';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/uploads/st-fonts/inter-500.woff2) format('woff2')}

/* 1. the palette, taken from squareandtrue.uk exactly */
:root{
  --chalk:#F6F4EF; --ink:#191917; --fen:#2C382F; --brass:#8C6F3C;
  --sawn:#DAD5C8; --oxide:#8A3A2A;
  --rule:#E3DFD5; --mut:#6E6B62; --paper:#FFFFFF;
  --shadow:none;
  --shadow-soft:0 18px 48px rgba(35,28,18,.10);
  --focus-ring:0 0 0 3px rgba(140,111,60,.32);
}

/* 2. reading type */
body{
  font-family:Body,Georgia,'Times New Roman',serif;
  font-size:1.0625rem; line-height:1.72;
  font-variant-numeric:oldstyle-nums; font-kerning:normal;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:Display,Georgia,serif; font-weight:400;
  line-height:1.08; letter-spacing:.005em; text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.14}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2}
h4{font-size:1.15rem}
strong{font-weight:600}
/* Source Serif carries a larger x-height than Georgia, so 24px reads oversized
   where 24px of Georgia did not. 22px is the size the reading-column block
   above was aiming at. */
@media (min-width:1240px){
  .wrap.narrow p,.wrap.narrow li{ font-size:1.375rem; line-height:1.6 }
}

/* 3. the tracked uppercase labels - Inter, not system-ui */
.ui,.crumb,.price,figcaption,.st-media figcaption,.st-trio figcaption,
.st-group-cap,nav a,.mast nav a,.ensign,.btn,th,
.wpcf7-form label,.wpcf7-form input[type=submit],
.st-legal-line a,.st-legal-line span{
  font-family:UI,system-ui,-apple-system,'Segoe UI',sans-serif;
}
.ui,.crumb{font-size:.6875rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.ensign{font-size:.665rem;letter-spacing:.17em;color:var(--mut)}
.price{font-size:.6875rem;letter-spacing:.24em;color:var(--brass)}
figcaption,.st-media figcaption,.st-trio figcaption{font-size:.7rem;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}

/* 4. masthead */
header{background:rgba(246,244,239,.94);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--rule)}
.mark{font-family:Display,Georgia,serif;font-size:1.45rem;letter-spacing:.2em;font-weight:400}
.mast nav a{font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.mast nav a:after{background:var(--brass)}

/* 5. hero */
.hero .stand{
  font-family:Display,Georgia,serif;
  font-size:clamp(1.2rem,2.1vw,1.62rem); line-height:1.44;
  color:#E9E6DD; max-width:40rem;
}
.hero .ensign,.hero .ui,.hero .crumb{color:var(--sawn)}
.heroFoot{border-top:1px solid rgba(218,213,200,.32);background:none;gap:0}
.heroFoot div{background:rgba(20,26,22,.34);border-right:1px solid rgba(218,213,200,.28);padding:1.7rem 1.2rem}
.heroFoot div:last-child{border-right:0}
.heroFoot strong{font-family:Display,Georgia,serif;font-size:clamp(1.85rem,3.2vw,2.6rem);line-height:1;color:var(--chalk);margin-top:.35rem;font-weight:400}
.heroFoot .ui{font-size:.63rem;letter-spacing:.2em;color:var(--sawn);opacity:.85}

/* 6. buttons - outlined, as on the UK site */
.btn{
  background:transparent; border:1px solid var(--ink); color:var(--ink);
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  padding:.7rem 1.2rem; margin-top:1.65rem;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn:hover{background:var(--ink);color:var(--chalk);transform:translateY(-1px)}

/* 7. photography - no drop shadow */
figure img,.st-media img{box-shadow:none}

/* 8. callouts and notes */
.callout,.st-note{background:#EFECE3;border-left:2px solid var(--brass);border-radius:0}
.note{color:var(--mut)}

/* 9. tables */
table th{background:var(--fen);color:var(--chalk);font-size:.64rem;font-weight:500;letter-spacing:.2em;padding:.8rem .95rem}
table td{padding:.85rem .95rem;border-bottom:1px solid var(--rule);color:#33312B}
table tbody tr:nth-child(even) td{background:#FBFAF7}

/* 10. disclosure rows */
summary{font-family:Display,Georgia,serif;font-size:1.22rem}
details{border-bottom:1px solid var(--rule)}

/* 11. footer - fen green, as on the UK site, rather than near-black */
footer{background:var(--fen);color:var(--sawn)}
footer a{color:var(--sawn);opacity:.86}
footer a:hover{color:var(--chalk);opacity:1}
.st-legal-line{background:var(--fen);color:rgba(218,213,200,.72);box-shadow:inset 0 1px 0 rgba(218,213,200,.18)}
.st-legal-line a{color:rgba(218,213,200,.86);border-bottom-color:rgba(218,213,200,.35)}
.st-legal-line a:hover{color:var(--chalk);border-bottom-color:var(--chalk)}

/* 12. focus, for anyone using a keyboard */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}

/* 13. the enquiry form, in the new faces */
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],
.wpcf7-form select,.wpcf7-form textarea{font-family:Body,Georgia,serif;border-color:var(--rule);background:var(--paper)}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.wpcf7-form input[type=submit]{background:var(--fen);border-color:var(--fen)}
.wpcf7-form input[type=submit]:hover,.wpcf7-form input[type=submit]:focus{background:var(--ink);border-color:var(--ink)}

/* 14. the consent banner, in the new faces rather than Georgia */
html body .cmplz-cookiebanner,
html body .cmplz-cookiebanner .cmplz-title,
html body #cmplz-manage-consent .cmplz-manage-consent{font-family:Display,Georgia,serif !important}
html body .cmplz-cookiebanner .cmplz-message{font-family:Body,Georgia,serif !important}
html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{font-family:UI,system-ui,sans-serif !important;letter-spacing:.15em !important;font-size:10px !important}


/* ---- us-nav-and-hero-20260904 : the header menu and the hero scrim ----
   1. The theme printed the main menu as bare <li> elements with no <ul> around
   them (items_wrap was '%3$s'). Valid markup restored in header.php; this
   dresses the list and adds the mobile menu the site never had - eight links
   used to stack above the fold on a phone, bulleted, with no way to collapse
   them.
   2. The hero carried a flat 30 per cent black wash, so the standfirst sat over
   whatever the photograph happened to be doing. squareandtrue.uk uses a
   directional scrim, heavy where the type is and clearing to the right so the
   photograph still reads. Same here.
   Delete this block to revert. */

/* 1. the menu */
header{position:sticky}
.mast{position:relative}
.mast nav ul.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.35rem);flex-wrap:wrap}
.mast nav ul.menu li{margin:0;padding:0}
.navtoggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.55rem 0;color:var(--ink);font-family:UI,system-ui,sans-serif;font-size:.7rem;letter-spacing:.19em;text-transform:uppercase}
.navtoggle:hover{color:var(--brass)}

@media (max-width:1023px){
  .navtoggle{display:block}
  header nav#primary-nav{display:none}
  header.open nav#primary-nav{
    display:block;position:absolute;top:100%;left:0;right:0;z-index:40;
    background:var(--chalk);border-bottom:1px solid var(--rule);
    padding:.2rem clamp(1.125rem,4vw,3rem) 1.2rem;
  }
  header.open nav#primary-nav ul.menu{flex-direction:column;align-items:stretch;gap:0}
  header.open nav#primary-nav ul.menu li{width:100%;border-top:1px solid var(--rule)}
  header.open nav#primary-nav ul.menu li:first-child{border-top:0}
  header.open nav#primary-nav ul.menu li.menu-wa{display:block}
  header.open nav#primary-nav a{display:block;padding:.9rem 0;font-size:.72rem}
  header.open nav#primary-nav a:after{display:none}
}
@media (max-width:600px){
  .mast{flex-direction:row;align-items:center;padding:.85rem 0;gap:.75rem}
}
@media (max-width:700px){
  .mast .ensign{display:none}
}

/* 2. the hero scrim */
.hero:before{
  background:linear-gradient(100deg,
    rgba(18,24,20,.78) 0%,
    rgba(18,24,20,.64) 34%,
    rgba(18,24,20,.30) 62%,
    rgba(18,24,20,.14) 100%);
}
@media (max-width:700px){
  .hero:before{background:linear-gradient(180deg,rgba(20,26,22,.62) 0%,rgba(20,26,22,.82) 100%)}
  .heroFoot{grid-template-columns:1fr 1fr}
}


/* ---- us-note-centring-20260904 : the imagery disclosure ----
   The note is held to 40rem so it does not run the full 1120px reading column,
   but left-aligned inside that column it read as an accident rather than a
   decision. Centred, in line with the group standard for headings.
   Delete this block to revert. */
.wrap.narrow .st-note{ margin-inline:auto }
.st-note p{ font-family:Body,Georgia,serif }


/* ---- us-projects-pairs-20260904 : the two-up detail rows on /projects/ ----
   The projects page alternates a full-bleed band with a pair of square detail
   shots. .st-trio is a three-column grid and .st-media is a single column, so
   neither fitted; this is the same intermediate width as .st-trio, in two.
   Delete this block to revert. */
.wrap.narrow .st-pair{
  width:min(1504px,calc(var(--wrap) - 2rem),calc(100vw - 5rem));
  margin-left:50%; transform:translateX(-50%);
  display:grid; gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-block:clamp(2rem,4vw,3rem);
}
.st-pair figure{margin:0}
.st-pair img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--sawn)}
@media (max-width:700px){
  .wrap.narrow .st-pair{grid-template-columns:1fr;width:auto;margin-left:0;transform:none}
}
/* the range/location line above each project heading sits closer to it than a
   standalone eyebrow would */
.wrap.narrow > span.ui + h2{ margin-top:.7rem }


/* ---- us-quotes-20260904 : the client words on the home page ----
   Three quotes in a row, drawn as the UK site draws them: display face, a
   hairline top rule, the attribution in tracked small caps underneath.
   Delete this block to revert. */
.st-quotes{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.st-quotes blockquote{
  margin:0; border-top:1px solid var(--rule); padding-top:1.4rem;
}
.st-quotes blockquote p{
  font-family:Display,Georgia,serif;
  font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.44;
  color:var(--fen); margin:0 0 1rem; max-width:none;
}
.st-quotes cite{
  font-family:UI,system-ui,sans-serif; font-style:normal;
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mut);
}
@media (max-width:900px){ .st-quotes{grid-template-columns:1fr; gap:2rem} }


/* ---- us-journal-cards-20260904 : the journal index ----
   Drawn as squareandtrue.uk draws its card grids: paper card, hairline rule,
   brass kicker, a soft lift and a slow image scale on hover.
   Delete this block to revert. */
.st-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,2.6vw,2.4rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
a.st-card{
  display:block; background:var(--paper); border:1px solid var(--rule);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .32s ease, box-shadow .32s ease, border-color .2s ease;
}
a.st-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:rgba(140,111,60,.45) }
.st-card-img{ display:block; overflow:hidden; background:var(--sawn) }
.st-card-img img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  transition:transform .55s ease;
}
a.st-card:hover .st-card-img img{ transform:scale(1.025) }
.st-card-body{ display:block; padding:1.5rem 1.5rem 1.7rem }
.st-card-kicker{
  display:block; font-family:UI,system-ui,sans-serif; font-size:.63rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
}
.st-card-title{
  display:block; font-family:Display,Georgia,serif; font-weight:400;
  font-size:clamp(1.3rem,1.8vw,1.55rem); line-height:1.16;
  margin:.6rem 0 .55rem; color:var(--ink);
}
.st-card-text{ display:block; font-size:.95rem; line-height:1.62; color:#43413A }
.st-card-more{
  display:inline-block; margin-top:1.05rem;
  font-family:UI,system-ui,sans-serif; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mut);
}
a.st-card:hover .st-card-more{ color:var(--brass) }
@media (max-width:1100px){ .st-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .st-cards{grid-template-columns:1fr} }

/* journal articles read as articles: a little more air between the headings */
body[class*="page-child"] .wrap.narrow h2{ margin-top:2.6rem }


/* ---- us-footer-nav-and-breakpoint-20260904 ----
   1. The footer carried an address and a paragraph of company detail and not a
   single link to a page, so every route round the site depended on the header.
   It now carries the full list, which also let the header come down to eight
   items instead of eleven.
   2. With Projects, Journal and Questions added, the header wrapped to two rows
   at 1440. The mobile menu now takes over below 1200 rather than 1024, and the
   remaining items are tracked a shade tighter.
   Delete this block to revert. */
.foot-nav{ list-style:none; margin:.9rem 0 0; padding:0 }
.foot-nav li{ margin:0 0 .5rem }
.foot-nav a{
  font-family:UI,system-ui,sans-serif; font-size:.72rem; letter-spacing:.06em;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover{ border-bottom-color:var(--sawn) }

@media (min-width:1200px){
  .mast nav ul.menu{ gap:clamp(.7rem,1.15vw,1.15rem) }
  .mast nav a{ font-size:.645rem; letter-spacing:.13em }
}
@media (max-width:1199px){
  .navtoggle{ display:block }
  header nav#primary-nav{ display:none }
  header.open nav#primary-nav{
    display:block; position:absolute; top:100%; left:0; right:0; z-index:40;
    background:var(--chalk); border-bottom:1px solid var(--rule);
    padding:.2rem clamp(1.125rem,4vw,3rem) 1.2rem;
  }
  header.open nav#primary-nav ul.menu{ flex-direction:column; align-items:stretch; gap:0 }
  header.open nav#primary-nav ul.menu li{ width:100%; border-top:1px solid var(--rule) }
  header.open nav#primary-nav ul.menu li:first-child{ border-top:0 }
  header.open nav#primary-nav ul.menu li.menu-wa{ display:block }
  header.open nav#primary-nav a{ display:block; padding:.9rem 0; font-size:.72rem }
  header.open nav#primary-nav a:after{ display:none }
}


/* ---- us-readnext-and-skip-20260904 ----
   1. A "read next" pointer into the journal at the foot of the six main pages,
   so the articles are reachable from the pages people actually land on and not
   only from the menu.
   2. A skip link, and the styling for the <main> landmark added to the theme.
   Neither existed, so anyone on a keyboard had to tab through nine menu items
   on every page to reach the content.
   Delete this block to revert. */
.st-readnext{
  border-top:1px solid var(--rule); padding-top:1.3rem;
  margin:2.6rem auto 0; max-width:40rem;
}
.st-readnext p{ margin:.8rem 0 0; font-size:1.02rem; line-height:1.9 }
.st-readnext a{
  border-bottom:1px solid rgba(140,111,60,.4);
  transition:border-color .2s ease, color .2s ease;
}
.st-readnext a:hover{ color:var(--brass); border-bottom-color:var(--brass) }

.skip{ position:absolute; left:-9999px }
.skip:focus{
  left:1rem; top:1rem; z-index:99; position:fixed;
  background:var(--fen); color:var(--chalk);
  padding:.8rem 1.1rem; box-shadow:none;
  font-family:UI,system-ui,sans-serif; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
}
main#main{ display:block }

/* ==== uk-contract-20260906 ====================================================
   One block, written from squareandtrue.uk's own stylesheet, replacing the
   twenty-four dated patch blocks that were fighting each other.
   Revert: delete everything from this comment to the end of Additional CSS.
   ============================================================================ */

:root{
  --wrap: 1600px;
  --wrap-wide: 1600px;
  --measure: clamp(38rem, calc(38rem + (100vw - 1400px) * .32), 46rem);
}

/* the 1600 wrap, centred, with the UK's inline padding */
.wrap, .wrap-wide{
  width:auto !important;
  max-width:1600px !important;
  margin-inline:auto !important;
  padding-inline:clamp(1.25rem, 4vw, 3rem) !important;
}

/* the reading column: 672px at 1600, 736 at the cap */
.wrap.narrow, .narrow, .prose{
  max-width:var(--measure) !important;
  margin-inline:auto !important;
}
.prose > h2, .prose > h3{ text-align:center; }

@media (min-width:1400px){
  .prose, .wrap.narrow > p, .st-split-b > p{
    font-size:clamp(1.0625rem, -10.5px + 1.0625rem + .75vw, 1.25rem);
    line-height:1.66;
  }
  .prose h2{ font-size:clamp(1.75rem, -12.6px + 1.75rem + .9vw, 2.1rem); }
}

/* section rhythm */
main > section{ padding-block:clamp(3.25rem, 7vw, 5.25rem); }
main > section.pad-s{ padding-block:clamp(2.25rem, 5vw, 3.5rem); }

/* the two-column composition, 7fr / 5fr, as the UK .split */
.split, .st-split{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:start;
}
@media (max-width:900px){ .split, .st-split{ grid-template-columns:1fr; } }

/* full-bleed bands, as the UK .bleed */
.bleed, .st-media.st-band{
  width:100vw !important;
  max-width:none !important;
  margin-inline:calc(50% - 50vw) !important;
}
.bleed > img, .st-media.st-band img{ width:100%; height:auto; display:block; }
.bleed.crop, .st-media.st-band figure{ height:clamp(24rem, 62vh, 44rem); }
.bleed.crop img, .st-media.st-band figure img{ height:100%; object-fit:cover; object-position:50% 55%; }

/* pictures are children of the wrap, so they span 1504, not the reading column */
.wrap > .st-media, .wrap > figure, .wrap > .pair-wide, .wrap > .st-squares{
  width:auto;
  max-width:none;
  margin-inline:0;
}

/* the image ratio utilities */
.ph-img, .st-media img{ width:100%; height:auto; object-fit:cover; display:block; }
.r-band{ aspect-ratio:21/9; }
.r-wide{ aspect-ratio:16/9; }
.r-room{ aspect-ratio:3/2; }
.r-tall{ aspect-ratio:4/5; }
.r-sq{ aspect-ratio:1/1; }

/* two-up pairs, as the UK .pair-wide */
.pair-wide{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(24rem,100%),1fr));
  gap:clamp(1rem, 2vw, 1.6rem);
}

/* the closing band: heading left, prose and button right, all left-aligned */
.next > .wrap.narrow{
  max-width:1600px !important;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
  text-align:left;
}
.next > .wrap.narrow > .ui{ grid-column:1; grid-row:1; align-self:end; }
.next > .wrap.narrow > h2{ grid-column:1; grid-row:2; margin:.4rem 0 0; text-align:left; }
.next > .wrap.narrow > p{ grid-column:2; grid-row:1 / span 2; margin:0; }
.next > .wrap.narrow > .btn{ grid-column:2; grid-row:3; justify-self:start; margin-top:1.1rem; }
@media (max-width:900px){
  .next > .wrap.narrow{ grid-template-columns:1fr; }
  .next > .wrap.narrow > *{ grid-column:1 !important; grid-row:auto !important; }
}

/* the hero, at the UK's proportions */
.hero .wrap, .hero.tall .wrap{ padding-block:clamp(6rem, 17vw, 12rem); }

/* nothing on the home page is centred except the group strip */
body.home .prose > h2, body.home .prose > h3{ text-align:left; }
body.home main > section > .wrap > .st-intro,
body.home main > section > .wrap > .st-split-a{ max-width:608px; margin-inline:0; }



/* ==== uk-contract-home-20260906 : the home page's own grammar ================
   squareandtrue.uk's home page is not the inner-page layout. Its section
   introductions sit hard left in a 608px block and nothing is centred.
   ========================================================================== */

body.home main > section > .wrap > .ui,
body.home main > section > .wrap > h2,
body.home main > section > .wrap > p{
  max-width:608px;
  margin-inline:0;
  text-align:left;
}
body.home main > section > .wrap > h2{ margin-top:.35rem; }

/* no picture on this page stands taller than the tallest on the UK site */
body.home .st-media figure{ max-height:704px; overflow:hidden; margin:0 0 1rem; }
body.home .st-media figure img{ height:704px; object-fit:cover; object-position:50% 55%; }

/* the ranges read as the UK's card grid, three across */
.grid3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(27rem,100%),1fr));
  gap:clamp(2rem, 4vw, 3.5rem);
}
.rulebox{ background:var(--paper,#fff); border:1px solid rgba(31,29,26,.12); }
.rulebox figure{ margin:0; }
.rulebox figure img{ aspect-ratio:3/2; width:100%; height:auto; object-fit:cover; display:block; }
.rulebox > h3{ margin:1.15rem 0 .5rem; padding-inline:1.5rem; }
.rulebox > p{ padding-inline:1.5rem; }
.rulebox > p:last-child{ padding-bottom:1.6rem; }



/* ==== uk-contract-components-20260906 ======================================
   The US site's own component classes, given the UK's compositions:
   nothing stacks full width at natural height, nothing stands taller than
   the tallest picture on squareandtrue.uk.
   ========================================================================= */

.st-media{ margin-block:clamp(2rem, 4vw, 3rem); }
.st-media > figure{ margin:0; }
.st-media > figure img, .st-media > figure video{ width:100%; height:auto; display:block; }
.st-media > figure figcaption{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.7rem; }

/* pictures inside the reading column break out to the 1504 wrap, as on the UK site */
.wrap.narrow > .st-media, .prose > .st-media{
  width:auto;
  max-width:none;
  margin-inline:calc(50% - min(752px, 50vw - 3rem));
}

/* multi-picture groups become compositions, never a stack */
.st-media.st-pair, .st-media.st-trio, .st-media.st-squares{
  display:grid;
  gap:clamp(1rem, 2vw, 1.6rem);
}
.st-media.st-pair{ grid-template-columns:repeat(auto-fit, minmax(min(24rem,100%),1fr)); }
.st-media.st-trio{ grid-template-columns:repeat(auto-fit, minmax(min(21rem,100%),1fr)); }
.st-media.st-squares{ grid-template-columns:repeat(auto-fit, minmax(min(20rem,100%),1fr)); }
.st-media.st-pair > figure img{ aspect-ratio:16/9; object-fit:cover; }
.st-media.st-trio > figure img{ aspect-ratio:3/2; object-fit:cover; }
.st-media.st-squares > figure img{ aspect-ratio:1/1; object-fit:cover; }

/* the ceiling: the tallest picture on squareandtrue.uk is 704px */
main .st-media > figure img,
main .st-media > figure video{ max-height:704px; object-fit:cover; }

/* card grids */
.st-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(27rem,100%),1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.st-cards .st-card{ background:var(--paper,#fff); border:1px solid rgba(31,29,26,.12); }
.st-cards .st-card img{ aspect-ratio:3/2; width:100%; height:auto; object-fit:cover; display:block; }
.st-cards .st-card.st-card-wide{ grid-column:span 2; }
@media (max-width:1100px){ .st-cards .st-card.st-card-wide{ grid-column:span 1; } }

/* the client quotes run three across, as the UK quotes band */
.st-quotes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(20rem,100%),1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
}



/* ==== uk-contract-portraits-20260906 =======================================
   Only the first picture in a band runs edge to edge and takes the 21:9 crop.
   Anything after it keeps its own shape, capped at the UK's 704px, so a
   portrait photograph is never sliced into a letterbox of one drawer front.
   ========================================================================= */

.st-media.st-band > figure:not(:first-child){
  height:auto;
  width:auto;
  max-width:1504px;
  margin-inline:auto;
}
.st-media.st-band > figure:not(:first-child) img,
.st-media.st-band > figure:not(:first-child) video{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:704px;
  object-fit:contain;
  margin-inline:auto;
}

body.home .st-media > figure:not(:first-child){ max-height:none; }
body.home .st-media > figure:not(:first-child) img{
  height:auto;
  max-height:704px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  margin-inline:auto;
}

/* a lone portrait stands 4:5 and centred, as it does on the UK site */
.st-media:not(.st-pair):not(.st-trio):not(.st-squares) > figure:only-child img{
  max-height:704px;
  width:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
  margin-inline:auto;
}


/* ==== uk-contract-panels-20260906 ==========================================
   The specification table sits in a panel beside the reading column, as it
   does on every range and project page on squareandtrue.uk: quiet rules,
   a muted label column, no filled cells.
   ========================================================================= */

.panel{
  background:var(--paper, #fff);
  border:1px solid var(--rule, rgba(31,29,26,.14));
  padding:clamp(1.5rem, 3vw, 2.4rem);
}
.panel table{ width:100%; margin:0; border-collapse:collapse; background:transparent; }
.panel table th{
  background:transparent !important;
  color:var(--mut, #6e6b62) !important;
  font-weight:500;
  text-align:left;
  vertical-align:top;
  width:38%;
  padding:.72rem 1rem .72rem 0;
}
.panel table td{
  background:transparent !important;
  text-align:left;
  vertical-align:top;
  padding:.72rem 0;
}
.panel table tr + tr th,
.panel table tr + tr td{ border-top:1px solid var(--rule, rgba(31,29,26,.12)); }

.st-spec-split{ align-items:start; }
.st-spec-split > .prose{ margin-inline:0; }
@media (max-width:1000px){ .st-spec-split{ grid-template-columns:1fr; } }

.panel > h2, .panel > .h-sm{
  font-family:Display, Georgia, serif;
  font-size:clamp(1.5rem, 1.1vw + 1.2rem, 2.1rem);
  line-height:1.15;
  text-align:left;
  letter-spacing:.005em;
  margin:0 0 1.1rem;
}



/* ==== uk-contract-mobile-20260906 ==========================================
   A table is the one thing that will not fold. On a phone it scrolls inside
   its own box rather than pushing the whole page sideways.
   ========================================================================= */

@media (max-width:760px){
  main table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  main table th,
  main table td{ white-space:normal; }
}