/* ============================================================================
   INDEX CLINIC DESIGN SYSTEM v1
   Reverse engineered from the v15 homepage, 2 September 2026.

   Framework free. No build step. Drop this file in, put .ic-light or .ic-dark
   on a section, and compose from the components below.

   THREE RULES THAT GOVERN EVERYTHING ELSE
   1. Two canvases only. Bone or Charcoal. Paper and Cream are surfaces that sit
      on Bone, never page backgrounds.
   2. Every accent is legible on exactly one canvas. Never both. See the table
      in design-system.md before using one as text.
   3. Default to no shadow. Border first, tonal shift second, elevation last and
      only on things that lift under the cursor.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */

:root{
  /* --- canvases and surfaces --- */
  --ic-bone:#F0E6D5;        /* light canvas */
  --ic-charcoal:#2C2A28;    /* dark canvas */
  --ic-paper:#FBF7EF;       /* raised surface on Bone */
  --ic-cream:#F8F1E6;       /* secondary surface, hover state on Bone */

  /* --- accents. Closed set. Do not add a seventh. --- */
  --ic-lola:#E5D2DB;        /* dark canvas only */
  --ic-persimmon:#DC7A4A;   /* dark canvas only. The data colour. */
  --ic-sail:#B5DBF1;        /* dark canvas only */
  --ic-pistachio:#C5D49A;   /* dark canvas only */
  --ic-wisteria:#7A5E78;    /* light canvas only */
  --ic-midnight:#232E52;    /* light canvas only */

  /* --- ink. Alphas are NOT symmetric between canvases. They are tuned so each
         step lands on the same measured contrast, which different base colours
         reach at different alphas. Do not "tidy" these to match. --- */
  --ic-ink-1:rgba(44,42,40,1);      /* 11.56 on Bone. Body and headings. */
  --ic-ink-2:rgba(44,42,40,.78);    /*  6.17. Secondary text. */
  --ic-ink-3:rgba(44,42,40,.70);    /*  4.88. Tertiary text. AA floor. */
  --ic-ink-h:rgba(44,42,40,.55);    /*  3.22. Hairlines and borders. NOT text. */

  --ic-ink-d-1:rgba(240,230,213,1); /* 11.56 on Charcoal */
  --ic-ink-d-2:rgba(240,230,213,.78);/* 7.67 */
  --ic-ink-d-3:rgba(240,230,213,.62);/* 5.45 */
  --ic-ink-d-h:rgba(240,230,213,.45);/* 3.59. Hairlines. NOT text. */

  /* --- elevation. Tinted to the canvas, never pure black. Three steps and an
         edge highlight, which is what makes a surface read as floating rather
         than as having a shadow pasted under it. --- */
  --ic-e1:0 16px 32px -14px rgba(44,42,40,.20);
  --ic-e2:0 24px 48px -18px rgba(44,42,40,.24);
  --ic-e3:0 36px 72px -24px rgba(44,42,40,.26);
  --ic-edge:inset 0 1px 0 rgba(251,247,239,.85);
  --ic-lift:-6px;           /* the float distance on hover */

  /* --- radius. Deliberately mixed, not one value everywhere. --- */
  --ic-r-btn:10px;
  --ic-r-metric:12px;
  --ic-r-card:16px;
  --ic-r-media:22px;
  --ic-r-pill:999px;

  /* --- type --- */
  --ic-f-display:'Barlow',ui-sans-serif,system-ui,sans-serif;
  --ic-f-body:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --ic-f-mono:'Aeion Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --ic-t-dxl:clamp(46px,6.3vw,94px);
  --ic-t-dl:clamp(34px,3.95vw,56px);
  --ic-t-dm:clamp(24px,2.1vw,30px);
  --ic-t-ds:21px;
  --ic-t-lede:clamp(17px,1.15vw,20px);
  --ic-t-body:16px;
  --ic-t-bodys:14px;
  --ic-t-label:11px;

  /* --- rhythm --- */
  --ic-gut:clamp(20px,4vw,96px);
  --ic-sec:clamp(72px,9vw,132px);
  --ic-sec-mini:clamp(48px,5vw,72px);
  --ic-max:1400px;

  /* --- motion. One easing curve for the whole system. --- */
  --ic-ease:cubic-bezier(.16,1,.3,1);
  --ic-focus:var(--ic-charcoal);
}

/* ---------------------------------------------------------------------------
   2. CANVAS
   Every section carries exactly one. Elevation and focus are redeclared per
   canvas because a shadow tuned for Bone is invisible on Charcoal.
   ------------------------------------------------------------------------ */

.ic-light{
  background-color:var(--ic-bone);
  color:var(--ic-ink-1);
  --ic-focus:var(--ic-charcoal);
  --ic-line:var(--ic-ink-h);
  --ic-surface:var(--ic-paper);
  --ic-ink-full:var(--ic-ink-1);
  --ic-ink-mute:var(--ic-ink-3);
}
.ic-dark{
  background-color:var(--ic-charcoal);
  color:var(--ic-ink-d-1);
  --ic-focus:var(--ic-bone);
  --ic-line:var(--ic-ink-d-h);
  --ic-surface:rgba(240,230,213,.05);
  --ic-ink-full:var(--ic-ink-d-1);
  --ic-ink-mute:var(--ic-ink-d-3);
  --ic-e1:0 16px 34px -18px rgba(18,17,16,.55);
  --ic-e2:0 24px 50px -22px rgba(18,17,16,.62);
  --ic-e3:0 40px 80px -26px rgba(18,17,16,.72);
  --ic-edge:inset 0 1px 0 rgba(240,230,213,.10);
}

/* text de-emphasis, canvas aware */
.ic-light .ic-dim{color:var(--ic-ink-2)}
.ic-light .ic-dimmer{color:var(--ic-ink-3)}
.ic-dark  .ic-dim{color:var(--ic-ink-d-2)}
.ic-dark  .ic-dimmer{color:var(--ic-ink-d-3)}

/* ---------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ic-f-body);
  font-size:var(--ic-t-body);
  font-weight:300;
  line-height:1.65;
  background:var(--ic-bone);
  color:var(--ic-ink-1);
  overflow-x:hidden;
  width:100%;max-width:100%;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

:focus-visible{
  outline:2px solid var(--ic-focus);
  outline-offset:3px;
  border-radius:2px;
}

.ic-skip{position:absolute;left:-9999px}
.ic-skip:focus{
  left:var(--ic-gut);top:12px;z-index:200;
  background:var(--ic-charcoal);color:var(--ic-bone);
  padding:12px 18px;border-radius:var(--ic-r-btn);
}

/* ---------------------------------------------------------------------------
   4. TYPE
   Weight ceiling is 500. There is no 600 and there will not be one.
   Hierarchy comes from size and tracking, not weight.
   ------------------------------------------------------------------------ */

.ic-dxl{font-family:var(--ic-f-display);font-weight:500;font-size:var(--ic-t-dxl);line-height:1.02;letter-spacing:-.025em}
.ic-dl {font-family:var(--ic-f-display);font-weight:500;font-size:var(--ic-t-dl); line-height:1.06;letter-spacing:-.02em}
.ic-dm {font-family:var(--ic-f-display);font-weight:300;font-size:var(--ic-t-dm); line-height:1.2; letter-spacing:-.01em}
.ic-ds {font-family:var(--ic-f-display);font-weight:400;font-size:var(--ic-t-ds); line-height:1.25;letter-spacing:-.005em}

.ic-lede {font-size:var(--ic-t-lede); line-height:1.55;font-weight:300}
.ic-body {font-size:var(--ic-t-body); line-height:1.65;font-weight:300}
.ic-bodys{font-size:var(--ic-t-bodys);line-height:1.6; font-weight:300}

.ic-label{
  font-family:var(--ic-f-mono);font-weight:400;font-size:var(--ic-t-label);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.4;
}

.ic-measure{max-width:62ch}
.ic-measure-s{max-width:46ch}

/* ---------------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------------ */

.ic-wrap{max-width:var(--ic-max);margin:0 auto;padding-left:var(--ic-gut);padding-right:var(--ic-gut)}
.ic-sec{padding-top:var(--ic-sec);padding-bottom:var(--ic-sec)}
.ic-sec-mini{padding-top:var(--ic-sec-mini);padding-bottom:var(--ic-sec-mini)}

.ic-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.5vw,40px)}
.ic-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,40px)}
.ic-grid-tight{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}

/* a rule above a group, the system's preferred separator over per-row borders */
.ic-ruled{border-top:1px solid var(--ic-line);padding-top:clamp(28px,3vw,40px);margin-top:clamp(40px,4vw,60px)}

/* ---------------------------------------------------------------------------
   6. BUTTON
   Three variants and nothing else. One label per intent across a page.
   44px minimum target everywhere, including the ghost.
   ------------------------------------------------------------------------ */

.ic-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:11px 22px;
  border-radius:var(--ic-r-btn);
  text-decoration:none;font-size:14px;font-weight:400;letter-spacing:.01em;
  white-space:nowrap;box-shadow:none;
  transition:transform .2s var(--ic-ease),background-color .2s var(--ic-ease),
             color .2s var(--ic-ease),box-shadow .2s var(--ic-ease),
             border-color .2s var(--ic-ease);
}
.ic-btn:active{transform:translateY(0)}

/* primary. The only element that carries elevation at rest. */
.ic-btn--fill{background-color:var(--ic-bone);color:var(--ic-charcoal);box-shadow:var(--ic-e1),var(--ic-edge)}
.ic-btn--fill:hover{background-color:var(--ic-paper);box-shadow:var(--ic-e2),var(--ic-edge);transform:translateY(-2px)}
.ic-light .ic-btn--fill{background-color:var(--ic-charcoal);color:var(--ic-bone)}
.ic-light .ic-btn--fill:hover{background-color:#1F1E1C}

/* secondary */
.ic-btn--ghost{border:1px solid var(--ic-line);color:inherit}
.ic-btn--ghost:hover{border-color:currentColor}

/* tertiary. Lowest weight action in the system and it still reads as one. */
.ic-btn--link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  text-decoration:none;font-size:14px;
  border-bottom:1px solid currentColor;padding-bottom:1px;
  align-self:flex-start;
}

/* ---------------------------------------------------------------------------
   7. PILL
   The archive register. Specimen codes, categories, counts.
   ------------------------------------------------------------------------ */

.ic-pill{
  display:inline-flex;align-items:center;
  border-radius:var(--ic-r-pill);
  padding:5px 11px;
  border:1px solid var(--ic-line);
}
.ic-pill--onmedia{
  position:absolute;left:16px;bottom:16px;
  background-color:rgba(44,42,40,.82);
  color:var(--ic-ink-d-1);
  border-color:var(--ic-ink-d-h);
}

/* ---------------------------------------------------------------------------
   8. CARD
   One object with variants. The v15 page had three near-identical card classes
   (.cat, .pcard, .bd); they are the same component and are unified here.
   Structure: .ic-card > .ic-card-media > img + .ic-pill--onmedia
                       > .ic-card-body
   ------------------------------------------------------------------------ */

.ic-card{
  display:flex;flex-direction:column;
  border-radius:var(--ic-r-card);
  overflow:hidden;
  text-decoration:none;
  background-color:var(--ic-surface);
  border:1px solid var(--ic-line);
  box-shadow:var(--ic-e1),var(--ic-edge);
  transition:transform .45s var(--ic-ease),box-shadow .45s var(--ic-ease),
             background-color .45s var(--ic-ease);
}
.ic-card:hover{transform:translateY(var(--ic-lift));box-shadow:var(--ic-e3),var(--ic-edge)}
.ic-dark .ic-card:hover{background-color:rgba(240,230,213,.09)}

/* Inverted card: a dark object sitting on the light canvas.
   It must re-scope ink, line and focus, exactly as .ic-dark does. Without this
   the canvas-aware helpers keep resolving to the LIGHT canvas ink and you get
   charcoal text on a charcoal card at a contrast ratio of 1.00. */
.ic-card--invert{
  background-color:var(--ic-charcoal);
  color:var(--ic-ink-d-1);
  border-color:transparent;
  --ic-line:var(--ic-ink-d-h);
  --ic-focus:var(--ic-bone);
  --ic-surface:rgba(240,230,213,.05);
  --ic-ink-full:var(--ic-ink-d-1);
  --ic-ink-mute:var(--ic-ink-d-3);
}
.ic-light .ic-card--invert .ic-dim,   .ic-card--invert .ic-dim   {color:var(--ic-ink-d-2)}
.ic-light .ic-card--invert .ic-dimmer,.ic-card--invert .ic-dimmer{color:var(--ic-ink-d-3)}

.ic-card-media{aspect-ratio:4/5;position:relative;overflow:hidden}
.ic-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ic-ease)}
.ic-card:hover .ic-card-media img{transform:scale(1.04)}

.ic-card-body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1;gap:8px}

/* footer row that pins to the bottom of a card of any height */
.ic-card-foot{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}

/* full-width caption bar over the base of the media, for named people */
.ic-card-tag{
  position:absolute;left:0;right:0;bottom:0;
  background-color:rgba(44,42,40,.86);color:var(--ic-ink-d-1);
  padding:9px 14px;
}

/* ---------------------------------------------------------------------------
   9. BENTO
   Dense auto-flow. Feature spans 2x2, wide spans 2x1. Those two spans are what
   close the grid with no empty cells. Verified at 1440, 1024, 900, 390.
   ------------------------------------------------------------------------ */

.ic-bento{
  display:grid;grid-auto-flow:dense;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.ic-bento > *{grid-column:span 1}
.ic-bento .ic-card--feature{grid-column:span 2;grid-row:span 2}
.ic-bento .ic-card--wide{grid-column:span 2}
.ic-card--feature .ic-card-media{aspect-ratio:1/1}
.ic-card--wide .ic-card-media{aspect-ratio:16/10}

/* ---------------------------------------------------------------------------
   10. INDEXED ROW
   The alternative to three equal cards. Each row carries its own metadata
   without a box, and the number does the ordering work.
   Structure: .ic-rows > .ic-row > .ic-row-n + h3 + .ic-row-meta + action
   ------------------------------------------------------------------------ */

.ic-rows{border-top:1px solid var(--ic-line)}
.ic-row{
  display:grid;
  grid-template-columns:auto 1fr 1.15fr auto;
  gap:clamp(16px,3vw,44px);
  align-items:start;
  padding:clamp(32px,3.6vw,46px) 0;
  border-bottom:1px solid var(--ic-line);
  position:relative;
  transition:background-color .3s var(--ic-ease);
}
/* a rule that draws itself across on hover */
.ic-row::before{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
  background-color:currentColor;
  transition:width .5s var(--ic-ease);
}
.ic-row:hover::before{width:100%}
.ic-row:hover{background-color:var(--ic-surface)}
.ic-row:hover .ic-row-n{color:var(--ic-ink-full)}

.ic-row-n{
  font-family:var(--ic-f-display);font-weight:300;
  font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:-.02em;
  padding-top:2px;min-width:2ch;
  color:var(--ic-ink-mute);
  transition:color .3s var(--ic-ease);
}
.ic-row-meta{display:grid;gap:14px}

/* ---------------------------------------------------------------------------
   11. DISCLOSURE
   One component. v15 used it twice under two names (.step and .q) with
   identical mechanics. Height is animated, not max-height, so long and short
   panels open at the same speed. Requires index-ds.js.
   Structure: .ic-disc[data-open] > button.ic-disc-h > ... + .ic-disc-x
                                  > .ic-disc-b > .ic-disc-b-in
   ------------------------------------------------------------------------ */

.ic-disc{border-bottom:1px solid var(--ic-line)}
.ic-disc-h{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:20px;
  align-items:center;text-align:left;padding:22px 0;min-height:44px;
}
.ic-disc-h--simple{grid-template-columns:1fr auto;padding:20px 0}
.ic-disc-b{overflow:hidden;height:0;transition:height .4s var(--ic-ease)}
.ic-disc-b-in{padding-bottom:24px;display:grid;gap:12px}
.ic-disc-x{font-size:20px;font-weight:300;line-height:1;transition:transform .3s var(--ic-ease)}
.ic-disc[data-open="true"] .ic-disc-x{transform:rotate(45deg)}

/* ---------------------------------------------------------------------------
   12. SPEC STRIP
   Four label/value pairs under a hero or across the base of a section.
   Grouped pairs, no per-row rule. Replaces the border-t-on-every-row default.
   ------------------------------------------------------------------------ */

.ic-spec{
  border-top:1px solid var(--ic-line);
  margin-top:clamp(32px,5vh,52px);
  padding-top:clamp(20px,2.4vw,28px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.ic-spec dt{margin-bottom:6px}
.ic-spec dd{font-size:var(--ic-t-bodys);line-height:1.5}

/* ---------------------------------------------------------------------------
   13. PANEL
   A raised surface for data. The one place elevation is used at rest on a
   light canvas, because the panel is meant to read as a physical artefact.
   ------------------------------------------------------------------------ */

.ic-panel{
  border:1px solid var(--ic-line);
  border-radius:var(--ic-r-card);
  padding:clamp(22px,2.4vw,32px);
  background-color:var(--ic-surface);
  box-shadow:var(--ic-e2),var(--ic-edge);
}
.ic-panel--flat{box-shadow:none}

.ic-panel-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:15px 0}
.ic-panel-row + .ic-panel-row{border-top:1px solid var(--ic-line)}

/* ---------------------------------------------------------------------------
   14. STAT
   Label above, display numeral below. Never a card, never a box.
   ------------------------------------------------------------------------ */

.ic-stat{display:grid;gap:7px}
.ic-stat-v{
  font-family:var(--ic-f-display);font-weight:300;
  font-size:clamp(22px,2vw,26px);line-height:1.15;
}

/* the second-read moment. One per page, maximum. */
.ic-numeral{
  font-family:var(--ic-f-display);font-weight:300;
  font-size:clamp(96px,13vw,190px);line-height:.78;letter-spacing:-.04em;
  color:var(--ic-ink-mute);
}

/* ---------------------------------------------------------------------------
   15. SPARKLINE
   The only chart form in the system. Persimmon on Charcoal at 4.71, which is
   the one canvas Persimmon is legible on.
   ------------------------------------------------------------------------ */

.ic-spark{width:100%;height:72px;margin:6px 0 2px;color:var(--ic-persimmon);display:block}
.ic-spark-line{
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.ic-spark.ic-draw .ic-spark-line{animation:ic-sparkdraw 1.6s var(--ic-ease) forwards}
.ic-spark-dot{fill:currentColor;opacity:0}
.ic-spark.ic-draw .ic-spark-dot{animation:ic-sparkdot .4s var(--ic-ease) 1.4s forwards}
@keyframes ic-sparkdraw{to{stroke-dashoffset:0}}
@keyframes ic-sparkdot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

/* ---------------------------------------------------------------------------
   16. HEADER
   Sticky, always on Charcoal, gains elevation once the page has moved.
   ------------------------------------------------------------------------ */

.ic-hd{
  position:sticky;top:0;z-index:80;
  background-color:var(--ic-charcoal);color:var(--ic-ink-d-1);
  border-bottom:1px solid var(--ic-ink-d-h);
  --ic-focus:var(--ic-bone);
  transition:box-shadow .35s var(--ic-ease);
}
.ic-hd.ic-lifted{box-shadow:var(--ic-e2)}
.ic-hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.ic-mark{text-decoration:none;display:flex;align-items:center;min-height:44px}
.ic-mark img{height:22px;width:auto}

/* ---------------------------------------------------------------------------
   17. STICKY ACTION
   Appears after the hero leaves, dismissible, never blocks the footer.
   Its own elevation, because it floats over content rather than sitting in it.
   ------------------------------------------------------------------------ */

.ic-sticky{
  position:fixed;right:24px;bottom:24px;z-index:70;
  display:flex;align-items:stretch;
  background-color:var(--ic-bone);color:var(--ic-charcoal);
  border-radius:var(--ic-r-pill);overflow:hidden;
  box-shadow:0 2px 6px rgba(30,28,26,.10),0 14px 34px -10px rgba(30,28,26,.34);
  opacity:0;transform:translateY(10px) scale(.97);
  pointer-events:none;transform-origin:bottom right;
  transition:opacity .4s var(--ic-ease),transform .4s var(--ic-ease);
}
.ic-sticky.ic-on{opacity:1;transform:none;pointer-events:auto}
.ic-sticky a{display:flex;align-items:center;gap:10px;padding:13px 20px;text-decoration:none;min-height:44px}
.ic-sticky a:hover{background-color:var(--ic-cream)}
.ic-sticky-x{
  display:flex;align-items:center;justify-content:center;
  width:44px;min-height:44px;
  border-left:1px solid rgba(44,42,40,.70);
  color:rgba(44,42,40,.70);
}
.ic-sticky-x:hover{background-color:var(--ic-cream);color:var(--ic-charcoal)}

/* ---------------------------------------------------------------------------
   18. MOTION
   transform and opacity only. IntersectionObserver, never a scroll listener.
   Everything collapses to static under reduced motion.
   ------------------------------------------------------------------------ */

/* scroll reveal. --i sets the stagger index. */
.ic-rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ic-ease),transform .7s var(--ic-ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.ic-rv.ic-in{opacity:1;transform:none}

/* parallax figure. Base scale gives the transform headroom so nothing pops. */
.ic-par{will-change:transform}
.ic-par img{transform:scale(1.08)}

/* the oversize numeral arrives with weight */
.ic-numeral.ic-rv{transform:translateY(10px) scale(.86);transform-origin:left center;
  transition:opacity .9s var(--ic-ease),transform .9s var(--ic-ease)}
.ic-numeral.ic-rv.ic-in{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ic-rv{opacity:1 !important;transform:none !important}
  .ic-par img{transform:none !important}
  .ic-spark-line{stroke-dashoffset:0 !important}
  .ic-spark-dot{opacity:1 !important}
}

/* ---------------------------------------------------------------------------
   19. BREAKPOINTS
   Three. 1023 collapses the four-column structures, 767 goes single column.
   ------------------------------------------------------------------------ */

@media (max-width:1023px){
  .ic-bento{grid-template-columns:repeat(2,1fr)}
  .ic-bento .ic-card--feature,.ic-bento .ic-card--wide{grid-column:span 2}
  .ic-grid-3,.ic-grid-tight{grid-template-columns:repeat(2,1fr)}
  .ic-row{grid-template-columns:auto 1fr;row-gap:18px}
  .ic-row-meta{grid-column:1 / -1}
}

@media (max-width:767px){
  .ic-bento{grid-template-columns:1fr}
  .ic-bento .ic-card--feature,.ic-bento .ic-card--wide{grid-column:span 1}
  .ic-grid-2,.ic-grid-3,.ic-grid-tight{grid-template-columns:1fr}
  .ic-spec{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .ic-card--feature .ic-card-media,.ic-card--wide .ic-card-media{aspect-ratio:4/5}
  .ic-sticky{right:16px;bottom:16px;left:16px}
  .ic-sticky a{flex:1;justify-content:center}
}