/* Shym "Our Projects" page, new look. Design system B (Warm Nordic), rules in DESIGN.md.
   Every rule starts at .sp, the class on the page body of a project page with the new look,
   so nothing here can touch the rest of the site.
   Loaded by block 64 (inc/project-page.php), only on a project page that carries the mark.
   The page top follows the warehouse pages (shym-location.css): a full width hero with a plum
   shade, the Google rating line, and a cream facts bar that sits half on the hero. */

@font-face{font-family:"Albert Sans";src:url("../fonts/AlbertSans.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

.sp{
  --sp-ink:#26222F;--sp-body:#4A4451;--sp-muted:#645D6A;--sp-line:#E3DCD5;--sp-cream:#EEE9E5;
  --sp-white:#FFFFFF;--sp-orange:#B5412A;--sp-orange-deep:#9C3622;--sp-star:#F6BB06;
  --sp-font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--sp-font);color:var(--sp-body);background:var(--sp-white);
}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
/* the site sets the old font on every p and div with !important, so each part says the font again */
.sp,.sp h1,.sp h2,.sp h3,.sp h4,.sp p,.sp li,.sp a,.sp span,.sp strong,.sp b,.sp em,.sp div,.sp dt,.sp dd,.sp blockquote,.sp td,.sp th,.sp figcaption{font-family:var(--sp-font)!important}
.sp h1,.sp h2,.sp h3,.sp p,.sp ul,.sp dl,.sp dt,.sp dd,.sp blockquote,.sp figure{margin:0;padding:0}
.sp ul{list-style:none}
.sp img{display:block;max-width:100%;height:auto}
.sp a{text-decoration:none}

.sp-wrap{width:100%;max-width:1413px;margin:0 auto;padding:0 24px}
.sp-sec{padding:40px 0}
.sp-sec--last{padding-bottom:72px}

/* ---------- type ---------- */
.sp .sp-title{font-size:clamp(26px,2.8vw,30px);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--sp-ink);text-wrap:balance}
.sp .sp-h3{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--sp-ink)}
.sp .sp-copy p{margin:0 0 14px;max-width:70ch;font-size:16px;font-weight:400;line-height:1.65;color:var(--sp-body)}
.sp .sp-copy p:last-child{margin-bottom:0}
.sp .sp-copy strong{font-weight:600;color:var(--sp-ink)}
.sp .sp-copy a,.sp a.sp-link{color:var(--sp-orange);font-weight:600}
.sp .sp-copy a:hover,.sp .sp-copy a:focus-visible,.sp a.sp-link:hover,.sp a.sp-link:focus-visible{color:var(--sp-orange-deep)}
.sp .sp-small{font-size:14px;font-weight:400;line-height:1.5;color:var(--sp-muted)}
/* text link with a small arrow that moves right on hover */
.sp a.sp-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:1.3}
.sp a.sp-link::after{content:"";flex:0 0 16px;width:16px;height:16px;background:currentColor;transition:transform .25s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.sp a.sp-link:hover::after{transform:translateX(4px)}

/* ---------- buttons ---------- */
.sp .sp-btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sp a.sp-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:6px 22px;border:0;border-radius:999px;
  background:var(--sp-orange);color:var(--sp-white);font-size:15px;font-weight:600;line-height:1.2;text-align:center;transition:color .3s .12s,transform .2s}
/* primary: on hover, plum rises from the bottom with a curved top and fills the pill */
.sp a.sp-btn::before{content:"";position:absolute;z-index:-1;left:-10%;width:120%;bottom:0;height:175%;background:var(--sp-ink);border-radius:50% 50% 0 0/32% 32% 0 0;transform:translateY(101%);transition:transform .65s cubic-bezier(.6,.05,.2,1);pointer-events:none}
.sp a.sp-btn:hover::before,.sp a.sp-btn:focus-visible::before{transform:translateY(0)}
.sp a.sp-btn:active{transform:scale(.97)}
/* secondary: plum outline, fills plum on hover */
.sp a.sp-btn--2{background:transparent;color:var(--sp-ink);box-shadow:inset 0 0 0 1.5px var(--sp-ink);transition:background .25s,color .25s,transform .2s}
.sp a.sp-btn--2::before{display:none}
.sp a.sp-btn--2:hover,.sp a.sp-btn--2:focus-visible{background:var(--sp-ink);color:var(--sp-white)}
/* on the dark hero the rise is cream with plum words, and the second button is a white outline */
.sp .sp-hero a.sp-btn:not(.sp-btn--2)::before{background:var(--sp-cream)}
.sp .sp-hero a.sp-btn:not(.sp-btn--2):hover,.sp .sp-hero a.sp-btn:not(.sp-btn--2):focus-visible{color:var(--sp-ink)}
.sp .sp-hero a.sp-btn--2{color:var(--sp-white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.sp .sp-hero a.sp-btn--2:hover,.sp .sp-hero a.sp-btn--2:focus-visible{background:rgba(255,255,255,.12);color:var(--sp-white)}

/* ---------- hero, full width ----------
   The same top as the category page: a plum band, the words at the left, the photo at the right,
   and the photo melts into the plum on its left edge. The shade is the SAME as the category page's
   (.shym-cat__top-pic:after in shym-category.css). Francis asked for exactly that one on 13 Oct 2026,
   so change both together. A project photo is close to square with a tall product, so the band is taller. */
/* the photo box is 58% wide, as on the category page, and never wider than 1.55 times the hero height,
   so on a wide screen the product is not cut away */
.sp .sp-hero{--sp-hero-h:clamp(520px,46vw,720px);position:relative;overflow:hidden;isolation:isolate;display:flex;min-height:var(--sp-hero-h);background:var(--sp-ink)}
/* a small photo sets --sp-photo-w (1.5 times its own width), so it is not blown up past that */
.sp .sp-hero-photo{position:absolute;z-index:0;top:0;right:max(0px,calc(50% - 960px));bottom:0;width:58%;max-width:min(calc(var(--sp-hero-h) * 1.55),var(--sp-photo-w,100vw));overflow:hidden}
.sp .sp-hero-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--sp-focus,46% 12%)}
.sp .sp-hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--sp-ink) 0%,rgba(38,34,47,.8) 20%,rgba(38,34,47,.34) 56%,rgba(38,34,47,.1) 100%),linear-gradient(0deg,rgba(38,34,47,.5) 0%,rgba(38,34,47,0) 50%)}
.sp .sp-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;max-width:1413px;margin:0 auto;padding:56px 24px 116px}
.sp .sp-hero-copy>*{max-width:min(560px,44%)}
.sp .sp-kicker{display:inline-flex;align-items:center;gap:7px;height:32px;margin:0 0 18px;padding:0 14px 0 11px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);font-size:13px;font-weight:500;line-height:1;color:var(--sp-white)}
.sp .sp-kicker::before{content:"";flex:0 0 14px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.sp .sp-h1{font-size:clamp(36px,5.2vw,56px);font-weight:700;line-height:1.04;letter-spacing:-.025em;color:var(--sp-white);text-wrap:balance}
.sp .sp-hero-sub{margin-top:16px;font-size:18px;font-weight:400;line-height:1.55;color:rgba(255,255,255,.9);text-wrap:balance}
.sp .sp-hero .sp-btnrow{margin-top:26px}
/* rating line: five stars, then the saved Google numbers */
.sp .sp-rating{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin-top:22px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88)}
.sp .sp-rating::before,.sp .sp-stars{content:"";display:block;flex:0 0 88px;width:88px;height:16px;margin-right:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F6BB06' d='M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.6l-5.9 3.1 1.2-6.6L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E") repeat-x 0 50%/17.6px 16px}
.sp .sp-rating strong{font-weight:600;color:var(--sp-white)}

/* a page with no facts bar: the band needs no room at the bottom for it */
.sp .sp-hero--nofacts .sp-hero-copy{padding-bottom:72px}

/* a screen wider than 1920: the photo stops at the 1920 frame, so it melts into the plum on its right side too */
@media (min-width:1921px){.sp .sp-hero-photo::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(270deg,var(--sp-ink) 0%,rgba(38,34,47,.5) 7%,rgba(38,34,47,0) 20%)}}

/* facts bar: a cream card that sits half on the hero and half on the page */
.sp .sp-factsec{position:relative;z-index:3;margin-top:-60px}
.sp .sp-factbar{padding:26px 32px;border-radius:18px;background:var(--sp-cream)}
.sp ul.sp-facts{display:grid;grid-template-columns:repeat(var(--sp-n,4),minmax(0,1fr));gap:20px 28px}
.sp ul.sp-facts li{position:relative;padding-left:54px;min-height:40px;font-size:14px;line-height:1.5;color:var(--sp-body)}
.sp ul.sp-facts li strong{display:block;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--sp-ink)}
.sp ul.sp-facts li::before,.sp .sp-icon{content:"";position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--sp-ink) center/20px no-repeat}
.sp ul.sp-facts li.sp-i-pin::before,.sp .sp-icon.sp-i-pin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.sp ul.sp-facts li.sp-i-size::before,.sp .sp-icon.sp-i-size{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E")}
.sp ul.sp-facts li.sp-i-flame::before,.sp .sp-icon.sp-i-flame{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12.4 2c.5 3-1.200 4.600-2.700 6.500C8.200 10.400 7 12.100 7 14.300A5.100 5.100 0 0 0 12 19.500a5.100 5.100 0 0 0 5-5.200c0-2-.9-3.600-2-4.800-.2 1.500-.9 2.500-1.900 3 .5-3.200.6-7-0.700-10.500z'/%3E%3C/svg%3E")}
.sp ul.sp-facts li.sp-i-people::before,.sp .sp-icon.sp-i-people{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 11.500a3.500 3.500 0 1 0 0-7 3.500 3.500 0 0 0 0 7zm0 2c-3.300 0-6 1.700-6 3.900V19h12v-1.600c0-2.200-2.700-3.900-6-3.900zm7.500-2.500a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm.9 2.100c-.5 0-1 .1-1.500.2 1.300 1 2.100 2.300 2.100 3.700V19h4v-1.600c0-2.400-2.100-4.300-4.600-4.300z'/%3E%3C/svg%3E")}
.sp .sp-icon.sp-i-bolt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.500 2 5 13.500h5.500L9.500 22 19 10h-6z'/%3E%3C/svg%3E")}
.sp .sp-icon.sp-i-tool{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21.700 18.600 13.400 10.300c.8-2.100.4-4.600-1.400-6.300-1.800-1.800-4.600-2.200-6.800-1.200L9 6.600 6.600 9 2.800 5.200c-1 2.200-.6 5 1.200 6.800 1.700 1.700 4.200 2.200 6.300 1.400l8.300 8.300c.4.4 1 .4 1.300 0l1.800-1.800c.4-.4.4-1 0-1.300z'/%3E%3C/svg%3E")}

/* quiet motion, once: the photo settles and the words rise in */
@media (prefers-reduced-motion:no-preference){
  .sp .sp-hero-photo img{animation:sp-settle 9s cubic-bezier(.2,.8,.2,1) both}
  .sp .sp-hero-copy>*{animation:sp-rise .8s cubic-bezier(.2,.8,.2,1) both}
  .sp .sp-hero-copy>*:nth-child(2){animation-delay:.08s}
  .sp .sp-hero-copy>*:nth-child(3){animation-delay:.16s}
  .sp .sp-hero-copy>*:nth-child(4){animation-delay:.24s}
  .sp .sp-hero-copy>*:nth-child(5){animation-delay:.32s}
  .sp .sp-factbar{animation:sp-rise .8s .4s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes sp-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes sp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- layout blocks ---------- */
.sp .sp-stack{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.sp .sp-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.sp .sp-cols--photo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.sp .sp-cols--57{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
/* words at the left, the product card at the right (the panel under the photo section of a page with no words) */
.sp .sp-cols--card .sp-product{justify-self:end;width:100%}
.sp .sp-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sp .sp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sp .sp-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sp .sp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}

/* photo on its own */
.sp .sp-photo img{width:100%;border-radius:18px;object-fit:cover}
/* upright 4 by 5. The photo is cut by the box, and each photo says where to look (--sp-focus) */
.sp .sp-photo--upright img{aspect-ratio:4/5;object-position:var(--sp-focus,50% 50%)}

/* cream card and the wide cream panel */
.sp .sp-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:40px;border-radius:18px;background:var(--sp-cream);min-width:0}
.sp .sp-panel{padding:56px;border-radius:28px;background:var(--sp-cream)}

/* the review: stars, the words, then who said it */
.sp .sp-quote{gap:18px}
.sp .sp-quote .sp-stars{flex:0 0 auto;width:110px;height:20px;margin:0;background-size:22px 20px}
.sp .sp-quote blockquote{border:0;quotes:none}
.sp .sp-quote blockquote p{margin:0 0 12px}
.sp .sp-quote blockquote p:last-child{margin-bottom:0}
.sp .sp-quote .sp-quote-lead{font-size:clamp(26px,2.8vw,30px);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--sp-ink);text-wrap:balance}
.sp .sp-quote .sp-quote-rest{font-size:16px;line-height:1.65;color:var(--sp-body)}
.sp .sp-by{display:flex;align-items:center;gap:12px;padding-top:18px;width:100%;border-top:1px solid var(--sp-line)}
.sp .sp-by-mark{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--sp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.500c3.500 0 6.600 1.200 9.100 3.600l6.800-6.800C35.800 2.400 30.300 0 24 0 14.600 0 6.500 5.400 2.600 13.200l7.900 6.200C12.400 13.600 17.700 9.500 24 9.500z'/%3E%3Cpath fill='%234285F4' d='M46.100 24.500c0-1.600-.1-3.100-.4-4.500H24v9h12.400c-.5 2.900-2.200 5.300-4.600 6.900l7.500 5.800c4.400-4 6.800-10 6.800-17.200z'/%3E%3Cpath fill='%23FBBC05' d='M10.500 28.600c-.5-1.400-.8-3-.8-4.600s.3-3.200.8-4.600l-7.900-6.200C.9 16.500 0 20.100 0 24s.9 7.500 2.600 10.800l7.900-6.200z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.500 0 11.900-2.100 15.900-5.800l-7.500-5.800c-2.100 1.400-4.800 2.300-8.400 2.300-6.300 0-11.600-4.200-13.500-9.900l-7.900 6.200C6.500 42.600 14.600 48 24 48z'/%3E%3C/svg%3E") center/20px no-repeat}
.sp .sp-by strong{display:block;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--sp-ink)}

/* ticks */
.sp ul.sp-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;width:100%}
.sp ul.sp-ticks li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--sp-body)}
.sp ul.sp-ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--sp-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

/* tiles: three reasons, each with a round icon */
.sp .sp-tile{position:relative;padding:28px 28px 28px;border-radius:18px;background:var(--sp-cream)}
.sp .sp-tile .sp-icon{position:static;display:block;margin-bottom:18px}
.sp .sp-tile p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--sp-body)}

/* specifications: rows split by a thin line */
.sp .sp-specs{width:100%}
.sp .sp-specs>div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid var(--sp-line)}
.sp .sp-specs>div:first-child{border-top:0;padding-top:0}
.sp .sp-specs>div:last-child{padding-bottom:0}
.sp .sp-specs dt{font-size:14px;font-weight:400;line-height:1.5;color:var(--sp-muted);padding-top:1px}
.sp .sp-specs dd{font-size:16px;font-weight:500;line-height:1.5;color:var(--sp-ink)}
/* the product card inside the cream panel turns white */
.sp .sp-panel .shym-cards a.shym-card{background:var(--sp-white)}
.sp .sp-product{display:flex;flex-direction:column;gap:16px;min-width:0;max-width:440px}
/* one card in the column, also on a phone, where the card list is 2 across. On a touch phone the card list
   of the site runs out to 12px from each screen edge (shym-card.css); inside this panel it must stay in the panel. */
.sp .sp-product .shym-cards{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;margin-left:0;margin-right:0}

/* more projects: photo cards */
.sp a.sp-proj{display:flex;flex-direction:column;gap:14px;padding:10px 10px 18px;border-radius:18px;background:var(--sp-cream);color:var(--sp-ink);transition:transform .3s,box-shadow .3s}
.sp a.sp-proj:hover,.sp a.sp-proj:focus-visible{transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(38,34,47,.45)}
.sp a.sp-proj img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px}
.sp a.sp-proj span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 8px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--sp-ink)}

/* ---------- the words of an older page ----------
   A page made before the new look keeps its own words (headings, paragraphs, lists, a spec table, photos).
   They are set here in the new type. Beside them a panel stays in view: the product card when the page names
   a product, else the "Planning" card. */
.sp .sp-story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.sp .sp-aside{position:sticky;top:120px;min-width:0}
.sp .sp-aside .sp-card{padding:32px}
.sp .sp-panel--aside{padding:28px;border-radius:18px}
.sp .sp-panel--solo{max-width:500px}
.sp .sp-panel--aside .sp-small{margin-bottom:14px}
.sp .sp-panel--aside .sp-product{max-width:none}
.sp .sp-article{min-width:0}
.sp .sp-article>:first-child{margin-top:0}
.sp .sp-article h2{margin:40px 0 14px;font-size:clamp(26px,2.8vw,30px);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--sp-ink);text-wrap:balance}
.sp .sp-article h3,.sp .sp-article h4{margin:28px 0 10px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--sp-ink)}
.sp .sp-article p{margin:0 0 14px;max-width:70ch;font-size:16px;font-weight:400;line-height:1.65;color:var(--sp-body)}
.sp .sp-article strong,.sp .sp-article b{font-weight:600;color:var(--sp-ink)}
.sp .sp-article a{color:var(--sp-orange);font-weight:600}
.sp .sp-article a:hover,.sp .sp-article a:focus-visible{color:var(--sp-orange-deep)}
.sp .sp-article ul,.sp .sp-article ol{margin:0 0 16px;max-width:70ch}
.sp .sp-article li{margin:0 0 8px;font-size:16px;line-height:1.65;color:var(--sp-body)}
.sp .sp-article ul li{position:relative;padding-left:22px}
.sp .sp-article ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--sp-ink)}
.sp .sp-article ol{list-style:decimal;padding-left:22px}
.sp .sp-article ol li{padding-left:4px}
.sp .sp-article li p{margin:0}
.sp .sp-article img{width:100%;height:auto;margin:24px 0;border-radius:18px}
.sp .sp-article figure{margin:24px 0}
.sp .sp-article figure img{margin:0}
.sp .sp-article figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--sp-muted)}
.sp .sp-article blockquote{margin:24px 0;padding-left:20px;border-left:3px solid var(--sp-line)}
.sp .sp-article iframe{display:block;max-width:100%;margin:24px 0;border-radius:18px}
.sp .sp-article hr{margin:32px 0;border:0;border-top:1px solid var(--sp-line)}
/* a spec table: the same rows as the spec list of a new page, on cream. Old tables carry their own colours, borders
   and fonts in style attributes (a dark green head, grey stripes, Arial), so these rules must win over them. */
.sp .sp-article table{width:100%!important;margin:8px 0 24px!important;border:0!important;border-collapse:collapse!important;border-radius:18px;overflow:hidden;background:var(--sp-cream)!important;font-size:16px!important}
.sp .sp-article tr,.sp .sp-article thead,.sp .sp-article tbody{background:transparent!important}
.sp .sp-article td,.sp .sp-article th{padding:13px 24px!important;border:0!important;border-top:1px solid var(--sp-line)!important;background:transparent!important;vertical-align:top;text-align:left!important;font-size:16px!important;font-weight:500!important;line-height:1.5;color:var(--sp-ink)!important}
.sp .sp-article tr:first-child td,.sp .sp-article tr:first-child th{border-top:0!important}
.sp .sp-article td:first-child,.sp .sp-article th:first-child{width:38%;font-size:14px!important;font-weight:400!important;color:var(--sp-muted)!important}
.sp .sp-article thead th,.sp .sp-article thead th:first-child{font-size:14px!important;font-weight:600!important;color:var(--sp-ink)!important}
.sp .sp-article thead+tbody tr:first-child td{border-top:1px solid var(--sp-line)!important}

/* ---------- tablets ---------- */
@media (max-width:1024px){
  .sp .sp-cols,.sp .sp-cols--photo,.sp .sp-cols--57{gap:32px}
  .sp ul.sp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp .sp-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp .sp-panel{padding:40px}
  .sp .sp-card{padding:28px}
  .sp .sp-hero-copy>*{max-width:min(520px,48%)}
  .sp .sp-story{grid-template-columns:minmax(0,1fr);gap:32px}
  .sp .sp-aside{position:static;max-width:440px}
}

/* ---------- phones ---------- */
@media (max-width:767px){
  .sp-wrap{padding:0 16px}
  .sp-sec{padding:24px 0}
  .sp-sec--last{padding-bottom:48px}
  /* photo on top, whole; the words under it on the plum */
  .sp .sp-hero{flex-direction:column;min-height:0}
  .sp .sp-hero-photo{position:relative;width:100%;max-width:none;aspect-ratio:1/1}
  .sp .sp-hero-photo img{object-position:50% 50%}
  .sp .sp-hero-photo::after{background:linear-gradient(0deg,var(--sp-ink) 0%,rgba(38,34,47,0) 26%)}
  .sp .sp-hero-copy{padding:8px 16px 76px}
  .sp .sp-hero-copy>*{max-width:none}
  .sp .sp-hero-sub{font-size:16px}
  .sp .sp-factsec{margin-top:-44px}
  .sp .sp-factbar{padding:22px 20px}
  .sp ul.sp-facts{grid-template-columns:minmax(0,1fr);gap:16px}
  .sp .sp-cols,.sp .sp-cols--photo,.sp .sp-cols--57,.sp .sp-grid3,.sp .sp-grid2{grid-template-columns:minmax(0,1fr);gap:24px}
  .sp .sp-grid3,.sp .sp-grid2{gap:16px}
  .sp .sp-grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sp ul.sp-ticks{grid-template-columns:minmax(0,1fr)}
  .sp .sp-panel{padding:28px 20px;border-radius:22px}
  .sp .sp-card{padding:24px 20px}
  .sp .sp-tile{padding:22px}
  .sp .sp-specs>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sp .sp-product{max-width:440px;margin-left:auto;margin-right:auto}
  .sp .sp-cols--card .sp-product{justify-self:stretch}
  .sp .sp-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px}
  .sp a.sp-proj span{font-size:15px;margin:0 4px}
  .sp .sp-hero--nofacts .sp-hero-copy{padding-bottom:40px}
  .sp .sp-story{gap:24px}
  .sp .sp-aside{max-width:none}
  .sp .sp-panel--aside{padding:20px}
  .sp .sp-aside .sp-card{padding:24px 20px}
  .sp .sp-article h2{margin-top:32px}
  .sp .sp-article td,.sp .sp-article th{padding:12px 16px!important}
  .sp .sp-article td:first-child,.sp .sp-article th:first-child{width:40%;font-size:13px!important}
}