/* ==========================================================================
   SmartEdge — Company page
   Composition taken from packagedesign/02_COMPANY/01_MOCKUP_DESKTOP.png.
   Colours, type, buttons, radius, container and breakpoints all come from the
   approved design system in main.css, so this file only describes the layout
   that is specific to the Company page.

   Loaded only on /company/ (see smartedge_enqueue()).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Local accents sampled from the approved Company mockup
   -------------------------------------------------------------------------- */
.se-body.is-company{
  --co-peach:#fde7d3;
  --co-blue:#e2effe;
  --co-purple:#f2e2ff;
  --co-green:#ddf4e9;
  --co-pink:#ffe8e5;
  --co-amber:#fdf0da;
  --co-indigo:#1d4ed8;

  /* The approved Company page runs slightly tighter between sections than the
     Home page, which uses longer editorial bands. */
  --se-section-y:3px;
}

.se-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
/*
 * The hero is sized to the supplied artwork's own ratio (614:220) so the
 * value panel on the right of the image is never cropped away, with a floor
 * that still gives the overlaid copy room on narrow screens.
 */
/*
 * The artwork is anchored right so the value panel printed into the image is
 * never cropped, and the copy column sits on the quieter left of the frame
 * over a light scrim. Height is content-driven with a floor, so the copy is
 * never clipped on narrow screens.
 */
.se-cohero{position:relative;background:var(--se-white);overflow:hidden;isolation:isolate;min-height:clamp(300px,27vw,400px);display:flex;align-items:center}
.se-cohero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.se-cohero__img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* The copy sits on the artwork, so the left side carries a soft light wash
   that keeps the H1 and body text at full contrast. */
.se-cohero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,.62) 44%,rgba(255,255,255,0) 60%);
}

.se-cohero__grid{position:relative;z-index:2;width:100%;padding-block:clamp(30px,3.6vw,54px) clamp(34px,4.2vw,60px)}
/*
 * The copy column is sized so the approved H1 keeps its three-line shape at
 * desktop rather than stretching to five. 1ch is derived from the display
 * face, so the measure tracks the H1 as the fluid type scale changes.
 */
.se-cohero__content{max-width:clamp(28.5rem,42vw,33rem)}
.se-cohero__title{margin:0 0 .7rem}
.se-cohero__lead{font-size:1rem;line-height:1.62;color:var(--se-ink);margin:0 0 1.25rem;max-width:42ch}
.se-cohero__actions{display:flex;flex-wrap:wrap;gap:12px}

/*
 * The value panel (People First, Innovation Driven, Client Success, Global
 * Impact) used to be part of the supplied hero artwork, so the same four points
 * were published as visually hidden text rather than rebuilt visibly, to avoid
 * printing them twice. The hero artwork is no longer there, so the band below it
 * is now the only place these four appear and they are printed as real text.
 *
 * The screen-reader-only rule is therefore scoped to the hero alone, which is
 * where the duplication would have been. Left unscoped it also hit the visible
 * band in inc/company-sections.php: a rule from company.css collapsed that band
 * to a 1px clipped box, so the four values were invisible on the page while
 * still being counted in the document, and the section rendered as a 61px empty
 * navy strip.
 */
.se-cohero .se-cohero__values{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   2. Highlights band  (evidence-gated)
   -------------------------------------------------------------------------- */
.se-cohighlights{background:var(--se-cream);border-block:1px solid color-mix(in srgb,var(--se-orange) 12%,transparent)}
.se-cohighlights__grid{list-style:none;margin:0;padding:24px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.se-cohighlights__grid--few{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.se-cohighlights__item{display:flex;align-items:flex-start;gap:14px;position:relative}
.se-cohighlights__item+.se-cohighlights__item::before{
  content:'';position:absolute;left:-10px;top:6px;bottom:6px;width:1px;background:var(--se-line);
}
.se-cohighlights__icon{
  flex:none;width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--co-peach);color:var(--se-orange-ink);
}
.se-cohighlights__body{display:flex;flex-direction:column;min-width:0}
.se-cohighlights__value{font-family:var(--se-font-head);font-size:1.75rem;font-weight:800;color:var(--se-navy);line-height:1.05;letter-spacing:-.02em}
.se-cohighlights__label{font-family:var(--se-font-head);font-weight:700;font-size:.9375rem;color:var(--se-navy);margin-top:4px}
.se-cohighlights__desc{font-size:.8125rem;color:var(--se-ink-soft);margin-top:2px}

/* --------------------------------------------------------------------------
   3. Story + journey
   -------------------------------------------------------------------------- */
.se-costory__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);align-items:start}
.se-costory__intro .se-btn{margin-top:20px}
.se-costory__body{font-size:.9375rem;line-height:1.68;color:var(--se-ink)}
.se-costory__body p{margin:0 0 .85em}

/* The supplied story visual is roughly 1.13:1, so it is held at that ratio
   rather than stretched to the tallest column. */
.se-costory__media{align-self:start;display:grid;gap:14px}

/*
   Bug fix #3: the story, photograph and timeline columns were 375px, 729px and
   519px in the same 729px row, so 354px sat empty under the story and 210px
   under the timeline. The 24/7 care card and the team card take those two
   bands. Both are sized against the existing card, so the row is now three
   columns of near-equal height and the section is not any taller.
*/
/* The card is a designed visual rather than a photograph. A stock picture of a
   support desk would imply a call-centre operation the business does not
   claim to run, and reusing the team photograph here would show the same image
   twice in one section. */
.se-costory__care{
  margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:24px 22px;border-radius:var(--se-radius);
  background:var(--se-tint);border:1px solid var(--se-line-soft)
}
.se-costory__careicon{display:flex;flex:none;width:46px;height:46px;border-radius:var(--se-radius-sm);background:#fff;color:var(--se-blue);align-items:center;justify-content:center;box-shadow:var(--se-shadow-sm)}
.se-costory__caretitle{margin:0;font-family:var(--se-font-head);font-size:1.125rem;font-weight:800;color:var(--se-navy);line-height:1.3}
.se-costory__caretext{margin:0;font-size:.8125rem;line-height:1.62;color:var(--se-ink-soft)}
.se-costory__care .se-btn{margin-top:4px}
.se-costory__img{width:100%;aspect-ratio:295/260;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow)}
/* Correction pass: the support banner closes the space the photograph left
   in this column. It is deliberately short, so the row is still set by the
   journey list rather than by the banner. */
.se-costory__promo .se-promo__text{font-size:.8125rem}

.se-cojourney{position:relative}
.se-cojourney__eyebrow{margin-bottom:.9rem}
.se-cojourney__list{list-style:none;margin:0;padding:0;position:relative}
.se-cojourney__item{position:relative;display:flex;gap:14px;padding:0 0 20px}
.se-cojourney__item:last-child{padding-bottom:0}
/* The approved connector is a fine dotted rule between the markers. */
.se-cojourney__item:not(:last-child)::after{
  content:'';position:absolute;left:19px;top:42px;bottom:4px;width:2px;
  background-image:linear-gradient(var(--se-line) 55%,transparent 0);
  background-size:2px 8px;
}
.se-cojourney__marker{
  flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--co-peach);color:var(--se-orange-ink);
}
.se-cojourney__body{display:flex;flex-direction:column;min-width:0;padding-top:1px}
.se-cojourney__year{font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;color:var(--se-navy);line-height:1.25}
.se-cojourney__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.35;margin-top:1px}
.se-cojourney__text{font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft);margin-top:2px}

.se-cojourney__item--i1 .se-cojourney__marker{background:var(--co-blue);color:#1d6fd0}
.se-cojourney__item--i2 .se-cojourney__marker{background:var(--co-purple);color:#7c3aed}
.se-cojourney__item--i3 .se-cojourney__marker{background:var(--co-green);color:#12855a}
.se-cojourney__item--i4 .se-cojourney__marker{background:var(--co-peach);color:var(--se-orange-ink)}

/* Bug fix #3: small closing team card. It fills the band under the last
   timeline entry rather than starting a new section. */
.se-cojourney__team{margin:20px 0 0;display:grid;gap:8px}
.se-cojourney__teamimg{width:100%;aspect-ratio:295/150;object-fit:cover;object-position:50% 40%;display:block;border-radius:var(--se-radius);box-shadow:var(--se-shadow-sm)}
.se-cojourney__teamcap{font-size:.75rem;line-height:1.5;color:var(--se-ink-soft)}

/* --------------------------------------------------------------------------
   4. Mission / Vision / Values
   -------------------------------------------------------------------------- */
.se-comvv{background:var(--se-blue-soft)}
.se-comvv__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.se-comvv__card{
  display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--se-line-soft);
  border-radius:var(--se-radius);padding:24px 22px;box-shadow:var(--se-shadow-sm);
}
.se-comvv__icon{
  flex:none;width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--co-pink);color:#e11d2e;
}
.se-comvv__card--vision .se-comvv__icon{background:var(--co-blue);color:#1d6fd0}
.se-comvv__card--values .se-comvv__icon{background:var(--co-peach);color:var(--se-orange-ink)}
.se-comvv__body{min-width:0}
.se-comvv__title{font-family:var(--se-font-head);font-size:1.1875rem;font-weight:800;color:var(--se-navy);margin:0 0 7px;line-height:1.25}
/* The approved mockup sets the third card's heading in the accent colour. */
.se-comvv__card--values .se-comvv__title{color:var(--se-orange-ink)}
.se-comvv__text{margin:0;font-size:.9375rem;line-height:1.62;color:var(--se-ink)}
.se-comvv__values{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.se-comvv__values li{display:flex;align-items:flex-start;gap:8px;font-size:.875rem;line-height:1.5;color:var(--se-ink)}
.se-comvv__values .se-icon{flex:none;margin-top:3px;color:#fff;background:var(--co-indigo);border-radius:50%;padding:2px}

/* --------------------------------------------------------------------------
   5. Why SmartEdge IT Solutions
   -------------------------------------------------------------------------- */
/* Each band is its own grid so the sections keep the approved vertical rhythm
   rather than running into one another. */
.se-cowhy{padding-block:var(--se-section-y)}
/*
   Centre rather than start.

   The point grid is a finished 3x2 arrangement and the introduction beside it is
   longer, so aligning both to the top left 230px of empty box under the cards. The
   same remedy is already used by the service-page flow and audit variants: put
   the shorter column against the middle of the taller one and the space reads as a
   deliberate margin rather than as a gap the layout failed to fill. Nothing is
   added and nothing is removed — the grid keeps its three columns and its cards
   keep their proportions.
*/
.se-cowhy__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.78fr);gap:clamp(24px,3vw,46px);align-items:center}
.se-cowhy__body{font-size:1rem;line-height:1.68;color:var(--se-ink);margin:.35rem 0 0}
.se-cowhy__intro .se-btn{margin-top:20px}
.se-cowhy__points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.se-cowhy__point{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--se-line);
  border-radius:var(--se-radius);padding:16px 16px 18px;box-shadow:var(--se-shadow-sm);
  transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease);
}
.se-cowhy__point:hover{transform:translateY(-2px);box-shadow:var(--se-shadow)}
.se-cowhy__pointicon{
  flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--co-pink);color:#e11d2e;
}
.se-cowhy__point--i1 .se-cowhy__pointicon{background:var(--co-blue);color:#1d6fd0}
.se-cowhy__point--i2 .se-cowhy__pointicon{background:var(--co-green);color:#12855a}
.se-cowhy__point--i3 .se-cowhy__pointicon{background:var(--co-blue);color:#1d6fd0}
.se-cowhy__point--i4 .se-cowhy__pointicon{background:var(--co-purple);color:#7c3aed}
.se-cowhy__point--i5 .se-cowhy__pointicon{background:var(--co-peach);color:var(--se-orange-ink)}
.se-cowhy__pointbody{min-width:0}
.se-cowhy__pointtitle{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.3;margin:0 0 4px}
.se-cowhy__pointtext{margin:0;font-size:.8125rem;line-height:1.55;color:var(--se-ink-soft)}

/* --------------------------------------------------------------------------
   6. People
   -------------------------------------------------------------------------- */
.se-copeople{padding-block:var(--se-section-y)}
.se-copeople__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.78fr);gap:clamp(24px,3vw,46px);align-items:start}
.se-copeople__body{font-size:1rem;line-height:1.68;color:var(--se-ink);margin:.35rem 0 0}
.se-copeople__intro .se-btn{margin-top:20px}
.se-copeople__aside{display:grid;gap:16px}
.se-copeople__stats{
  list-style:none;margin:0;padding:14px 4px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  background:#fff;border:1px solid var(--se-line-soft);border-radius:var(--se-radius);box-shadow:var(--se-shadow-sm);
}
.se-copeople__stat{display:flex;align-items:center;gap:10px;position:relative;min-width:0}
.se-copeople__stat+.se-copeople__stat::before{content:'';position:absolute;left:-7px;top:2px;bottom:2px;width:1px;background:var(--se-line)}
.se-copeople__staticon{
  flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--co-peach);color:var(--se-orange-ink);
}
.se-copeople__stat--b .se-copeople__staticon{background:var(--co-blue);color:#1d6fd0}
.se-copeople__stat--c .se-copeople__staticon{background:var(--co-purple);color:#7c3aed}
.se-copeople__stat--d .se-copeople__staticon{background:var(--co-blue);color:#1d6fd0}
.se-copeople__stat--e .se-copeople__staticon{background:var(--co-blue);color:#1d6fd0}
.se-copeople__statbody{display:flex;flex-direction:column;min-width:0}
.se-copeople__statvalue{font-family:var(--se-font-head);font-size:1.3125rem;font-weight:800;color:var(--se-navy);line-height:1.15;letter-spacing:-.015em}
.se-copeople__statlabel{font-size:.75rem;line-height:1.35;color:var(--se-ink-soft);margin-top:1px}
.se-copeople__img{width:100%;aspect-ratio:635/130;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow)}

/* --------------------------------------------------------------------------
   7. Global presence
   -------------------------------------------------------------------------- */
.se-coglobal{padding-block:var(--se-section-y)}
.se-coglobal__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.95fr);gap:clamp(20px,2.4vw,34px);align-items:center}
.se-coglobal__body{font-size:1rem;line-height:1.68;color:var(--se-ink);margin:.35rem 0 0}
.se-coglobal__stats{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.se-coglobal__stats--few{grid-template-columns:1fr}
.se-coglobal__stat{display:flex;align-items:center;gap:12px;min-width:0}
.se-coglobal__staticon{
  flex:none;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--co-peach);color:var(--se-orange-ink);
}
.se-coglobal__statbody{display:flex;flex-direction:column;min-width:0}
.se-coglobal__statvalue{font-family:var(--se-font-head);font-size:1.5rem;font-weight:800;color:var(--se-navy);line-height:1.1;letter-spacing:-.02em}
.se-coglobal__statlabel{font-size:.8125rem;color:var(--se-ink-soft);margin-top:1px}

.se-coglobal__map{align-self:start}
.se-coglobal__mapimg{width:100%;aspect-ratio:395/185;object-fit:cover;border-radius:var(--se-radius-sm)}

.se-coregions{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-self:start}
.se-coregion{display:flex;align-items:flex-start;gap:12px}
.se-coregion__flag{flex:none;display:inline-flex;align-items:center;padding-top:1px}
.se-coregion__flagicon{width:26px;height:17px;border-radius:3px;box-shadow:0 0 0 1px rgba(6,20,84,.12);display:block}
.se-coregion__body{display:flex;flex-direction:column;min-width:0}
.se-coregion__name{font-family:var(--se-font-head);font-size:1rem;font-weight:800;color:var(--se-navy);line-height:1.3}
.se-coregion__text{font-size:.8125rem;line-height:1.5;color:var(--se-ink-soft);margin-top:1px}

/* --------------------------------------------------------------------------
   8. Final CTA
   -------------------------------------------------------------------------- */
.se-cocta{position:relative;background:linear-gradient(120deg,#011a3a 0%,#062a58 52%,#0b3a72 100%);color:#fff;overflow:hidden;isolation:isolate}
.se-cocta__media{position:absolute;inset:0;z-index:0}
.se-cocta__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* The approved artwork carries its own lettering on the left. The scrim is
   fully opaque across the copy column and fades to nothing over the globe, so
   the live, selectable text is never laid over the baked artwork. */
.se-cocta__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--se-navy-900) 0%,var(--se-navy-900) 38%,rgba(1,25,55,.86) 52%,rgba(1,25,55,.34) 68%,rgba(1,25,55,0) 82%);
}
/* Bug fix: matched to the shared .se-ctaband composition so the closing band
   is centred here too. The band is one centred stack rather than a left-aligned
   column, and the heading is uncapped so it holds one line at desktop width. */
.se-cocta__grid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(36px,4.2vw,58px)}
.se-cocta__intro{display:flex;flex-direction:column;align-items:center;width:100%;max-width:none}
.se-cocta__title{color:#fff;margin:0 0 .55rem;max-width:none}
.se-cocta__body{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.68;max-width:62ch;margin:0}
.se-cocta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(18px,2.1vw,26px)}

/* --------------------------------------------------------------------------
   9. Optional editor content
   -------------------------------------------------------------------------- */
.se-company-extra{padding-block:0 var(--se-flow-y)}

/* --------------------------------------------------------------------------
   10. Responsive — the approved breakpoints
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  /* The three-column story row is too tight for the journey descriptions
     before this width, so the visual drops below the copy. */
  .se-costory__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px)}
  .se-costory__media{order:3;grid-column:1/-1;max-width:420px;justify-self:center;width:100%}
  .se-cojourney{order:2}
  .se-coglobal__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .se-coregions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-copeople__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .se-copeople__stat:nth-child(3n+1)::before{content:none}
}

@media (max-width:1100px){
  /* Three mission/vision/values cards side by side get too narrow to read
     comfortably at this width. */
  .se-comvv__grid{grid-template-columns:1fr}
  .se-comvv__card{align-items:center}
}

@media (max-width:1023px){
  .se-cohero__content{max-width:34rem}
  /*
   * Below the desktop breakpoint the artwork sits behind the whole column
   * rather than beside it, so it is dimmed to a soft background wash. That
   * also stops the value panel printed into the image from showing through as
   * a ghost behind the copy.
   */
  .se-cohero__img{opacity:.3}
  .se-cohero__scrim{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.88) 60%,rgba(255,255,255,.94) 100%)}
  .se-cohighlights__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two columns, so only the second column carries a divider. */
  .se-cohighlights__item:nth-child(odd)::before{content:none}
  .se-cowhy__grid,
  .se-copeople__grid{grid-template-columns:1fr}
  .se-cowhy__points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-copeople__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:820px){
  .se-costory__grid{grid-template-columns:1fr}
  .se-costory__media{order:0;max-width:none}
  .se-costory__care{margin-top:18px}
  .se-cojourney__teamimg{aspect-ratio:16/7}
  .se-coglobal__grid{grid-template-columns:1fr}
  .se-coregions{grid-template-columns:1fr}
  .se-coglobal__map{max-width:520px}
}

/* The closing artwork carries its own lettering, so on narrow screens it is
   dimmed to a background wash rather than competing with the live copy. */
@media (max-width:1023px){
  .se-cocta__img{opacity:.5}
  .se-cocta__scrim{background:linear-gradient(180deg,rgba(1,25,55,.86) 0%,rgba(1,25,55,.9) 100%)}
}

@media (max-width:640px){
  :root{--se-section-y:2px}
  .se-body.is-company{--se-section-y:2px}
  .se-cohighlights__grid{grid-template-columns:1fr;gap:16px}
  .se-cohighlights__item::before{content:none}
  .se-cohighlights__item+.se-cohighlights__item{border-top:1px solid var(--se-line);padding-top:16px}
  .se-cowhy__points{grid-template-columns:1fr}
  .se-copeople__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-copeople__stat::before{content:none!important}
  .se-copeople__stat+.se-copeople__stat{border-top:1px solid var(--se-line-soft);padding-top:12px}
  .se-coglobal__stats{grid-template-columns:1fr;gap:12px}
  .se-comvv__card{padding:20px 18px;gap:14px}
  .se-comvv__icon{width:48px;height:48px}
  .se-cohero__actions .se-btn{width:100%}
  .se-costory__intro .se-btn,
  .se-cowhy__intro .se-btn,
  .se-copeople__intro .se-btn,
  .se-cocta__actions .se-btn{width:100%}
}

@media (max-width:480px){
  .se-copeople__stats{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .se-cowhy__point{transition:none}
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print{
  .se-cohero__media,.se-cocta__media{display:none}
  .se-cohero,.se-cocta{background:#fff;color:#000}
  .se-cocta__title,.se-cocta__body{color:#000}
}