/* ==========================================================================
   INVEST TELANGANA — Focus sectors
   Loaded after main.css. Everything is scoped .sf-* so the shared system
   (header, footer, buttons, type, .rv motion) carries over untouched.

   Palette is sampled straight off the Invest Telangana logo:
     #0060E0 bright blue   #0024B4 deep blue    #E80000 red
     #007028 dark green    #40B060 mid green    #98D048 light green
     #F8C828 yellow        #E0A800 amber
   --------------------------------------------------------------------------
   01  Tokens
   02  Hero (photographic)
   03  Sector index — the list
   04  Sector index — the featured panel
   05  Common ground
   06  Responsive
   ========================================================================== */

/* 01 ── TOKENS ────────────────────────────────────────────────────────── */

.sf{
  --lg-blue:#0060E0;
  --lg-navy:#0024B4;
  --lg-green:#007028;
  --lg-green-2:#40B060;
  --lg-lime:#98D048;
  --lg-yellow:#F8C828;
  --lg-amber:#E0A800;
  --lg-red:#E80000;
  --sf-ink:#061034;
  --sf-c:var(--lg-navy);        /* the live sector's colour, set by the JS */
}

/* 02 ── HERO ─────────────────────────────────────────────────────────── */
/* Photographic and full height, the same construction as the summit hero:
   picture, wash, hairline grid, then the type. */

.sf-hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(1.6rem,4vw,2.8rem));
  background:var(--sf-ink);
}
.sf-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sf-hero__media img{
  position:absolute;inset:0;width:100%;height:112%;
  object-fit:cover;object-position:50% 48%;
  filter:saturate(1.04) contrast(1.03);
  will-change:transform;
}
.sf-hero__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(64% 56% at 84% 6%,rgba(0,96,224,.28),transparent 62%),
    linear-gradient(180deg,rgba(6,16,52,.34) 0%,rgba(6,16,52,.12) 32%,
                    rgba(6,16,52,.72) 74%,rgba(6,16,52,.94) 100%);
}
.sf-hero__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.sf-hero__in{
  position:relative;z-index:3;
  width:var(--shell);margin-inline:auto;
  display:grid;gap:clamp(.9rem,1.8vw,1.35rem);justify-items:start;
  padding-bottom:clamp(1.6rem,3.4vw,2.8rem);
}
.sf-hero__h{
  font-size:clamp(2.5rem,5.8vw,5.5rem);line-height:.95;letter-spacing:-.042em;color:#fff;
}
/* main.css parks .mask-l > span at translateY(110%) for the home page's hero
   timeline, which does not run here — own the resting state, and pad the clip
   box so Ubuntu's ascenders are not shaved by the tight leading */
.sf-hero__h .mask-l{overflow:hidden;padding-block:.12em;margin-block:-.12em}
html.js .sf-hero__h .mask-l > *,
html.no-motion .sf-hero__h .mask-l > *{transform:none;opacity:1}
.sf-hero__h em{
  font-style:normal;display:block;
  background:linear-gradient(96deg,#7FC4FF,#FFFFFF 42%,var(--lg-lime));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.sf-hero__p{
  max-width:64ch;color:rgba(255,255,255,.86);
  font-size:clamp(.98rem,.42vw + .88rem,1.12rem);line-height:1.6;
}
.sf-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;padding-top:.5rem}
.sf-hero .btn--out{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
.sf-hero .btn--out:hover{background:#fff;color:var(--sf-ink);border-color:#fff}

/* the figures ride along the foot of the picture */
.sf-hero__stats{
  position:relative;z-index:3;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(6,16,52,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.sf-hero__stats > div{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.sf-stat{position:relative;padding:clamp(.95rem,2vw,1.5rem) clamp(.6rem,1.4vw,1.3rem) clamp(.95rem,2vw,1.5rem) 0;display:grid;gap:.3rem}
.sf-stat + .sf-stat{padding-left:clamp(.9rem,2vw,1.9rem)}
.sf-stat + .sf-stat::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:2.6rem;width:1px;background:rgba(255,255,255,.2);
}
.sf-stat b{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.05;letter-spacing:-.04em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.sf-stat span{
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.45;
}

/* 02b ── HERO, COLLAGE VARIANT ───────────────────────────────────────── */
/* Nine sector photographs in an arc over the heading. Light ground so the
   pictures carry the colour, and the second line takes the brand gradient.
   The drop on each card is a margin, not a transform, so the row actually
   grows to hold it and the heading always clears the lowest card. */

.sf-hero--coll{
  --sf-wave:clamp(22px,4.6vw,76px);
  min-height:auto;
  justify-content:center;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(1.8rem,5vw,3.6rem));
  padding-bottom:clamp(2.4rem,6vw,4.6rem);
  background:
    radial-gradient(118% 76% at 50% -16%,rgba(0,96,224,.11),transparent 60%),
    radial-gradient(62% 48% at 6% 4%,rgba(152,208,72,.15),transparent 62%),
    radial-gradient(58% 46% at 96% 2%,rgba(0,36,180,.11),transparent 62%),
    #F6F8FD;
}
/* the base hero paints a dark plate and bottom-aligns its type — neither
   applies here */
.sf-hero--coll .sf-hero__in{
  justify-items:stretch;
  gap:clamp(1.4rem,3.4vw,2.6rem);
  padding-bottom:0;
}

.sf-hero__aura{
  position:absolute;left:50%;top:-18%;translate:-50% 0;z-index:0;
  width:min(1500px,120%);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.9),transparent 70%);
}
.sf-hero__rule{
  position:absolute;inset:auto 0 0;z-index:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,36,180,.16),transparent);
}

/* ── the arc ─────────────────────────────────────────────────────────── */
/* The arc runs wider than the reading column — the pictures want the room,
   the sentence underneath does not. It sits outside .sf-hero__in rather than
   bleeding out of it, so the width measures against the page: 100vw would
   include the scrollbar and push the run off-centre. */
.sf-coll{
  position:relative;z-index:3;
  width:min(1460px,calc(100% - clamp(1.5rem,4vw,3.2rem)));
  margin-inline:auto;
  margin-bottom:clamp(1.4rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(.45rem,1vw,.95rem);
  align-items:start;
}
.sf-coll__c{
  margin:0;margin-top:calc(var(--dy) * var(--sf-wave));
  aspect-ratio:4 / 5;overflow:hidden;
  border-radius:clamp(10px,1.1vw,18px);
  background:#E7EBF6;
  box-shadow:0 1px 2px rgba(6,16,52,.06),0 16px 38px rgba(0,36,180,.14);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);
}
.sf-coll__c img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e-out);
}
.sf-coll__c:hover{
  transform:translateY(-10px);
  box-shadow:0 2px 4px rgba(6,16,52,.07),0 26px 58px rgba(0,36,180,.2);
}
.sf-coll__c:hover img{transform:scale(1.06)}

/* ── the type ────────────────────────────────────────────────────────── */
.sf-hero--coll .sf-hero__txt{
  display:grid;gap:clamp(.7rem,1.6vw,1.15rem);justify-items:center;text-align:center;
}
.sf-hero--coll .sf-hero__h{
  color:var(--sf-ink);
  font-size:clamp(2.1rem,5.2vw,4.6rem);
}
.sf-hero--coll .sf-hero__h em{
  background:linear-gradient(98deg,#0483CE 0%,#2D308F 34%,#0060E0 58%,#06A519 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.sf-hero--coll .sf-hero__p{
  max-width:80ch;color:var(--ink-2);text-wrap:pretty;
}

/* ── narrower screens drop cards from the outside in ─────────────────── */
@media (max-width:1080px){
  .sf-coll{grid-template-columns:repeat(7,minmax(0,1fr))}
  .sf-coll__c:nth-child(1),.sf-coll__c:nth-child(9){display:none}
}
@media (max-width:820px){
  .sf-coll{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sf-coll__c:nth-child(2),.sf-coll__c:nth-child(8){display:none}
}
@media (max-width:560px){
  .sf-hero--coll{--sf-wave:clamp(14px,4vw,26px)}
  .sf-coll{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .sf-coll__c:nth-child(3),.sf-coll__c:nth-child(7){display:none}
}

/* 03 ── SECTOR INDEX — THE WHEEL ─────────────────────────────────────── */
/* The sixteen sit on a ring, grouped into three colour bands. The wheel is the
   selector wherever there is room for it; below that tier it is dropped and the
   numbered list underneath takes over. Both drive the same card. */

.sf-wheel{display:none;position:relative;width:100%;max-width:600px;margin-inline:auto}
.sf-wheel svg{width:100%;height:auto;display:block;overflow:visible}

/* The hub, sized by the JS to the radius the wheel was actually drawn with.
   It holds the districts of Telangana: the wheel says what the state builds,
   the middle says where. Decorative, so it is hidden from assistive tech. */
.sf-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--wh-hub,28%);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  pointer-events:none;
}
/* The sheet already sets .sf-wheel svg{width:100%}, which outranks a single
   class — so the map is sized through .sf-wheel to win on specificity.
   Height is the constraint: the artwork is 1000 x 1049, taller than it is
   wide, and at full width its north and south tips fell outside the circle. */
.sf-wheel .sf-hub__map{
  width:auto;height:76%;max-width:76%;
  display:block;overflow:visible;
}
.sf-hub__map path{
  fill:#fff;
  stroke:rgba(0,36,180,.26);
  stroke-width:1.6;
  stroke-linejoin:round;
  transition:fill .5s var(--e-out);
}
/* the districts settle into the selected sector's colour */
.sf-wheel.is-tinted .sf-hub__map path{fill:var(--sf-tint,#fff)}

.wh__all{transform-box:view-box;transform-origin:50% 50%}
.wh__dot{fill:rgba(0,36,180,.16)}
/* the hairline that closes the ring, so the segments read as one circle
   rather than a loose chain of pills */
.wh__ring{fill:none;stroke:rgba(0,36,180,.13);stroke-width:1.2}

.wh__famArc{fill:none;stroke-linecap:butt;transition:opacity .35s var(--e-out)}
.wh__famLabel{
  font-family:var(--f-head);font-size:13px;letter-spacing:.18em;
  fill:#fff;font-weight:500;
}

.wh__sector{cursor:pointer}
.wh__sector:focus-visible{outline:none}
.wh__sector:focus-visible .wh__sectorArc{stroke-width:30}
.wh__sectorArc{
  fill:none;stroke-linecap:round;
  transition:stroke-width .35s var(--e-out),opacity .35s var(--e-out);
}
.wh__hit{fill:none;stroke:transparent;stroke-linecap:butt;cursor:pointer}
.wh__sectorLabel{
  font-family:var(--f-body);font-size:14px;font-weight:700;
  fill:var(--ink-2);letter-spacing:-.01em;
  transition:fill .3s var(--e-out);
  pointer-events:auto;cursor:pointer;
}
.wh__sector:hover .wh__sectorLabel{fill:var(--ink)}
.wh__sector:hover .wh__sectorArc{stroke-width:26}

/* once a sector has been picked the rest step back, so the live one reads at
   a glance from across the drawing */
.wh.is-picked .wh__sectorArc{opacity:.45}
.wh.is-picked .wh__famArc{opacity:.42}
.wh.is-picked .wh__sectorLabel{fill:var(--ink-4)}
.wh .wh__sector.is-on .wh__sectorArc{opacity:1;stroke-width:30}
.wh .wh__sector.is-on .wh__sectorLabel{fill:var(--ink)}
.wh .wh__sector:hover .wh__sectorArc{opacity:1}
.wh .wh__sector:hover .wh__sectorLabel{fill:var(--ink)}

/* 03b ── SECTOR INDEX — THE LIST ─────────────────────────────────────── */

/* the wheel already carries plenty of air of its own, so the head does not
   need the full section gap under it */
.sf-idx .sec-head{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.sf-idx{
  position:relative;overflow:hidden;
  background:
    radial-gradient(58% 48% at 90% 2%,rgba(0,96,224,.07),transparent 62%),
    radial-gradient(52% 46% at 4% 96%,rgba(0,112,40,.06),transparent 64%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.sf-idx__lay{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);align-items:start;
}

.sf-list{
  position:relative;
  border-top:1px solid var(--line);
}
/* One marker slides between the rows rather than sixteen borders switching on
   and off — the JS hands it the row's offset and height. */
.sf-list__mark{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  width:100%;height:var(--mh,0px);
  transform:translateY(var(--my,0px));
  border-radius:12px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--sf-c) 12%,transparent),
    color-mix(in srgb,var(--sf-c) 3%,transparent) 78%,transparent);
  opacity:0;
  transition:transform .5s var(--e-out),height .5s var(--e-out),opacity .35s;
}
.sf-list.is-live .sf-list__mark{opacity:1}
/* the accent rule down the left edge of the live row */
.sf-list__mark::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:3px;
  background:var(--sf-c);
}

.sf-item{position:relative;z-index:1;border-bottom:1px solid var(--line)}
.sf-item__b{
  position:relative;width:100%;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(.8rem,1.8vw,1.3rem);
  padding:clamp(.8rem,1.5vw,1.05rem) clamp(.7rem,1.4vw,1.1rem);
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;
  color:var(--ink-2);
  transition:color .3s,padding-left .4s var(--e-out);
}
.sf-item__b:hover{color:var(--ink);padding-left:clamp(1rem,2vw,1.6rem)}
.sf-item__b:focus-visible{outline:2px solid var(--sf-c);outline-offset:-2px;border-radius:10px}
.sf-item__n{
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.14em;
  color:var(--ink-4);font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.sf-item__t{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1rem,1.42vw,1.28rem);line-height:1.2;letter-spacing:-.026em;
  transition:font-weight .2s;
}
.sf-item__go{
  display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  color:var(--sf-c);
  opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--e-out),transform .45s var(--e-out);
}
.sf-item__go svg{width:100%;height:100%}
.sf-item__b:hover .sf-item__go{opacity:.45;transform:none}

.sf-item.is-on .sf-item__b{color:var(--ink);padding-left:clamp(1rem,2vw,1.6rem)}
.sf-item.is-on .sf-item__t{font-weight:700}
.sf-item.is-on .sf-item__n{color:var(--sf-c)}
.sf-item.is-on .sf-item__go{opacity:1;transform:none}

/* 04 ── SECTOR INDEX — THE FEATURED PANEL ────────────────────────────── */

.sf-pane{position:sticky;top:calc(var(--hdr-h) + clamp(1rem,2.4vw,2rem))}
.sf-card{
  position:relative;overflow:hidden;
  display:grid;gap:clamp(1rem,2vw,1.5rem);
  padding:clamp(1.4rem,3vw,2.6rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;
}
/* a wash of the live sector's colour across the top of the card */
.sf-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 62% at 88% -8%,
             color-mix(in srgb,var(--sf-c) 13%,transparent),transparent 66%);
}
.sf-card > *{position:relative;z-index:1}
/* the index and the heading read as one block, not as two rows */
.sf-card__n + .sf-card__t{margin-top:calc(clamp(1rem,2vw,1.5rem) * -1 + .35rem)}
/* The industry mark, in the corner the index numeral used to fill. It is
   tinted from the live sector's colour, so it changes with the selection
   without needing sixteen rules of its own. */
.sf-card__ic{
  position:absolute;z-index:1;
  right:clamp(1rem,2.4vw,2rem);top:clamp(1rem,2.4vw,2rem);
  display:grid;place-items:center;
  width:clamp(54px,5.6vw,74px);aspect-ratio:1;
  border-radius:20px;
  background:linear-gradient(148deg,
    color-mix(in srgb,var(--sf-c) 13%,#fff),
    color-mix(in srgb,var(--sf-c) 5%,#fff));
  color:var(--sf-c);
}
.sf-card__ic svg{width:80%;height:80%}

/* the index the mark displaced, kept as a small line above the heading */
.sf-card__n{
  font-family:var(--f-head);font-weight:500;
  font-size:.72rem;letter-spacing:.16em;
  color:var(--sf-c);font-variant-numeric:tabular-nums;
}
.sf-card__n i{font-style:normal;color:var(--ink-4)}
.sf-card__t{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.6rem,2.1vw,2.6rem);line-height:1.06;letter-spacing:-.036em;color:var(--ink);
  /* the mark sits in the top-right corner, so the heading stops short of it */
  max-width:min(15ch,calc(100% - clamp(70px,7.4vw,96px)));
}
.sf-card__p{
  font-size:clamp(1rem,.44vw + .9rem,1.12rem);line-height:1.66;color:var(--ink-2);
  max-width:56ch;
}

.sf-card__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem)}
.sf-col h4{
  font-family:var(--f-head);font-weight:500;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem;
}
.sf-tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.sf-tags li{
  font-size:.8rem;line-height:1.3;color:var(--ink-2);
  padding:.34rem .68rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper-2);
  transition:color .3s,border-color .3s,background .3s;
}
.sf-tags li:hover{
  color:var(--sf-c);border-color:color-mix(in srgb,var(--sf-c) 40%,transparent);background:#fff;
}
.sf-here{display:grid;gap:.42rem;list-style:none;margin:0;padding:0}
.sf-here li{
  position:relative;padding-left:1.1rem;
  font-size:.88rem;line-height:1.45;color:var(--ink-2);
}
.sf-here li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background:var(--sf-c);
}

.sf-card__go{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;padding-top:.2rem}
.sf-card__go .btn--pri{background:var(--sf-c);border-color:var(--sf-c)}
.sf-card__soon{
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);
}

/* the accordion body, used only on the narrow tier */
.sf-item__d{display:none}

/* 05 ── COMMON GROUND ────────────────────────────────────────────────── */
/* Five soft cards on a pale gradient field rather than the old numbered,
   line-divided list — each row gets its own colour (--gc, set inline) that
   tints its icon badge, its title's underline, and its hover. Two hues
   outside the eight-colour brand set (purple, teal) are added here only,
   scoped to .sf-ground, purely so five rows read as five distinct things
   at a glance. */

.sf-ground{
  --sf-purple:#6D5BD0;--sf-teal:#0C8C9B;
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 70% at 14% -10%,color-mix(in srgb,var(--lg-blue) 10%,transparent),transparent 60%),
    radial-gradient(54% 64% at 92% 108%,color-mix(in srgb,var(--lg-green-2) 10%,transparent),transparent 60%),
    var(--paper-3);
}
.sf-grounds{display:grid;gap:clamp(.85rem,1.6vw,1.15rem)}

.sf-ground__row{
  position:relative;display:grid;
  grid-template-columns:auto minmax(150px,.85fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(1.1rem,2.4vw,2rem);
  padding:clamp(1.3rem,2.4vw,1.7rem) clamp(1.4rem,2.6vw,2rem);
  border-radius:20px;
  background:var(--paper);
  border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(6,16,52,.04),0 14px 30px rgba(6,16,52,.05);
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),border-color .4s;
}
.sf-ground__row:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 10px rgba(6,16,52,.05),0 26px 46px rgba(6,16,52,.1);
  border-color:color-mix(in srgb,var(--gc,var(--lg-blue)) 32%,var(--line-2));
}

.sf-ground__ic{
  display:grid;place-items:center;flex:0 0 auto;
  width:clamp(52px,5vw,66px);aspect-ratio:1;border-radius:50%;
  background:color-mix(in srgb,var(--gc,var(--lg-blue)) 13%,transparent);
  color:var(--gc,var(--lg-blue));
}
.sf-ground__ic svg{width:44%;height:44%}

.sf-ground__t{
  display:flex;flex-direction:column;gap:.5rem;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);
}
.sf-ground__t::after{
  content:"";display:block;width:32px;height:3px;border-radius:2px;
  background:var(--gc,var(--lg-blue));
}
.sf-ground__rule{width:1px;align-self:stretch;background:var(--line-2)}
.sf-ground__p{font-size:clamp(.92rem,.4vw + .84rem,1.02rem);line-height:1.6;color:var(--ink-2);max-width:54ch}

/* The wheel needs more room than the standard shell gives it, and enough width
   that sixteen labels are still legible. Above this tier it is the selector and
   the list steps aside; below it, the list is the selector. */
@media (min-width:1200px){
  /* the section keeps the site's own shell — widening it only for this one
     section pushed the head's two columns to opposite edges of the page */
  .sf-idx__lay{
    grid-template-columns:minmax(0,1fr) minmax(360px,520px);
    gap:clamp(1.4rem,2.6vw,2.6rem);
    align-items:center;
  }
  .sf-wheel{display:block}
  .sf-list{display:none}
  .sf-pane{position:static}
  /* the panel is a column, not a page — its two lists read better stacked */
  .sf-card__cols{grid-template-columns:1fr}
}

/* 06 ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width:1180px){
  .sf-idx__lay{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.2rem,2.6vw,2rem)}
  .sf-card__cols{grid-template-columns:1fr}
}

@media (max-width:960px){
  .sf-hero__stats > div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-stat:nth-child(odd){padding-left:0}
  .sf-stat:nth-child(odd)::before{display:none}
  .sf-ground__row{grid-template-columns:auto minmax(0,1fr);row-gap:.7rem}
  .sf-ground__rule{display:none}
  .sf-ground__p{grid-column:1 / -1}
}

/* Past this width there is no room for a column of copy beside the list, so
   the panel folds into the row it belongs to and the list becomes an
   accordion. The JS renders into whichever container the tier is using. */
@media (max-width:900px){
  .sf-idx__lay{grid-template-columns:minmax(0,1fr)}
  .sf-pane{display:none}
  .sf-item__d{display:block;overflow:hidden}
  .sf-item.is-on .sf-item__d{padding-bottom:clamp(1rem,3vw,1.6rem)}
  .sf-card{border-radius:18px}
  .sf-list__mark{display:none}
  .sf-item.is-on{background:color-mix(in srgb,var(--sf-c) 6%,transparent)}
}

@media (max-width:640px){
  .sf-card__ic{width:clamp(46px,12vw,56px);border-radius:16px}
  .sf-card__t{max-width:calc(100% - 64px)}
}

@media (max-width:560px){
  .sf-hero__stats > div{grid-template-columns:1fr}
  .sf-stat{padding-left:0 !important}
  .sf-stat::before{display:none !important}
  .sf-stat + .sf-stat{border-top:1px solid rgba(255,255,255,.16)}
  .sf-ground__row{grid-template-columns:1fr;justify-items:start;text-align:left}
  .sf-ground__p{grid-column:1}
  /* the heading is free of the 15ch measure here, but it still has to stop
     short of the industry mark in the corner */
  .sf-card__t{max-width:calc(100% - 60px)}
}

/* Safety net. The card is placed in the panel column or in the row depending
   on the tier, and that decision is made in script. Should it ever be out of
   step with the media query — a tier crossed without an event reaching the
   page — the wide layout collapses to one column and reads as an accordion
   rather than leaving an empty column beside a stranded card. */
@media (min-width:901px){
  .sf-idx__lay:has(.sf-item__d .sf-card){grid-template-columns:minmax(0,1fr)}
  .sf-idx__lay:has(.sf-item__d .sf-card) .sf-pane{display:none}
  .sf-idx__lay:has(.sf-item__d .sf-card) .sf-item__d{display:block}
  .sf-idx__lay:has(.sf-item__d .sf-card) .sf-item.is-on .sf-item__d{padding-bottom:clamp(1rem,3vw,1.6rem)}
  .sf-idx__lay:has(.sf-item__d .sf-card) .sf-list__mark{display:none}
}

html.no-motion .sf-hero__media img{transform:none !important}