/* SKILLGEEK — the site stylesheet.
   Tokens live in tokens.css. Nothing here should contain a literal colour or a
   literal font; if you need a new value, add a token.
   Layout is hand-written Grid/Flexbox: no framework, no page builder. */

/* ------------------------------------------------------------ base ------ */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-head);margin:0}
h1{font-size:var(--fs-h1);letter-spacing:-.025em;font-weight:700}
h2{font-size:var(--fs-h2);letter-spacing:-.02em;font-weight:700}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;font-weight:500}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:hover{color:var(--brand-800)}

:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm);
}
.sg-dark :focus-visible{outline-color:var(--focus-on-dark)}

.sg-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--bg);color:var(--ink);padding:var(--sp-3) var(--sp-4);
  border-radius:0 0 var(--radius) 0;font-weight:600;
}
.sg-skip:focus{left:0}

.sg-sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

.sg-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sg-narrow{max-width:var(--container-narrow);margin-inline:auto}
.sg-prose{max-width:var(--measure)}
.sg-prose p+p{margin-top:var(--sp-5)}

.sg-section{padding-block:var(--sp-8)}
@media(min-width:1024px){.sg-section{padding-block:var(--sp-9)}}
.sg-section--subtle{background:var(--bg-subtle)}
.sg-dark{background:var(--bg-dark);color:var(--ink-inverse)}
.sg-dark h1,.sg-dark h2,.sg-dark h3{color:var(--ink-inverse)}
.sg-dark a{color:var(--brand-300)}
/* Same specificity trap as the header buttons: `.sg-dark a` (0,1,1) beats
   `.sg-btn--onDark` (0,1,0), so the button on the dark video band rendered
   pink-on-white at 2.36:1. Re-assert with matching specificity. */
.sg-dark a.sg-btn--onDark{color:var(--n-900)}
.sg-dark a.sg-btn--onDark:hover{color:var(--n-900)}
.sg-dark a.sg-btn--primary{color:var(--ink-inverse)}

.sg-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-5);margin-bottom:var(--sp-6);flex-wrap:wrap;
}
.sg-section-head p{color:var(--ink-muted);margin-top:var(--sp-2);max-width:56ch}
.sg-dark .sg-section-head p{color:var(--n-300)}

.sg-eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-chip);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-full);
}

/* --------------------------------------------------------- buttons ------ */
.sg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;min-width:44px;padding:0 var(--sp-5);
  border-radius:var(--radius);border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);
  text-decoration:none;flex-shrink:0;white-space:nowrap;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.sg-btn--primary{background:var(--action);color:var(--ink-inverse)}
.sg-btn--primary:hover{background:var(--action-hover);color:var(--ink-inverse);transform:translateY(-1px)}
.sg-btn--secondary{background:transparent;color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-600)}
.sg-btn--secondary:hover{background:var(--brand-50);color:var(--brand-800)}
.sg-btn--navy{background:var(--accent-700);color:var(--ink-inverse)}
.sg-btn--navy:hover{background:var(--accent-900);color:var(--ink-inverse)}
.sg-btn--ghost{background:transparent;color:var(--ink)}
.sg-btn--ghost:hover{background:var(--n-100)}
.sg-btn--onDark{background:var(--n-0);color:var(--n-900)}
.sg-btn--onDark:hover{background:var(--n-100);color:var(--n-900)}
.sg-btn--lg{min-height:56px;padding:0 var(--sp-6);font-size:var(--fs-base)}

/* ---------------------------------------------------------- header ------ */
.sg-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:var(--border);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .sg-header{background:var(--bg)}
}
.sg-header-inner{display:flex;align-items:center;gap:var(--sp-4);min-height:72px}
.sg-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.sg-brand img{height:36px;width:auto;border-radius:var(--radius-sm)}
.sg-brand-text{font-family:var(--font-display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink)}

.sg-nav{display:flex;align-items:center;gap:var(--sp-4);margin-left:auto}
@media(min-width:1280px){.sg-nav{gap:var(--sp-5)}}
.sg-nav ul{display:flex;align-items:center;gap:var(--sp-4);list-style:none;margin:0;padding:0}
@media(min-width:1280px){.sg-nav ul{gap:var(--sp-5)}}
.sg-nav a{
  color:var(--ink);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
  position:relative;min-height:44px;display:flex;align-items:center;white-space:nowrap;
}
.sg-nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;
  background:var(--brand-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.sg-nav ul a:hover::after,
.sg-nav ul .current-menu-item>a::after{transform:scaleX(1)}
/* `.sg-nav a` (0,1,1) outspecifies `.sg-btn--primary` (0,1,0), so the buttons in
   the header were inheriting the nav's dark ink on a crimson fill — measured at
   2.77:1 by Lighthouse, a real WCAG failure. Re-assert the button colours with
   matching specificity. */
.sg-nav a.sg-btn{text-decoration:none}
.sg-nav a.sg-btn--primary{color:var(--ink-inverse)}
.sg-nav a.sg-btn--primary:hover{color:var(--ink-inverse)}
.sg-nav a.sg-btn--secondary{color:var(--brand-700)}
.sg-nav a.sg-btn--secondary:hover{color:var(--brand-800)}
.sg-nav a.sg-btn--onDark{color:var(--n-900)}

.sg-nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  width:48px;height:48px;border-radius:var(--radius);
  background:transparent;border:1px solid var(--n-200);color:var(--ink);cursor:pointer;
}
@media(min-width:1024px){.sg-nav-toggle{display:none}}

@media(max-width:1023.98px){
  .sg-nav{
    position:absolute;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:var(--border);
    padding:var(--sp-3) var(--gutter) var(--sp-6);margin-left:0;
    box-shadow:var(--shadow-modal);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  }
  .sg-nav[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible}
  .sg-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .sg-nav ul a{min-height:52px;border-bottom:var(--border)}
  .sg-nav ul a::after{display:none}
  .sg-nav .sg-btn{margin-top:var(--sp-3);width:100%}
}

/* ------------------------------------------------------------ hero ------ */
.sg-hero{padding-block:var(--sp-8) var(--sp-9)}
@media(min-width:1024px){.sg-hero{padding-block:var(--sp-9) var(--sp-10)}}
.sg-hero-grid{display:grid;gap:var(--sp-7);align-items:center}
@media(min-width:1024px){.sg-hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-8)}}
.sg-hero h1{font-size:var(--fs-display);letter-spacing:-.03em;line-height:var(--lh-tight);
  margin-top:var(--sp-5)}
.sg-hero h1 em{font-style:normal;color:var(--brand-600)}
.sg-hero .sg-lede{font-size:var(--fs-lg);color:var(--ink-muted);max-width:52ch;margin-top:var(--sp-5)}
.sg-hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7)}

.sg-stats{display:flex;flex-wrap:wrap;gap:var(--sp-7);margin-top:var(--sp-7);
  padding-top:var(--sp-6);border-top:var(--border)}
.sg-stat b{display:block;font-family:var(--font-display);font-size:var(--fs-h2);
  font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sg-stat span{font-size:var(--fs-sm);color:var(--ink-muted)}

/* ------------------------------------------- photo treatment (one) ------ */
/* ONE consistent treatment across a mixed-quality, mixed-orientation source
   set. Applied entirely in CSS — source files are never edited. */
.sg-photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:var(--border);background:var(--n-100);
}
.sg-photo::after{
  content:"";position:absolute;inset:0;background:var(--accent-900);
  opacity:.08;mix-blend-mode:multiply;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.sg-photo img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(1.05) contrast(1.03)}
.sg-photo:hover::after{opacity:0}
.sg-hero-photo{aspect-ratio:4/3}
@media(min-width:1024px){.sg-hero-photo{aspect-ratio:5/4}}

/* ----------------------------------------------------------- cards ------ */
.sg-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr;grid-auto-rows:1fr}
@media(min-width:768px){.sg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sg-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}
.sg-grid--4{grid-template-columns:1fr}
@media(min-width:768px){.sg-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.sg-grid--4{grid-template-columns:repeat(4,1fr)}}

.sg-card{
  display:flex;flex-direction:column;position:relative;
  background:var(--bg);border:var(--border);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.sg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--n-300)}
.sg-card:focus-within{box-shadow:var(--shadow-hover)}
.sg-card-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--n-100)}
.sg-card-media::after{
  content:"";position:absolute;inset:0;background:var(--accent-900);opacity:.08;
  mix-blend-mode:multiply;transition:opacity var(--dur) var(--ease);
}
.sg-card:hover .sg-card-media::after{opacity:0}
.sg-card-media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.03);
  transition:transform var(--dur-slow) var(--ease)}
.sg-card:hover .sg-card-media img{transform:scale(1.03)}

/* Deterministic fallback so a course with no cover never renders a grey box. */
.sg-card-media--empty{
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-600),var(--accent-900));
}
.sg-card-media--empty span{
  font-family:var(--font-display);font-weight:700;font-size:3rem;
  color:var(--ink-inverse);opacity:.9;
}

.sg-card-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-5);gap:var(--sp-3)}
.sg-chip{
  align-self:flex-start;max-width:100%;
  font-size:var(--fs-chip);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--n-800);background:var(--n-100);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);text-decoration:none;
  /* Long topic names must not turn the chip into a two-line block. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sg-card h3{
  /* Deliberately smaller than --fs-h3: cards sit in a 3-column grid that can be
     narrowed further by the catalog sidebar, and the display size clipped
     mid-word there. */
  font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sg-card h3 a{color:var(--ink);text-decoration:none}
.sg-card h3 a::before{content:"";position:absolute;inset:0}
.sg-card-meta{font-size:var(--fs-sm);color:var(--ink-muted)}
.sg-card-foot{
  margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);border-top:var(--border);flex-wrap:wrap;
}
.sg-price{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.125rem,1.05rem + .3vw,1.375rem);
  color:var(--brand-700);font-variant-numeric:tabular-nums}
.sg-price del{color:var(--n-500);font-size:var(--fs-sm);font-weight:500;margin-right:var(--sp-2)}
.sg-price ins{text-decoration:none}
.sg-card-cta{font-size:var(--fs-sm);font-weight:600;color:var(--brand-700);
  display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px}
.sg-card:hover .sg-card-cta svg{transform:translateX(3px)}
.sg-card-cta svg{transition:transform var(--dur) var(--ease)}

/* --------------------------------------------------- simple tiles ------- */
.sg-tile{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-5);border:var(--border);border-radius:var(--radius);background:var(--bg);
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.sg-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--n-300)}
.sg-tile h3{font-size:var(--fs-h3)}
.sg-tile p{color:var(--ink-muted);font-size:var(--fs-sm)}
.sg-tile-count{font-size:var(--fs-sm);color:var(--ink-muted);margin-top:auto}
.sg-dark .sg-tile{background:transparent;border-color:rgb(255 255 255 / .16)}
.sg-dark .sg-tile p{color:var(--n-300)}

/* -------------------------------------------------------- services ------ */
.sg-service{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);
  border:var(--border);border-radius:var(--radius);background:var(--bg);
}
.sg-service .sg-photo{aspect-ratio:16/10;margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  border:0;border-radius:var(--radius) var(--radius) 0 0}
.sg-service .sg-placeholder{
  font-size:var(--fs-sm);color:var(--ink-muted);
  border:1px dashed var(--n-300);border-radius:var(--radius-sm);
  padding:var(--sp-3);background:var(--n-50);
}

/* ----------------------------------------------------------- video ------ */
/* Facade: poster + button. The YouTube iframe is injected on click, so no
   third-party request happens at page load. */
.sg-video{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:var(--border);background:var(--n-900);width:100%;padding:0;cursor:pointer;display:block;
}
.sg-video img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
/* The poster is the point of this block — the overlay exists to keep the play
   button and the title legible, not to hide the photograph. At .35 over an
   already-dark training photo the poster read as a black box. */
.sg-video::after{content:"";position:absolute;inset:0;background:var(--accent-900);opacity:.18;
  transition:opacity var(--dur) var(--ease)}
.sg-video:hover::after{opacity:.08}
.sg-video-play{
  position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:var(--radius-full);
  background:var(--brand-600);color:var(--ink-inverse);
  display:grid;place-items:center;z-index:2;pointer-events:none;
  transition:transform var(--dur) var(--ease);
}
.sg-video:hover .sg-video-play{transform:scale(1.06)}
.sg-video-title{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--sp-5);
  color:var(--ink-inverse);font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-h3);text-align:left;
  background:linear-gradient(to top,rgb(5 10 48 / .85),transparent);
}
.sg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --------------------------------------------------------- gallery ------ */
.sg-gallery{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.sg-gallery{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
@media(min-width:1024px){.sg-gallery{grid-template-columns:repeat(4,1fr)}}
.sg-gallery .sg-photo{aspect-ratio:4/3;border-radius:var(--radius)}

/* ---------------------------------------------------- value / CTA ------- */
.sg-value{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;padding:var(--sp-7);border-radius:var(--radius-lg);
  background:var(--bg-dark);color:var(--ink-inverse);
}
.sg-value p{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;max-width:48ch}

/* --------------------------------------------------- testimonials ------- */
.sg-quote{
  display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);
  border:var(--border);border-radius:var(--radius);background:var(--bg);
}
.sg-quote blockquote{margin:0;font-size:var(--fs-lg)}
.sg-quote figcaption{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto}
.sg-quote img{width:48px;height:48px;border-radius:var(--radius-full);object-fit:cover}
.sg-quote cite{font-style:normal;font-weight:600}
.sg-quote small{display:block;color:var(--ink-muted)}

/* --------------------------------------------------------- catalog ------ */
.sg-catalog{display:grid;gap:var(--sp-6)}
@media(min-width:1024px){.sg-catalog{grid-template-columns:260px 1fr;gap:var(--sp-8)}}
.sg-filters{display:flex;flex-direction:column;gap:var(--sp-5)}
.sg-filters h2{font-size:var(--fs-h3)}
.sg-filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.sg-filter-list a{
  display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center;
  min-height:44px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink);font-size:var(--fs-sm);
}
.sg-filter-list a:hover{background:var(--n-100)}
.sg-filter-list a[aria-current="true"]{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.sg-filter-list span{color:var(--ink-muted);font-size:var(--fs-xs)}

.sg-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.sg-field label{font-size:var(--fs-sm);font-weight:600}
.sg-field input,.sg-field select{
  min-height:48px;padding:0 var(--sp-3);border:var(--border-interactive);
  border-radius:var(--radius);background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-base);width:100%;
}
.sg-field input:focus-visible,.sg-field select:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

.sg-toolbar{display:flex;gap:var(--sp-4);align-items:flex-end;flex-wrap:wrap;
  margin-bottom:var(--sp-5)}
.sg-result-count{color:var(--ink-muted);font-size:var(--fs-sm)}

.sg-empty{
  padding:var(--sp-8) var(--sp-5);text-align:center;border:1px dashed var(--n-300);
  border-radius:var(--radius);background:var(--bg-subtle);
}
.sg-empty h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}

.sg-pagination{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-7);
  justify-content:center}
.sg-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--sp-3);
  border:var(--border);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);
}
.sg-pagination .page-numbers:hover{background:var(--n-100)}
.sg-pagination .page-numbers.current{background:var(--action);color:var(--ink-inverse);border-color:var(--action)}

/* ---------------------------------------------------------- footer ------ */
.sg-footer{background:var(--bg-dark);color:var(--ink-inverse);padding-block:var(--sp-8)}
.sg-footer a{color:var(--n-300);text-decoration:none}
.sg-footer a:hover{color:var(--ink-inverse);text-decoration:underline}
.sg-footer-grid{display:grid;gap:var(--sp-7)}
@media(min-width:768px){.sg-footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.sg-footer h2{font-size:var(--fs-base);font-family:var(--font-body);font-weight:600;
  margin-bottom:var(--sp-4);color:var(--ink-inverse)}
.sg-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.sg-footer li a{display:inline-flex;align-items:center;min-height:44px}
.sg-footer img.sg-footer-logo{height:40px;width:auto;border-radius:var(--radius-sm)}
.sg-footer-contact{display:flex;flex-direction:column;gap:var(--sp-2);color:var(--n-300);
  font-size:var(--fs-sm);margin-top:var(--sp-4)}
.sg-socials{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap}
.sg-socials a{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--radius-sm);border:1px solid rgb(255 255 255 / .18);color:var(--n-0);
  transition:background var(--dur) var(--ease);
}
.sg-socials a:hover{background:rgb(255 255 255 / .1)}
.sg-footer-bottom{
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid rgb(255 255 255 / .14);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--n-300);
}

/* ------------------------------------------------------ page intro ------ */
.sg-page-head{padding-block:var(--sp-8) var(--sp-6)}
@media(min-width:1024px){.sg-page-head{padding-block:var(--sp-9) var(--sp-7)}}
.sg-page-head h1{max-width:20ch}
.sg-page-head p{color:var(--ink-muted);font-size:var(--fs-lg);margin-top:var(--sp-4);
  max-width:var(--measure)}

/* --------------------------------------------------------- contact ------ */
.sg-contact-grid{display:grid;gap:var(--sp-7)}
@media(min-width:1024px){.sg-contact-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
.sg-contact-list{display:flex;flex-direction:column;gap:var(--sp-5)}
.sg-contact-item h2{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.sg-contact-item a{font-size:var(--fs-lg)}
.sg-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.sg-form textarea{
  min-height:150px;padding:var(--sp-3);border:var(--border-interactive);
  border-radius:var(--radius);font-family:var(--font-body);font-size:var(--fs-base);
  background:var(--bg);color:var(--ink);width:100%;
}
.sg-form textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.sg-note{padding:var(--sp-4);border-radius:var(--radius);font-size:var(--fs-sm)}
.sg-note--ok{background:var(--accent-50);border:1px solid var(--accent-100);color:var(--accent-700)}
.sg-note--err{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700)}