/* ==========================================================================
   Taq Ventures — homepage-only styles
   Loaded after assets/styles.css on index.html
   ========================================================================== */

/* ---- hero ---- */
/* Kept short so "What we do" starts inside the first screen on a laptop: at
   the 92px / 76px this used to carry, the three pillar titles sat right on the
   fold of a 800px-tall window. */
.hero{
  padding: 60px 0 52px;
  border-bottom: 1px solid var(--line);
}
.hero-tag{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 26px;
}
.hero-tag .rule{
  width: 28px;
  height: 2px;
  background: var(--accent-bright);
}
h1{
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -0.012em;
}
.hero-side{
  padding-bottom: 4px;
}
.hero p{
  color: var(--muted);
  font-size: 18px;
  max-width: 42ch;
  margin-bottom: 28px;
}
/* The positioning line, demoted out of the h1 and into the side column. Sits a
   step above the ordinary hero paragraph because it is now the sentence that
   does the selling, with one phrase picked out in the brand accent — see
   heroStatement() in netlify/edge-functions/lib/static-copy-map.mjs. */
.hero .hero-statement{
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: -0.004em;
  max-width: 30ch;
  text-wrap: pretty;
}
.hero .hero-statement .hero-accent{
  color: var(--accent);
  font-weight: 500;
}
/* The hero's action pair. .btn-row supplies spacing above, but .hero p already
   leaves 28px under the positioning line, so that margin is zeroed here to
   keep the gap the single button had before there were two of them. What this
   rule adds is the gap and the wrap, because both labels are nowrap and the
   phone has to drop below the booking button on a narrow screen rather than
   shrink or overflow. Flex rather than relying on the inline-block whitespace,
   so the gap survives when they stack. */
.hero .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
}

/* ---- about band: the information beat between "What we do" and the grader ----
   Built on the page's own .split geometry (1.2fr / 1fr) rather than a ratio of
   its own, so the band lines up with every other section on the page and the
   onward rule closes on the same right margin as the ones above and below it.
   Two overrides: align-items:start, so the headline sits on the prose's first
   line instead of floating to the middle of it, and a wider gap, because the
   right column here holds paragraphs rather than a one-line subhead.

   The prose takes the narrower column deliberately. styles.css says .split is
   "not used for long-form body paragraphs", and it is right — half of the
   1056px wrap is already a 60-character line. At 1.2fr / 1fr the column lands
   near 54 characters, so the measure needs no max-width of its own and the
   onward hairline runs the exact width of the text. An earlier pass gave the
   prose the wider column and clamped it to 58ch instead, which read fine but
   left the hairline ending 80px short of the page margin for no reason a
   visitor could see.

   Nothing is added to the visual language here — no card, no shadow, no second
   accent. The only accent in the band is the eyebrow rule and the onward link,
   and the two hairlines that bound it are the hero's bottom border and
   section.block's own. */
.home-about-grid{
  align-items: start;
  gap: 56px;
}
.home-about-eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 22px;
}
.home-about-eyebrow .rule{
  width: 28px;
  height: 2px;
  background: var(--accent-bright);
}
/* Sized between the hero h1 and the 32px section h2s, so the page keeps one
   descending scale rather than two headings competing at the same weight. */
.home-about-lead h2{
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.01em;
  max-width: 18ch;
  text-wrap: balance;
}
/* The photo or video uploaded from admin.html (see assets/home-about-media.js).
   Fills the space under the headline in the lead column; hidden until there is
   something to show. */
.home-about-media{
  margin: 32px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.home-about-media[hidden]{ display: none; }
.home-about-media img,
.home-about-media video{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}
.home-about-body p{
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
/* An editorial lede: the opening paragraph carries full text colour and a step
   more size, the rest settle into the muted body size. That gives the band
   internal hierarchy without a second typeface or a second accent. */
.home-about-body p:first-child{
  color: var(--text);
  font-size: 19px;
  line-height: 1.55;
}
.home-about-body p + p{ margin-top: 18px; }
/* Collapses 60px earlier than .split does. The right column is prose, and by
   840px the two-column form has squeezed it under 40 characters — the point at
   which stacking reads better than holding the grid. */
@media (max-width: 860px){
  .home-about-grid{ grid-template-columns: 1fr; gap: 26px; }
  .home-about-lead h2{ max-width: 26ch; }
}
@media (max-width: 640px){
  .home-about-eyebrow{ margin-bottom: 16px; }
  .home-about-body p{ font-size: 16px; }
  .home-about-body p:first-child{ font-size: 17px; }
}

/* ---- section shell (spec-sheet style, reused across blocks) ---- */
section.block{
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.block-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 24px;
  margin-bottom: 40px;
}
.block-head h2{ font-size: 32px; }

/* ---- what we do: the three pillars ----
   Three columns rather than the spec rows the services used to use here. A row
   works for seven peer items you scan down; these are three parallel choices
   compared side by side, and the outcomes under each only read as a comparison
   when they sit beside one another. Each column is topped by the same hairline
   the rows used, so the section still belongs to the same page.
   Cards are built by pillarsMarkup() in
   netlify/edge-functions/lib/static-copy-map.mjs and assets/render-home.js. */
.pillars-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}
.pillar{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 0 0;
  border-top: 1px solid var(--line-strong);
}
.pillar-title{
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.pillar-subhead{
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
  margin-bottom: 22px;
}
/* The pillar's services, straight through to each service page. Reaching a
   named service from the homepage used to cost two clicks and a guess at which
   pillar held it, because the card only ever handed off to the pillar page.

   Divided rows, not the outline pills these were. Seven pills across the three
   columns were the only 999px radius on the page and read as a tag cloud
   sitting on top of a spec sheet; the rows use the same hairline idiom as the
   ticket list and the service rows below, so the card looks like the rest of
   the page and each service reads unmistakably as a link. Still deliberately
   quieter than the filled button at the foot of the card — three rows of blue
   would leave the card with no primary action. */
.pillar-services{
  list-style: none;
  align-self: stretch;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
}
.pillar-services li{ border-bottom: 1px solid var(--line); }
.pillar-service{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease;
}
/* The arrow is what keeps a borderless row from reading as a sub-heading. Grey
   at rest so three columns of them do not add up to a row of accents. */
.pillar-service::after{
  content: '\2192';
  flex-shrink: 0;
  font-size: 14px;
  color: var(--line-strong);
  transition: color 0.15s ease, transform 0.15s ease;
}
.pillar-service:hover{ color: var(--accent-bright); }
.pillar-service:hover::after{
  color: var(--accent);
  transform: translateX(3px);
}

/* The outcomes are not here any more. Each card used to carry an uppercase
   label on a rule and three or four dashed lines under it, which put a dozen
   separate pieces of text in each of three columns — the section read as a
   wall rather than as three ways in. They are shown in full on each pillar's
   own page instead (.outcomes-list in assets/pillar.css), which is where
   someone comparing the three has the room to read them. */
/* Pushed to the bottom of the column so all three buttons line up even when one
   pillar carries an extra outcome or a longer sub-header. */
.pillar .btn{
  margin-top: auto;
  padding: 10px 18px;
  font-size: 13px;
}
@media (max-width: 900px){
  .pillars-list{ grid-template-columns: 1fr; gap: 0; }
  .pillar{ padding: 22px 0 30px; }
  /* Stacked, the card is as wide as the page, so a service row's title and its
     arrow would sit a screen apart. Cap the rows at a readable measure and let
     the arrow follow the text. */
  .pillar-services{ max-width: 46ch; }
  .pillar .btn{ margin-top: 0; }
  /* Stacked pillars pick up 30px of bottom padding, so the panel below needs
     less air above it than it does beside a three-column grid. */
  .pillars-list + .next-step-row{ margin-top: 8px; }
}

/* The band sits directly under the hero, so it gets more room than the bands
   below it: wider gutters between the three columns, and more space between
   each card's title, sub-header, services and button. At the standard spacing
   the three read as one block of text; spread out, they read as three
   separate ways in. The room goes below and between the cards rather than
   above them — the top padding is tighter than the bands below, so the
   heading lands close under the hero and the pillars sit high on the page.
   Phones are left alone: every band there folds into a heading row (see the
   collapse block below), and extra padding would outrank the folded row's
   own. */
@media (min-width: 641px){
  section.block.home-pillars{ padding: 52px 0 104px; }
  .home-pillars .block-head{ margin-bottom: 44px; }
  .home-pillars .pillars-list{ gap: 0 88px; }
  .home-pillars .pillar{ padding-top: 38px; }
  .home-pillars .pillar-title{ font-size: 30px; margin-bottom: 16px; }
  .home-pillars .pillar-subhead{ margin-bottom: 36px; }
  .home-pillars .pillar-service{ padding: 16px 0; }
  .home-pillars .pillar-services{ margin-bottom: 40px; }
  .home-pillars .next-step-row{ margin-top: 64px; }
}
/* On a wide screen the band steps out past the page's 1120px wrap, so the
   three columns get the extra width as air between them instead of being
   squeezed into the same measure as a two-column split. The heading and the
   closing panel widen with it, so the band still reads as one aligned block. */
@media (min-width: 1280px){
  .home-pillars .wrap{ max-width: 1280px; }
  .home-pillars .pillars-list{ gap: 0 112px; }
}
@media (min-width: 901px) and (max-width: 1080px){
  .home-pillars .pillars-list{ gap: 0 56px; }
}
@media (min-width: 641px) and (max-width: 900px){
  section.block.home-pillars{ padding: 44px 0 80px; }
  .home-pillars .pillars-list{ gap: 0; }
  .home-pillars .pillar{ padding: 30px 0 44px; }
  .home-pillars .pillars-list + .next-step-row{ margin-top: 16px; }
}

/* ---- services: spec rows, not cards ---- */
.row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.row:last-child{ border-bottom: none; }
.row h3{
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}
.row p{
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 14px;
}
.row .btn{
  padding: 8px 16px;
  font-size: 13px;
}
@media (max-width: 640px){
  .row{ grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

/* ---- proven on the job: simple divided list, no outer box ---- */
.ticket-row{
  display:grid;
  grid-template-columns: 190px 1fr 150px;
  gap: 20px;
  align-items:baseline;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.ticket-row:first-child{ border-top: none; }
/* The list's last row already carries 20px of bottom padding, which is part of
   the gap under it — so the panel that closes the section adds the difference
   rather than a second full gap. Same reason on the divided service lists. */
.ticket + .next-step-row{ margin-top: 10px; }
/* When a ticket-row is wrapped in a link (linked case studies), the row is
   no longer a direct first-child of .ticket — this covers that case too. */
.ticket > a:first-child .ticket-row{ border-top: none; }
.ticket > a{ text-decoration:none; color:inherit; display:block; }
.ticket > a .ticket-row .client{ transition: color 0.15s ease; }
.ticket > a:hover .ticket-row .client{ color: var(--accent-bright); }
.ticket-row .client{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size: 19px;
}
.ticket-row .scope{
  color: var(--muted);
  font-size: 15px;
}
.ticket-row .status{
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}
.ticket-row .status.live{ color: var(--accent); }
@media (max-width: 640px){
  .ticket-row{ grid-template-columns: 1fr; gap: 6px; }
  .ticket-row .status{ text-align: left; }
}

/* ---- content & community preview ----
   A band that previews another page's contents rather than describing them.
   The cards are built by assets/home-community.js out of /api/community-board;
   everything here is the frame around them.

   The rail is three columns with descending crop heights (see --crop below),
   which is the whole reason it does not read as the standard row of three
   equal cards: the bottom edge steps down across the row, so the eye runs
   left to right and lands on the panel that follows. Each card is a cropped
   window onto somebody else's post, faded out at the cut, with the link to
   the original underneath — a preview has to look like a preview, or it reads
   as a broken embed. */
.community-band-head{ align-items: flex-end; }
.community-band-note{
  color: var(--muted);
  font-size: 15px;
  max-width: 48ch;
  margin-bottom: 4px;
}
@media (max-width: 800px){
  .community-band-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .community-band-note{ margin-bottom: 0; }
}

.community-rail{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
/* One or two cards on the board should not stretch to fill three columns —
   an embed at 1000px wide is a page, not a card. */
.community-rail[data-count="1"]{ grid-template-columns: minmax(0, 420px); }
.community-rail[data-count="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Two columns keeps each embed wide enough to be readable; the third card
   wraps onto a row of its own, where the descending crop leaves it the
   shortest of the three. */
@media (max-width: 900px){
  .community-rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .community-rail,
  .community-rail[data-count="2"]{ grid-template-columns: minmax(0, 1fr); }
}

.mini-card{
  --crop: 440px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}
/* The step. First card tallest, so the row has a direction. */
.community-rail .mini-card:nth-child(1){ --crop: 480px; }
.community-rail .mini-card:nth-child(2){ --crop: 430px; }
.community-rail .mini-card:nth-child(3){ --crop: 380px; }

.mini-card-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  min-width: 0;
}
.mini-card-platform{
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mini-card-byline{
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-card-date{
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* The window onto the post. Height is the crop; the iframe inside is as tall
   as the platform's own embed wants to be, so what is cut off is the bottom of
   a real post rather than a scaled-down one. */
.mini-card-frame{
  position: relative;
  /* The card shows whichever is shorter: the crop this column allows, or the
     post's own height. A short reply is never given 480px of white space. */
  height: min(var(--crop), var(--frame-height, 620px));
  background: var(--panel);
}
.mini-card-frame iframe{
  display: block;
  width: 100%;
  height: var(--frame-height, var(--crop));
  border: 0;
}
.mini-card-frame[data-ratio]{
  height: auto;
  aspect-ratio: var(--ratio);
}
.mini-card-frame[data-ratio] iframe{ height: 100%; }
/* The cut. Only on a card that is actually cropped, and never over a card
   whose whole post fits. pointer-events off so the post stays usable. */
.mini-card-frame[data-cropped="true"]::after{
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 82%);
  pointer-events: none;
}

/* A quote or a mention card: no embed to frame, so the words are the card. */
.mini-card-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 16px;
}
.mini-card-title{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
}
.mini-card-quote{
  font-size: 15px;
  line-height: 1.55;
}
.mini-card-quote::before{ content: '\201C'; }
.mini-card-quote::after{ content: '\201D'; }
.mini-card-attrib{
  color: var(--muted);
  font-size: 14px;
}
.mini-card-foot{
  padding: 11px 15px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.mini-card-foot a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.mini-card-foot a:hover{ color: var(--accent-bright); text-decoration: underline; }

/* Loading. Placeholder bars in the shape of a card rather than a spinner, so
   the band does not change height when the real posts arrive. */
.mini-card.is-loading .mini-card-frame{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  background: #FFFFFF;
}
.mini-card-bar{
  height: 12px;
  border-radius: 2px;
  background: var(--line);
  animation: mini-card-pulse 1.5s ease-in-out infinite;
}
.mini-card-bar:nth-child(2){ width: 82%; animation-delay: 0.12s; }
.mini-card-bar:nth-child(3){ width: 64%; animation-delay: 0.24s; }
.mini-card-bar-block{
  flex: 1;
  min-height: 90px;
  border-radius: 3px;
  background: var(--panel);
  animation: mini-card-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.36s;
}
@keyframes mini-card-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce){
  .mini-card-bar,
  .mini-card-bar-block{ animation: none; }
}

/* What ships in the HTML, and what stays on screen when the board is empty,
   unreachable, or the visitor has no JavaScript. It says what is through the
   link instead of apologising for an empty rail. */
.community-fallback{
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
  padding: 26px 26px 24px;
  max-width: 64ch;
}
.community-fallback h3{ font-size: 23px; margin-bottom: 8px; }
.community-fallback p{
  color: var(--muted);
  font-size: 15px;
}
@media (max-width: 640px){
  .community-fallback{ padding: 20px; }
  .community-fallback h3{ font-size: 21px; }
  .community-rail{ gap: 18px; }
}

/* ---- footprint line ----
   One heading and one sentence, so it takes a fraction of the padding
   section.block gives the list sections above it. At the full 64px it claimed
   the same vertical space as the three pillars or the case-study list and read
   as a section that had lost its contents. It is a closing fact on the way to
   the CTA, and now looks like one. */
.footprint{ padding: 34px 0; }
.footprint h2{ font-size: 24px; }
.footprint p{
  color: var(--muted);
  font-size: 16px;
}
.footprint strong{ color: var(--text); font-weight: 500; }

/* ---- closing CTA ---- */
.cta-block{ padding: 80px 0; }
/* Was 34px, which made the last heading on the page the largest h2 on it —
   above the 32px section headings it follows. The band gets its emphasis from
   80px of padding and a filled button, so the type can sit level with the rest
   of the page instead of outranking it. */
.cta-block h2{
  font-size: 32px;
}
.cta-block p{
  color: var(--muted);
  margin-bottom: 24px;
}

/* ---- mobile vertical rhythm ----
   The desktop hero reserves 92px above the eyebrow, which on a phone pushes the
   headline most of a screen down and leaves the fold showing empty gradient.
   See the matching block in styles.css. */
@media (max-width: 640px){
  .hero{ padding: 40px 0; }
  .block-head{ margin-bottom: 24px; }
  .hero-tag{ margin-bottom: 18px; }
  .hero p{ font-size: 17px; margin-bottom: 22px; }
  .hero-side{ padding-bottom: 0; }
  section.block{ padding: 40px 0; }
  .block-head h2{ font-size: 28px; }
  .footprint{ padding: 26px 0; }
  .footprint h2{ font-size: 22px; }
  .cta-block{ padding: 44px 0; }
  .cta-block h2{ font-size: 28px; }
  .ticket-row{ padding: 16px 0; }
}

/* ---- phone: every band below the hero folds shut ----
   A phone gets the hero and then a scannable list of headings, instead of six
   full-height sections between the visitor and the bottom of the page. Each
   band keeps its own copy exactly as it is on desktop — the only difference is
   that it starts closed and opens on a tap.

   The structure this styles is built at runtime by assets/home-collapse.js
   from the data-collapse annotations in index.html, and torn down again above
   640px, so none of these classes exist on a desktop viewport. They are still
   scoped to the query: a resize past the breakpoint fires the teardown a beat
   after the query flips, and the media query covers that beat.

   The mark, and its rotate-to-close, are lifted from the FAQ accordion in
   styles.css so the two behave like one control. Nothing else is added to the
   visual language: no card, no chevron, no second accent. */
@media (max-width: 640px){
  /* Style a folded body by class, never by id: an id selector outranks this
     rule and the band then stays open however often the toggle is pressed.
     That is why the pillars grid is .pillars-list and not #pillars-list, even
     though the id is still there for the render scripts to find. */
  .section-collapse:not(.is-open) [data-collapse-body]{ display: none; }
  /* One tint down the whole list. Closed, these bands are a column of
     headings a thumb runs down, and a band showing the bare fog directly above
     one carrying the grader's tint reads as two different kinds of thing
     rather than the same control repeated six times. So every band takes the
     colour the grader band already had — the veil rather than an opaque panel,
     so the ambient wash still drifts behind the list instead of stopping dead
     at the first heading. .grader-promo sets exactly this value in styles.css
     and is unaffected either way; above 640px the class does not exist, so
     desktop keeps its alternating bands. */
  .section-collapse{ background: var(--panel-veil); }
  /* Closed, a band is a row rather than a section — the section padding it
     carries open would leave 40px of air above and below one heading, and six
     of those read as a page of gaps. */
  .section-collapse:not(.is-open){
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .section-collapse:not(.is-open) .block-head{ margin-bottom: 0; }
  /* The grader's heading carries 16px below it for the paragraph that is
     folded away, which would sit the closed row 16px off centre. */
  .section-collapse:not(.is-open) .section-collapse-head h2{ margin-bottom: 0; }
  .section-collapse-head{
    position: relative;
    /* Keeps the heading clear of the mark. */
    padding-right: 44px;
    cursor: pointer;
  }
  /* 44px of tap target, hung far enough right that the glyph inside it lands
     on the page's right margin rather than floating 20px inside it. */
  .section-collapse-toggle{
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .section-collapse-mark{
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
    transition: transform 0.2s ease;
  }
  .section-collapse.is-open .section-collapse-mark{ transform: rotate(45deg); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce){
  .section-collapse-mark{ transition: none; }
}
/* ==========================================================================
   Design refresh — homepage specifics. The slate band itself, its colours and
   the lifting buttons are shared in styles.css ("Page band") so every page
   opens the same way; what is left here is the hero's larger type and the
   featured pillar below it.
   ========================================================================== */
.hero{ padding: 84px 0 80px; }
.hero h1{
  font-size: clamp(42px, 5.6vw, 66px);
  line-height: 0.98;
}
.hero-tag{ font-size: 13px; }
@media (max-width: 640px){
  .hero{ padding: 56px 0 52px; }
}

/* ---- section headings: heavier, like the hero ---- */
.block-head h2,
.home-about-lead h2{ font-weight: 700; }
.block-head h2{ font-size: clamp(32px, 3.6vw, 40px); }

/* ---- what we do: the featured pillar ----
   Media leads the row on a slate card of its own, so the first thing under the
   hero is the service we most want asked about. The other two keep the
   hairline-topped columns. */
.home-pillars .pillar.pillar-featured{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(140, 195, 245, 0.22), transparent 60%),
    var(--band);
  color: #FFFFFF;
  border-top: 3px solid var(--band-rule);
  border-radius: 8px;
  padding: 30px 28px 30px;
  box-shadow: 0 22px 44px -30px rgba(51, 70, 95, 0.55);
}
.pillar-flag{
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 100px;
  background: #FFFFFF;
  color: var(--accent-solid);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pillar-featured .pillar-title,
.pillar-featured .pillar-service{ color: #FFFFFF; }
.pillar-featured .pillar-subhead{ color: var(--band-body); }
.pillar-featured .pillar-services,
.pillar-featured .pillar-services li{ border-color: var(--band-line); }
.pillar-featured .pillar-service::after{ color: rgba(255, 255, 255, 0.55); }
.pillar-featured .pillar-service:hover{ color: #D6E8F8; }
.pillar-featured .pillar-service:hover::after{ color: #FFFFFF; }
.pillar-featured .btn{ background: #FFFFFF; color: var(--accent-solid); }
.pillar-featured .btn:hover{ background: #EAF1F9; color: var(--accent-solid); }
.pillar-featured a:focus-visible{ outline-color: #FFFFFF; }
.pillar-title{ font-weight: 700; }
/* The flag takes the room a plain card spends above its title, so the three
   titles still sit near one line. */
@media (min-width: 901px){
  .home-pillars .pillar.pillar-featured{ margin-top: -30px; }
}
@media (min-width: 1280px){
  .home-pillars .pillars-list{ gap: 0 80px; }
}

/* ---- go-to-market bundle panel ---- */
.bundle{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px 56px;
  margin-top: 56px;
  padding: 36px 40px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-bright);
  border-radius: 8px;
}
.bundle-eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.bundle-eyebrow .rule{
  width: 28px;
  height: 2px;
  background: var(--accent-bright);
}
.bundle-heading{
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  margin-bottom: 12px;
}
.bundle-intro{
  color: var(--muted);
  font-size: 17px;
  max-width: 46ch;
}
.bundle-items{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-self: center;
  border-top: 1px solid var(--line-strong);
}
.bundle-items li{
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
}
.bundle-items li::before{
  content: '\2713';
  color: var(--accent-bright);
  font-weight: 700;
  flex-shrink: 0;
}
.bundle-callback{ grid-column: 1 / -1; }
.bundle-callback > summary{
  display: inline-block;
  list-style: none;
}
.bundle-callback > summary::-webkit-details-marker{ display: none; }
.bundle-callback > summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.bundle-callback[open] > summary{ margin-bottom: 22px; }
.bundle-form{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.bundle-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.bundle-field-wide{ grid-column: 1 / -1; }
.bundle-field input,
.bundle-field textarea{
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--text);
}
.bundle-field textarea{ resize: vertical; }
/* The callback form's spam honeypot, moved off-screen rather than hidden —
   same rule and same reasons as .form-honeypot in assets/contact.css, which
   this page does not load. */
.bundle-form .form-honeypot{
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bundle-field input:focus-visible,
.bundle-field textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bundle-submit-row{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.bundle-submit-row .form-note{ margin: 0; }
@media (max-width: 900px){
  .bundle{ grid-template-columns: 1fr; padding: 28px 24px; }
  .bundle-form{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .bundle-items{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .bundle{ margin-top: 28px; }
}