/* CAQA LLND redesign prototype.
   Loaded last, so it overrides llnd.css rather than replacing it. Everything
   here is tokens, type and shape. No layout is rebuilt and no photograph is
   discarded.

   The brief was that the site reads childish. The cause was not craftsmanship,
   it was register: soft geometric type, a 16px radius on everything, a
   saturated yellow treated as a co-equal brand colour, and illustration built
   from alphabet blocks and an abacus. Each of those is addressed below. */

:root{
  /* Blue stays: it is the brand and it is credible. Navy joins it to carry
     weight, and the yellow drops from co-equal colour to hairline accent. */
  --blue:#22608C;
  --blue-d:#184B6F;
  --navy:#0E1B2A;
  --navy-2:#152A3F;
  --yellow:#C9922B;          /* desaturated: an accent, not a personality */
  --yellow-d:#AE7D22;
  --squiggle:transparent;    /* the hand drawn marker line is gone */
  --active:#22608C;          /* was a third orange, now the brand blue */

  /* Neutrals biased very slightly blue, so they read as chosen, not default. */
  --ink:#0E1B2A;
  --body-c:#2B3947;
  --muted:#5C6B7A;
  --paper:#FFFFFF;
  --wash:#F5F7F9;
  --hairline:rgba(14,27,42,.12);

  /* Restraint: shallow shadows and a small radius read as considered.
     16px on 133 elements was the single loudest "soft" signal on the page. */
  --card-shadow:0 1px 2px rgba(14,27,42,.06), 0 8px 24px rgba(14,27,42,.06);
  --chip-shadow:0 1px 2px rgba(14,27,42,.08);
  --radius:5px;
  --foot-bg:#0E1B2A;
  --foot-link:#A9B8C6;
}

/* ---------------------------------------------------------------- type
   One soft geometric sans was carrying headlines, body and UI alike, which is
   what made the page feel young. A serif takes the headlines: it pairs with
   the macro photography, and it signals an institution rather than an app. */
body,.btn,input,select,textarea{
  font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;
  font-size:16.5px;line-height:1.62;color:var(--body-c);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.h-serif{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  color:var(--ink);font-weight:600;letter-spacing:-.012em;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,4.4vw,3.5rem);line-height:1.1;font-weight:700}
h2{font-size:clamp(1.7rem,2.7vw,2.35rem);line-height:1.18}
h3{font-size:1.12rem;line-height:1.35;font-weight:600}

/* the eyebrow becomes a small caps label, which does the signposting the
   decorative squiggle used to attempt */
.eyebrow{
  font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);
}
.sec-head p,.hero p.lead,.hero-grid>div>p{max-width:62ch}

/* ---------------------------------------------------------- shape and edges */
.card,.frame,.fx-pillar,.fx-journey,.stat,.icon-tile,.slides,.oval-stage,
.split-media img,.photo-pair .frame,figure,img{border-radius:var(--radius)!important}
.oval-stage,.oval-circle{border-radius:var(--radius)!important;overflow:hidden}
.btn{
  border-radius:4px;padding:12px 22px;font-weight:600;font-size:.94rem;
  letter-spacing:.005em;box-shadow:none;
}
.btn-ghost{background:transparent;border:1px solid var(--hairline);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:transparent}

/* ------------------------------------------------------- decoration removal */
/* the drifting L L N D letters and marker scribbles */
.fx-paper,.fx-ppw,.fx-pp{display:none!important}
/* the floating claim pills sitting over the hero photograph */
.hero .chip,.hero .float,.hero-badge,.hero .pill{display:none!important}

/* ------------------------------------------------------------------- hero
   A dark ground lets the macro photography do the talking, and gives the page
   somewhere to start other than white. */
.hero.fx-hero{background:var(--navy);color:#E8EEF4;padding-block:clamp(56px,7vw,96px)}
.hero.fx-hero h1{color:#fff}
.hero.fx-hero p{color:#B9C7D4}
.hero.fx-hero .eyebrow{color:#C9922B}
/* llnd.css sets .btn-ghost colour with !important, so on the dark hero the
   label rendered as near-black ink on navy and vanished. Matched here. */
.hero.fx-hero .btn-ghost{border-color:rgba(255,255,255,.34)!important;color:#fff!important}
.hero.fx-hero .btn-ghost:hover{border-color:#fff!important;color:#fff!important;background:rgba(255,255,255,.06)}
.hero.fx-hero .slides,.hero.fx-hero .frame{box-shadow:0 24px 60px rgba(0,0,0,.4)}

/* The disc behind the hero photograph was a hardcoded #F16635, a third
   saturated orange competing with the blue and the yellow. It becomes a soft
   halo in the brand blue, so it frames the photograph instead of shouting. */
.hero .oval-stage::before{
  background:radial-gradient(circle at 50% 45%,#2A6D9E 0%,#1B4E75 55%,rgba(14,27,42,0) 78%)!important;
  opacity:.85!important;
}
/* the decorative marker stroke under the headline */
.hero .reveal>svg,.hero h1 svg,.hero h1+svg{display:none!important}

/* the accent now appears as a rule, not as a colour field */
.sec-head.center h2::after{
  content:"";display:block;width:44px;height:2px;background:var(--yellow);
  margin:14px auto 0;
}

/* ---------------------------------------------------------------- sections */
.section{padding-block:clamp(48px,6vw,84px)}
.section.wash{background:var(--wash)}
.section.band-blue{background:var(--navy-2);color:#DCE6EF}
.section.band-blue h2,.section.band-blue h3{color:#fff}
.section.band-blue .eyebrow{color:#C9922B}
.card{background:var(--paper);border:1px solid var(--hairline);box-shadow:none}
.card:hover{box-shadow:var(--card-shadow)}

/* the four skill areas now carry the macro films */
.fx-pillar{transform:none!important;border:1px solid var(--hairline);background:var(--paper)}
.fx-pillar:hover{transform:translateY(-2px)!important;box-shadow:var(--card-shadow)}
.fx-pillar b{font-family:"Source Serif 4",Georgia,serif;font-size:1.1rem}
.fx-vframe{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.fx-vframe img,.fx-vframe video{width:100%;height:100%;object-fit:cover}

/* -------------------------------------------------------------- restraint */
/* 756 elements carried motion. Keep the reveal, drop the ambient drift. */
*{animation-duration:.45s!important}
.fx-pp,.fx-ppw{animation:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the footer already had the right colour; make it the anchor of the palette */
.cqf3,footer{background:var(--foot-bg)}

/* focus is visible, and in the accent rather than the browser default */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--yellow);outline-offset:2px;border-radius:3px;
}