/*
Theme Name: Mentor Legacy
Theme URI: https://mentorlegacy.com/
Author: Mentor Legacy
Description: Classic theme porting the approved Mentor Legacy prototype 1:1. Six fixed homepage sections, all content editable through CMB2 fields bundled in the theme. No plugins required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mentor-legacy
Tags: classic, one-page, tutoring
*/

/* ---------------------------------------------------------------------------
   DEVIATION FROM VERBATIM (CLAUDE.md rule 1, §1)
   Source: design/prototype/css/style.css
   Everything from the next line to the "WP overrides" marker at the bottom of
   this file is that file, byte for byte — all 1076 lines, nothing removed.
   The block above is the only addition: WordPress reads a theme's name from a
   header comment in style.css and will not list the theme without it. It is a
   comment, so it changes no rule.

   Lines 374-676 ARE repeated at 774-1076 and that is deliberate — the second
   copy is what makes the navy system win over the blog-page rules between
   them. D-09 proposed deleting it; measurement showed that changes 195
   elements, and the dedupe was dropped (D-13). Do not delete either copy.

   The 7 @font-face rules below still carry the prototype's own '../fonts/'
   paths. They are NOT edited here (D-06: never rewrite a rule in place).
   functions.php re-declares the same 7 faces from get_theme_file_uri() after
   this stylesheet, and for identical family/style/weight descriptors the later
   @font-face wins, so the theme's own woff2 files are the ones fetched.
   --------------------------------------------------------------------------- */

/* Mentor Legacy - stylesheet
   Fonts are bundled in /fonts so the site works offline. */
@font-face{font-family:'Lexend';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/lexend-300.woff2') format('woff2')}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lexend-400.woff2') format('woff2')}
@font-face{font-family:'Lexend';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lexend-500.woff2') format('woff2')}
@font-face{font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/lexend-600.woff2') format('woff2')}
@font-face{font-family:'Lexend Exa';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lexend-exa-500.woff2') format('woff2')}
@font-face{font-family:'Lexend Exa';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/lexend-exa-600.woff2') format('woff2')}
@font-face{font-family:'Lexend Exa';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lexend-exa-700.woff2') format('woff2')}

/* Layout concept: a white page carried by two shapes lifted from the logo —
   the orange T crossbar (section markers, rules) and the open orange "A" caret
   (hero geometry). Wide Lexend Exa headings echo the logo's wide letterforms. */
:root{
  color-scheme: light;
  --orange:#F6551E;          /* brand primary */
  --orange-ink:#C43E0D;      /* orange for small text on white (AA contrast) */
  --orange-wash:#FFF4EE;     /* off-white tinted toward the brand */
  --peach:#FFEFE6;           /* About Us ground */
  --white:#FFFFFF;           /* brand secondary */
  --navy:#262262;            /* brand dark blue/purple */
  --ink:#262262;             /* headings + body text */
  --muted:#565377;           /* navy-grey for supporting copy */
  --line:#ECE8F1;
  --line-warm:#F6D9CB;
  --grad:linear-gradient(120deg,#F6551E 0%,#E5414A 34%,#8B2C66 68%,#262262 100%);
  --grad-soft:linear-gradient(120deg,rgba(246,85,30,.14),rgba(38,34,98,.12));
  --shadow:0 1px 2px rgba(38,34,98,.05),0 14px 34px -14px rgba(38,34,98,.18);
  --shadow-hover:0 2px 4px rgba(38,34,98,.06),0 26px 50px -18px rgba(38,34,98,.32);
  --wa:#25D366;              /* WhatsApp brand green, used only on its button */

  --font-display:"Lexend Exa","Lexend",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --font-body:"Lexend",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;

  --step--1:clamp(.84rem,.8rem + .12vw,.92rem);
  --step-0:clamp(1.06rem,1rem + .22vw,1.16rem);
  --step-1:clamp(1.18rem,1.1rem + .36vw,1.42rem);
  --step-2:clamp(1.38rem,1.22rem + .75vw,1.9rem);
  --step-3:clamp(1.65rem,1.36rem + 1.35vw,2.55rem);
  --step-4:clamp(2rem,1.5rem + 2.3vw,3.4rem);

  --gutter:clamp(16px,4.5vw,64px);
  --maxw:1400px;
  --radius:18px;
  --ease:cubic-bezier(.22,.8,.26,1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;line-height:1.15}
p{margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,8vw,112px)}

/* Section label: the logo's T crossbar as a marker */
.label{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.label::before{content:"";width:28px;height:8px;background:var(--orange);border-radius:1px;box-shadow:0 0 0 2px var(--ink)}
.h2{font-family:var(--font-display);font-size:var(--step-4);font-weight:600;letter-spacing:-.02em;margin-top:16px}
.lead{color:var(--muted);font-size:var(--step-1);max-width:60ch;margin-top:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--font-body);font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .25s var(--ease),background-color .25s,box-shadow .25s,color .25s}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn-primary{background:var(--orange);color:var(--white);box-shadow:0 10px 24px -10px rgba(246,85,30,.7)}
.btn-primary:hover{background:var(--orange-ink);transform:translateY(-2px)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(38,34,98,.25)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.brand{display:block;flex:0 0 auto;width:clamp(170px,20vw,230px)}
.brand img{width:100%;height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0}
.nav-links a{position:relative;text-decoration:none;font-size:.95rem;font-weight:500;padding-block:8px;color:var(--ink);transition:color .2s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links a.is-active{color:var(--orange-ink)}
.nav-links .btn{min-height:44px;padding:0 20px;font-size:.92rem}
.nav-toggle{display:none;width:46px;height:46px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(38,34,98,.3);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links li:last-child{border-bottom:0;padding-top:16px}
  .nav-links a:not(.btn){display:block;padding:16px 0;font-size:1.05rem}
  .nav-links a:not(.btn)::after{bottom:10px;width:24px;right:auto}
  .nav-links .btn{width:100%;min-height:52px}
}

/* ---------- Header / Hero ----------
   Ground: white fading into a warm tint, a soft orange glow top-right and a fine
   orange dot grid that fades out toward the text. */
.hero{position:relative;overflow:hidden;padding-block:clamp(32px,4.5vw,60px) clamp(44px,5vw,68px);
  background:
    radial-gradient(60% 70% at 92% 8%,rgba(246,85,30,.13),rgba(246,85,30,0) 70%),
    linear-gradient(180deg,var(--white) 0%,var(--orange-wash) 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(246,85,30,.28) 1.2px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 75%);mask-image:linear-gradient(100deg,transparent 30%,#000 75%);opacity:.55}
.hero > .wrap{position:relative}

.hero h1{font-weight:600}
.hero-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:var(--step--1);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-ink)}
.hero-brand::before{content:"";width:28px;height:8px;background:var(--orange);border-radius:1px;box-shadow:0 0 0 2px var(--ink)}
.hero-brand small{font:inherit;font-weight:500;color:var(--muted);letter-spacing:.14em}
.tagline{display:block;margin-top:14px;font-family:var(--font-body);font-size:clamp(1.55rem,1rem + 1.2vw,1.95rem);font-weight:600;letter-spacing:-.018em;line-height:1.25;color:var(--ink)}
.hl{position:relative;color:var(--orange)}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.16em;background:var(--orange);opacity:.2;border-radius:2px;transform-origin:left;animation:underline .85s .5s var(--ease) both}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center;margin-top:clamp(24px,3vw,36px)}
.hero-copy{min-width:0}
.hero .sub{font-size:var(--step-1);color:var(--muted);max-width:50ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* Facts — every figure here comes from the supplied company copy */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:30px;border-top:1px solid var(--line-warm)}
.fact{padding:16px 16px 14px 0;min-width:0}
.fact:nth-child(even){padding-left:18px;border-left:1px solid var(--line-warm)}
.fact:nth-child(n+3){border-top:1px solid var(--line-warm)}
.fact b{display:block;font-family:var(--font-display);font-size:var(--step-1);font-weight:600;letter-spacing:-.01em}
.fact b em{font-style:normal;color:var(--orange)}
.fact span{display:block;margin-top:2px;font-size:.88rem;color:var(--muted);line-height:1.45}

.hero-visual{position:relative;min-width:0;width:100%;max-width:540px;justify-self:end;padding:18px 18px 18px 0}
.hero-shape{position:absolute}
.shape-caret{width:38%;right:-4%;top:-6%;aspect-ratio:1;z-index:0;animation:drift 8s ease-in-out infinite}
.shape-bar{width:30%;left:-6%;bottom:2%;z-index:3;animation:drift 10s ease-in-out -3s infinite}
.frame{position:relative;z-index:1;aspect-ratio:6/5;max-width:100%;overflow:hidden;border:2px solid var(--ink);
  border-radius:150px 26px 26px 26px;box-shadow:12px 12px 0 var(--orange);background:var(--orange-wash)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:40% 45%;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.07)}

/* Clearly identifiable image placeholders (swap for supplied photos) */
.placeholder{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;width:100%;height:100%;color:var(--orange-ink);background:
  repeating-linear-gradient(135deg,rgba(246,85,30,.07) 0 14px,rgba(246,85,30,0) 14px 28px),var(--orange-wash)}
.placeholder svg{width:44px;height:44px;stroke:var(--orange);opacity:.85}
.placeholder strong{font-family:var(--font-display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.placeholder span{font-size:.86rem;color:var(--muted);max-width:26ch}

.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:14px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.88rem;font-weight:500;line-height:1.3}
.chip .ico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--orange-wash)}
.chip .ico svg{width:19px;height:19px}
.chip-a{left:-7%;top:38%;animation:float 5.2s ease-in-out infinite}
.chip-b{right:-2%;bottom:-2%;animation:float 6s ease-in-out -2.5s infinite}

/* ---------- About ----------
   Ground: a flat warm peach, distinct from the hero's white-to-tint gradient,
   with a faint diagonal hatch in the top corner. */
.about{position:relative;background:var(--peach);overflow:hidden}
.about::before{content:"";position:absolute;right:0;top:0;width:min(560px,70%);height:420px;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(246,85,30,.07) 0 1px,transparent 1px 16px);
  -webkit-mask-image:radial-gradient(closest-side at 100% 0,#000,transparent);mask-image:radial-gradient(closest-side at 100% 0,#000,transparent)}
.about > .wrap{position:relative}
.about-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:end}
.outline-year{font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,2rem + 9vw,9rem);line-height:.85;letter-spacing:-.04em;color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-align:right;user-select:none}
.outline-year small{display:block;font-family:var(--font-body);font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;-webkit-text-stroke:0;color:var(--orange-ink);font-weight:600;margin-top:12px}

.points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,5vw,56px);border-block:1px solid var(--line-warm)}
.point{padding:24px 22px 24px 0;min-width:0}
.point + .point{padding-left:22px;border-left:1px solid var(--line-warm)}
.point svg{width:28px;height:28px;stroke:var(--orange);transition:transform .4s var(--ease)}
.point:hover svg{transform:translateY(-3px) scale(1.06)}
.point h3{margin-top:14px;font-size:1rem;font-weight:600;font-family:var(--font-body)}
.point p{margin-top:6px;font-size:.92rem;color:var(--muted);line-height:1.55}

.timeline-title{margin-top:clamp(40px,5vw,60px);font-family:var(--font-display);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* Four equal-height cards; a connector runs behind them at the dot line */
.timeline{list-style:none;margin:20px 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.timeline::before{content:"";position:absolute;left:0;right:0;top:45px;height:2px;background:linear-gradient(90deg,var(--orange),var(--line-warm))}
.tl{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;padding:24px 24px 26px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line-warm);transition:transform .4s var(--ease),box-shadow .4s}
.tl:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.tl-dot{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--white);border:2px solid var(--ink);font-family:var(--font-display);font-size:.82rem;font-weight:600}
.tl:first-child .tl-dot,.tl:last-child .tl-dot{background:var(--orange);color:var(--white)}
.tl-when{display:block;margin-top:18px;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);font-weight:600}
.tl h3{margin-top:6px;font-family:var(--font-display);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;min-height:2.6em}
.tl p{margin-top:10px;color:var(--muted);font-size:.93rem;line-height:1.6;flex:1}

/* ---------- Specialized In ---------- */
.spec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px}
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:clamp(32px,4vw,48px)}
.card{grid-column:span 3;position:relative;display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);min-width:0;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.card:nth-child(n+5){grid-column:span 4}
.card::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:#E9D3E0}
.card:hover::after{transform:scaleX(1)}
.card-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--orange-wash);transition:background-color .35s,transform .45s var(--ease)}
.card-ico svg{width:27px;height:27px;stroke:var(--orange);transition:stroke .35s}
.card:hover .card-ico{background:var(--orange);transform:rotate(-6deg) scale(1.05)}
.card:hover .card-ico svg{stroke:var(--white)}
.card h3{margin-top:20px;font-family:var(--font-body);font-size:1.1rem;font-weight:600}
.card p{margin-top:8px;font-size:.94rem;color:var(--muted);line-height:1.55}

/* Full-width faculty description under the cards */
.faculty{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:center;margin-top:18px;padding:clamp(24px,3.5vw,36px) clamp(24px,4vw,44px);border-radius:var(--radius);background:var(--orange-wash);border:1px solid var(--line-warm);overflow:hidden}
.faculty::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--orange)}
.faculty h3{font-family:var(--font-display);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);font-weight:600}
.faculty p{margin-top:10px;font-size:var(--step-1);color:var(--ink);font-weight:300;max-width:none;line-height:1.6}
.qual{display:flex;flex-direction:column;gap:10px;padding:0;margin:0;list-style:none}
.qual li{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid var(--line-warm);font-size:.92rem;font-weight:500;background:var(--white);white-space:nowrap}
.qual li::before{content:"";width:8px;height:8px;background:var(--orange);border-radius:2px}

/* ---------- Chairman ---------- */
.chair{padding-block:clamp(8px,2vw,24px) clamp(56px,6vw,88px);background:var(--white)}
.chair-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-radius:28px;border:2px solid var(--ink);background:var(--white);box-shadow:12px 12px 0 var(--orange);overflow:hidden;margin-top:clamp(28px,3.5vw,40px)}
.chair-media{position:relative;border-right:2px solid var(--ink);min-height:360px;background:var(--orange-wash);overflow:hidden}
.chair-media img,.chair-media .placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.chair-text{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,52px);min-width:0}
.quote-mark{position:absolute;top:6px;right:clamp(16px,3vw,36px);font-family:Georgia,"Times New Roman",serif;font-size:clamp(6rem,4rem + 6vw,9.5rem);line-height:1;color:var(--orange);opacity:.14;pointer-events:none;user-select:none}
.chair-text h3{position:relative;font-family:var(--font-display);font-size:var(--step-3);font-weight:600;letter-spacing:-.02em;max-width:18ch}
.letter{display:grid;gap:12px;margin-top:18px;max-width:60ch;color:var(--muted)}
.pull{margin-top:4px;padding:4px 0 4px 18px;border-left:4px solid var(--orange);font-weight:600;color:var(--ink);font-size:var(--step-1);line-height:1.45}
.signoff{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;border-top:1px solid var(--line)}
.who{display:flex;align-items:center;gap:14px}
.who::before{content:"";width:28px;height:8px;background:var(--orange);border-radius:1px;box-shadow:0 0 0 2px var(--ink)}
.who b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.3}
.who em{display:block;font-style:normal;color:var(--orange-ink);font-weight:500;font-size:.92rem}

/* ---------- Contact ---------- */
.contact{background:var(--orange-wash);position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.info{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.info li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--white);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.info li:hover{transform:translateX(4px);border-color:#E9D3E0;box-shadow:var(--shadow)}
.info .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--orange-wash)}
.info .ico svg{width:22px;height:22px;stroke:var(--orange)}
.info small{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.info a{display:block;font-weight:500;font-size:clamp(.92rem,.8rem + .9vw,1.02rem);text-decoration:none;overflow-wrap:anywhere;color:var(--ink)}
.info a:hover{color:var(--orange-ink)}
.org{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;margin-bottom:14px}

.form{padding:clamp(22px,3.4vw,36px);border-radius:24px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.form h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:600;letter-spacing:-.02em}
.form > p{margin-top:8px;color:var(--muted);font-size:.95rem}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:22px}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:500}
.field input,.field textarea,.field select{width:100%;min-height:50px;font:inherit;font-weight:400;font-size:1rem;color:var(--ink);background-color:#FCFBFE;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;transition:border-color .2s,box-shadow .25s,background-color .2s}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6551E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.field select:invalid{color:#8582A3}
.field select option{color:var(--ink)}
.field input::placeholder{color:#A3A0BC}
.field textarea{min-height:112px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#D9CBE3}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(246,85,30,.16)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#B42318}
.err{font-size:.82rem;color:#B42318;line-height:1.35}
.err:empty{display:none}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.form-status{font-size:.92rem;color:var(--ink);font-weight:500}
.form-status[data-ok]{color:#1F7A3A}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#E9E2DE;padding-block:clamp(56px,7vw,80px) 28px;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--orange)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.foot-logo{display:inline-block;padding:14px 18px;border-radius:14px;background:var(--white)}
.foot-logo img{width:clamp(200px,24vw,260px);height:auto}
.foot-tag{margin-top:20px;color:#BDB2AC;max-width:44ch;font-size:.96rem}
.foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.foot-contact small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#9C918B}
.foot-contact a{color:var(--white);text-decoration:none;font-weight:500;overflow-wrap:anywhere;background-image:linear-gradient(var(--orange),var(--orange));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--ease)}
.foot-contact a:hover{background-size:100% 2px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid #3A322E;font-size:.86rem;color:#9C918B}

/* ---------- Floating WhatsApp ---------- */
.wa{position:fixed;right:clamp(16px,2.5vw,28px);bottom:calc(clamp(16px,2.5vw,28px) + env(safe-area-inset-bottom,0px));z-index:60;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--wa);color:var(--white);box-shadow:0 12px 28px -8px rgba(37,211,102,.6);transition:transform .3s var(--ease),box-shadow .3s}
.wa svg{width:32px;height:32px}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ping 2.8s ease-out infinite}
.wa:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 34px -10px rgba(37,211,102,.7)}
.wa-tip{position:absolute;right:calc(100% + 12px);white-space:nowrap;padding:8px 12px;border-radius:10px;background:var(--ink);color:var(--white);font-size:.84rem;font-weight:500;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.wa:hover .wa-tip,.wa:focus-visible .wa-tip{opacity:1;transform:none}

/* ---------- Motion ---------- */
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-10px)}}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* Header entrance: slightly quicker than before (0.7s → 0.6s, tighter stagger) */
.hero h1,.hero-copy > *{animation:rise .6s var(--ease) both}
.hero-copy > :nth-child(1){animation-delay:.1s}
.hero-copy > :nth-child(2){animation-delay:.17s}
.hero-copy > :nth-child(3){animation-delay:.24s}
.hero-visual{animation:rise .75s .12s var(--ease) both}
.hero .frame img{animation:unveil .95s .2s var(--ease) both}

/* Scroll reveals: only elements below the fold at load are hidden (set by JS),
   so the first frame is always complete. */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease),clip-path 1s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-pending{opacity:0;transform:translateY(26px)}
.reveal.from-left.is-pending{transform:translateX(-30px)}
.reveal.from-right.is-pending{transform:translateX(30px)}
/* Image reveal: clip the <img> inside, never the observed element itself —
   a fully clipped target has no visible area, so the observer would never fire. */
.reveal.img-reveal.is-pending{opacity:1;transform:none}
.reveal.img-reveal > img{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease)}
.reveal.img-reveal.is-pending > img{clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal.is-pending{opacity:1;transform:none}
  .reveal.img-reveal.is-pending > img{clip-path:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .point:nth-child(3){padding-left:0;border-left:0}
  .point:nth-child(n+3){border-top:1px solid var(--line-warm)}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline::before{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.card:nth-child(n+5){grid-column:auto}
  .card:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-grid,.about-head,.contact-grid,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{justify-self:center;max-width:500px;padding:14px 14px 18px 0}
  .outline-year{text-align:left}
  .faculty{grid-template-columns:minmax(0,1fr)}
  .qual{flex-direction:row;flex-wrap:wrap}
  .chair-card{grid-template-columns:minmax(0,1fr)}
  .chair-media{border-right:0;border-bottom:2px solid var(--ink);min-height:0;aspect-ratio:16/11}
}
@media (max-width:600px){
  :root{--nav-h:64px}
  .brand{width:160px}
  .hero-actions{gap:10px;margin-top:22px}
  .hero-actions .btn{flex:1 1 0;padding:0 14px}
  .hero-brand small{display:none}
  .facts{margin-top:24px}
  .hero-grid{gap:28px}
  .chip{font-size:.8rem;padding:9px 11px}
  .chip .ico{width:30px;height:30px}
  .chip-a{left:-2%;top:44%}
  .chip-b{right:0;bottom:-4%}
  .frame{box-shadow:8px 8px 0 var(--orange);border-radius:96px 20px 20px 20px}
  .points{grid-template-columns:minmax(0,1fr)}
  .point,.point + .point{padding:20px 0;border-left:0}
  .point + .point{border-top:1px solid var(--line-warm)}
  .timeline{grid-template-columns:minmax(0,1fr)}
  .tl h3{min-height:0}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card:last-child{grid-column:auto}
  .qual li{white-space:normal}
  .fields{grid-template-columns:minmax(0,1fr)}
  .form .btn{width:100%}
  .chair-card{box-shadow:8px 8px 0 var(--orange);border-radius:22px}
  .chair-media{aspect-ratio:4/4.2}
  .outline-year{-webkit-text-stroke-width:2px}
  .wa{width:54px;height:54px}
  .wa-tip{display:none}
}

/* ================= Round 2: navy + orange gradient system ================= */
body{font-weight:300}
.lead{color:var(--muted)}
h1,h2,h3{color:var(--navy)}
.h2{letter-spacing:-.015em}
.label::before{background:var(--grad);box-shadow:none;height:6px;width:32px;border-radius:3px}

/* Buttons: gradient that slides on hover */
.btn-primary{background:var(--grad);background-size:180% 100%;background-position:0 0;color:var(--white);border:0;box-shadow:0 12px 26px -12px rgba(229,65,74,.7);transition:background-position .5s var(--ease),transform .25s var(--ease),box-shadow .25s}
.btn-primary:hover{background:var(--grad);background-size:180% 100%;background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(38,34,98,.55)}
.btn-ghost{border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--white)}

/* Navigation: full pill fills left-to-right on hover; active item keeps the gradient */
.nav-links{gap:4px}
.nav-links a:not(.btn){isolation:isolate;overflow:hidden;padding:9px 16px;border-radius:999px;color:var(--navy);transition:color .35s var(--ease)}
.nav-links a:not(.btn)::after{inset:0;height:auto;bottom:0;border-radius:inherit;z-index:-1;background:var(--grad);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn):focus-visible,.nav-links a.is-active{color:var(--white)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn):focus-visible::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links li:last-child{margin-left:12px}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--white)}
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:10px var(--gutter) 22px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(38,34,98,.35);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible}
  .nav-links li{border-bottom:0}
  .nav-links li:last-child{margin-left:0;padding-top:12px}
  .nav-links a:not(.btn){display:block;padding:13px 18px;font-size:1.05rem;border-radius:12px}
  .nav-links a:not(.btn)::after{inset:0;width:auto;right:0}
  .nav-links .btn{width:100%;min-height:52px}
}

/* Hero: organic gradient blob + gradient-backed frame, wave into About */
.hero{padding-bottom:clamp(88px,9vw,130px);background:radial-gradient(55% 70% at 95% 0%,rgba(246,85,30,.12),rgba(246,85,30,0) 70%),radial-gradient(40% 60% at 0% 100%,rgba(38,34,98,.07),rgba(38,34,98,0) 70%),var(--white)}
.hero::before{background-image:radial-gradient(rgba(38,34,98,.22) 1.2px,transparent 1.3px)}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero-visual{max-width:600px;padding:22px 26px 26px 0}
.hero-blob{position:absolute;z-index:0;width:96%;right:-14%;top:-12%;opacity:.2;pointer-events:none}
.frame{border:0;border-radius:170px 28px 28px 28px;box-shadow:0 30px 60px -30px rgba(38,34,98,.55)}
.frame-back{position:absolute;z-index:0;top:40px;left:16px;right:4px;bottom:6px;border-radius:170px 28px 28px 28px;background:var(--grad)}
.chip .ico{background:var(--grad-soft)}
.fact b em,.hl{color:var(--orange)}
.hl::after{background:var(--grad);opacity:.28}
.wave{position:absolute;left:0;right:0;width:100%;height:clamp(40px,6vw,80px);display:block;pointer-events:none}
.hero .wave-bottom{bottom:-1px;color:var(--peach)}

/* About */
.timeline::before{background:var(--grad)}
.tl:first-child .tl-dot,.tl:last-child .tl-dot{background:var(--grad);border-color:transparent}
.tl-dot{border-color:var(--navy);color:var(--navy)}
.point svg{stroke:var(--orange)}

/* Specialized In: icon tiles turn gradient on hover */
.card:hover .card-ico{background:var(--grad)}
.card::after{background:var(--grad)}
.faculty{background:linear-gradient(120deg,#FFF4EE,#F3F1FA)}
.faculty::before{background:var(--grad)}
.qual li::before{background:var(--grad)}

/* Chairman: gradient offset backing instead of a flat shadow */
.chair-wrap{position:relative;margin-top:clamp(28px,3.5vw,40px)}
.chair-wrap::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:28px;background:var(--grad)}
.chair-card{position:relative;margin-top:0;border-color:var(--navy);box-shadow:none}
.quote-mark{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.35}
.pull{border-left-color:transparent;border-image:var(--grad) 1}
.who::before{background:var(--grad);box-shadow:none;height:6px;border-radius:3px}

/* Testimonials: navy band with a warm glow, wave edges, white cards */
.testi{position:relative;overflow:hidden;color:var(--white);padding-block:clamp(110px,11vw,160px);
  background:radial-gradient(50% 70% at 100% 100%,rgba(246,85,30,.45),rgba(246,85,30,0) 70%),radial-gradient(40% 60% at 0% 0%,rgba(139,44,102,.45),rgba(139,44,102,0) 70%),linear-gradient(135deg,#262262 0%,#2E2468 55%,#3A2569 100%)}
.testi .wave-top{top:-1px;color:var(--white)}
.testi .wave-bottom{bottom:-1px;color:var(--orange-wash)}
.testi-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.testi .label{color:#FFB396}
.testi .h2{color:var(--white)}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(36px,4.5vw,56px);align-items:start}
.t-card{position:relative;margin:0;display:flex;flex-direction:column;min-width:0;padding:clamp(26px,2.6vw,36px);border-radius:22px;background:var(--white);color:var(--ink);box-shadow:0 30px 60px -30px rgba(10,8,40,.6);transition:transform .4s var(--ease),box-shadow .4s}
.t-card:nth-child(2){margin-top:clamp(0px,3vw,40px)}
.t-card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -30px rgba(10,8,40,.7)}
.t-q{font-family:Georgia,"Times New Roman",serif;font-size:4.6rem;line-height:.8;height:44px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-card blockquote{margin:6px 0 0;flex:1}
.t-card blockquote p{font-size:var(--step-1);line-height:1.55;color:var(--navy);font-weight:400}
.t-card figcaption{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.t-av{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);color:var(--white)}
.t-av svg{width:22px;height:22px}
.t-card b{display:block;font-weight:600;font-size:1rem;color:var(--navy);line-height:1.3}
.t-card em{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--orange-wash);color:var(--orange-ink);font-style:normal;font-size:.76rem;font-weight:600;letter-spacing:.04em}

/* Contact */
.info .ico{background:var(--grad-soft)}

/* Footer: deep navy */
.footer{background:linear-gradient(160deg,#262262 0%,#1C1A4C 100%);color:#D9D7EA}
.footer::before{background:var(--grad)}
.foot-tag{color:#ADAACB}
.foot-contact small,.foot-h{color:#8F8CB6}
.foot-nav a{color:#D9D7EA}
.foot-bottom{border-top-color:#3A3778;color:#8F8CB6}

/* Blog pages */
.page-hero{background:radial-gradient(55% 90% at 95% 0%,rgba(246,85,30,.12),rgba(246,85,30,0) 70%),radial-gradient(40% 80% at 0% 100%,rgba(38,34,98,.08),rgba(38,34,98,0) 70%),var(--white)}
.page-hero::before{background-image:radial-gradient(rgba(38,34,98,.22) 1.2px,transparent 1.3px)}
.cat::before{background:var(--grad)}
.featured-frame{border:0;box-shadow:0 30px 60px -30px rgba(38,34,98,.55),12px 12px 0 var(--orange)}
.prose{max-width:760px;color:#3F3C63}
.prose li::before{background:var(--grad)}
.prose .note{background:linear-gradient(120deg,#FFF4EE,#F3F1FA)}
.post-end{max-width:760px}

@media (max-width:1080px){
  .testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-card:nth-child(2){margin-top:0}
  .t-card:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:520px;padding:18px 18px 22px 0;justify-self:center}
  .hero-blob{right:-8%;top:-8%}
}
@media (max-width:600px){
  .frame,.frame-back{border-radius:100px 20px 20px 20px}
  .frame-back{top:30px;left:10px}
  .chair-wrap::before{inset:10px -8px -10px 8px;border-radius:22px}
  .testi-grid{grid-template-columns:minmax(0,1fr)}
  .t-card:last-child{grid-column:auto}
  .testi{padding-block:96px}
}

/* ================= Round 3: creative layer, cursor, faster motion ================= */
/* Pencil cursor on mouse devices only; touch and older browsers keep their default cursor */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='%23F6551E' stroke='%23262262' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5.2 21.4l5.4 5.4M19.6 7l5.4 5.4' stroke='%23262262' stroke-width='1.5'/%3E%3Cpath d='M3 29l1-3.6 2.6 2.6z' fill='%23262262'/%3E%3C/svg%3E") 3 29,auto}
  html body :is(a,button,select,summary,label[for],.btn,.nav-toggle,.wa,[role=button]){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='%23262262' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M5.2 21.4l5.4 5.4M19.6 7l5.4 5.4' stroke='%23F6551E' stroke-width='1.6'/%3E%3Cpath d='M3 29l1-3.6 2.6 2.6z' fill='%23F6551E'/%3E%3Cpath d='M1.5 20.5l-1-2.5M6.5 31l2.5 1M2 24.8l-1.8.4' stroke='%23F6551E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 29,pointer}
  html body :is(input:not([type=submit]):not([type=button]),textarea){cursor:text}
}

/* Faster, livelier motion */
.reveal{transition-duration:.55s,.55s,.75s}
.hero-copy > *,.hero h1{animation-duration:.48s}
.hero-copy > :nth-child(2){animation-delay:.05s}
.hero-copy > :nth-child(3){animation-delay:.1s}
.hero-copy > :nth-child(4){animation-delay:.15s}
.hero-visual{animation-duration:.6s;animation-delay:.08s}
.hero .frame img{animation-duration:.7s;animation-delay:.12s}
.hl::after{animation-duration:.6s;animation-delay:.35s}
.nav-links a:not(.btn)::after{transition-duration:.3s}
.nav-links a:not(.btn){transition-duration:.25s}
.btn,.btn svg{transition-duration:.2s}
.btn-primary{transition:background-position .35s var(--ease),transform .2s var(--ease),box-shadow .2s}
.card,.point svg,.tl,.info li,.post-card,.t-card{transition-duration:.28s}
.card::after{transition-duration:.3s}
.card-ico{transition-duration:.28s}
.post-media img{transition-duration:.5s}
.chip-a{animation-duration:4.4s}
.chip-b{animation-duration:5s}
.page-hero > .wrap > *{animation-duration:.48s}

/* Hand-drawn squiggle under the highlighted words */
.hl::after{height:.32em;bottom:-.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5q5-5 10 0t10 0 10 0 10 0' fill='none' stroke='%23F6551E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/auto 100%;opacity:1;border-radius:0}

/* Hero circle: gradient orb that breathes and morphs, with two orbit rings */
.hero-blob{display:none}
.orb-wrap{position:absolute;z-index:0;width:88%;aspect-ratio:1;right:-13%;top:-3%;pointer-events:none}
.hero h1,.hero-copy{position:relative;z-index:2}
.orb{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),var(--grad);opacity:.26;animation:morph 7s ease-in-out infinite,breathe 7s ease-in-out infinite}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(38,34,98,.28);animation:spin 16s linear infinite}
.orb-ring i{position:absolute;top:9%;left:13%;width:16px;height:16px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px rgba(246,85,30,.16)}
.orb-ring-2{inset:-9%;border:1.5px solid rgba(246,85,30,.18);animation-duration:24s;animation-direction:reverse}
.orb-ring-2 i{top:auto;left:auto;bottom:16%;right:4%;width:11px;height:11px;background:var(--navy);box-shadow:0 0 0 5px rgba(38,34,98,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes morph{0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%}33%{border-radius:56% 44% 52% 48%/46% 56% 44% 54%}66%{border-radius:45% 55% 47% 53%/55% 45% 55% 45%}}
@keyframes breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.05) rotate(8deg)}}

/* Rotating sticker badge on the hero photo */
.spin-badge{position:absolute;z-index:4;left:-2%;top:6%;width:clamp(96px,8vw,124px);aspect-ratio:1;border-radius:50%;background:var(--white);box-shadow:0 14px 30px -14px rgba(38,34,98,.45);display:grid;place-items:center}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.spin-badge text{font-family:var(--font-display);font-size:9.6px;font-weight:600;letter-spacing:1px;fill:var(--navy)}
.spin-badge span{display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:50%;background:var(--grad);color:var(--white)}
.spin-badge span svg{position:static;width:58%;height:58%;animation:none}

/* Floating doodle shapes */
.deco{position:absolute;z-index:0;width:28px;height:28px;background:center/contain no-repeat;pointer-events:none;animation:bob 5s ease-in-out infinite}
.deco-plus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23F6551E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");width:22px;height:22px}
.deco-ring{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23262262' stroke-width='2.4'/%3E%3C/svg%3E");width:30px;height:30px;animation-duration:6s}
.deco-squig{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M2 7q5-7 10 0t10 0 10 0 10 0' fill='none' stroke='%23F6551E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");width:56px;height:18px;animation-duration:5.5s}
.deco-tri{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l9 15H3z' fill='none' stroke='%23262262' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");width:26px;height:26px;animation-name:bobspin;animation-duration:9s}
.deco-dots{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='%23F6551E'%3E%3Ccircle cx='5' cy='5' r='2.2'/%3E%3Ccircle cx='15' cy='5' r='2.2'/%3E%3Ccircle cx='25' cy='5' r='2.2'/%3E%3Ccircle cx='5' cy='15' r='2.2'/%3E%3Ccircle cx='15' cy='15' r='2.2'/%3E%3Ccircle cx='25' cy='15' r='2.2'/%3E%3Ccircle cx='5' cy='25' r='2.2'/%3E%3Ccircle cx='15' cy='25' r='2.2'/%3E%3Ccircle cx='25' cy='25' r='2.2'/%3E%3C/g%3E%3C/svg%3E");width:46px;height:46px;opacity:.55;animation-duration:7s}
.deco-star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F6551E'/%3E%3Cstop offset='1' stop-color='%23262262'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='url(%23g)'/%3E%3C/svg%3E");width:26px;height:26px;animation-name:twinkle;animation-duration:3.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bobspin{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.7) rotate(45deg);opacity:.6}}
.spec,.chair,.contact{position:relative;overflow:hidden}
.spec > .wrap,.chair > .wrap,.contact > .wrap{position:relative;z-index:1}

/* Subject ticker: a tilted gradient tape across the top of About */
.ticker{position:relative;z-index:2;margin:-6px -2% clamp(40px,5vw,64px);transform:rotate(-1.6deg);background:var(--grad);box-shadow:0 18px 40px -22px rgba(38,34,98,.6);overflow:hidden;padding-block:14px}
.ticker-track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker-track > div{display:flex;align-items:center;gap:26px;padding-right:26px}
.ticker span{font-family:var(--font-display);font-size:clamp(.9rem,.8rem + .4vw,1.1rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap}
.ticker i{font-style:normal;color:#FFC2A8;font-size:1.1rem}
@keyframes ticker{to{transform:translateX(-50%)}}
.about{padding-top:clamp(28px,3vw,44px)}

/* Faint maths/education doodles as background texture */
.about::before{inset:0;width:auto;height:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23262262' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cpath d='M24 34h16M32 26v16'/%3E%3Ccircle cx='214' cy='44' r='9'/%3E%3Cpath d='M126 212l11-19 11 19z'/%3E%3Cpath d='M34 158q8-10 16 0t16 0 16 0'/%3E%3Cpath d='M214 178l18-18m-12 0h12v12'/%3E%3Cpath d='M250 116l6 6m0-6l-6 6'/%3E%3Crect x='170' y='232' width='22' height='16' rx='2'/%3E%3Cpath d='M181 232v16'/%3E%3C/g%3E%3Cg fill='%23262262' opacity='0.07' font-family='Georgia,serif' font-style='italic' font-size='22'%3E%3Ctext x='96' y='62'%3E%CF%80%3C/text%3E%3Ctext x='22' y='244'%3Ex%C2%B2%3C/text%3E%3Ctext x='236' y='252'%3E%E2%88%9A%3C/text%3E%3Ctext x='156' y='138'%3E%E2%88%91%3C/text%3E%3Ctext x='64' y='112'%3Ea%2Bb%3C/text%3E%3C/g%3E%3C/svg%3E") repeat 0 0/280px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent)}
.testi::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cpath d='M24 34h16M32 26v16'/%3E%3Ccircle cx='214' cy='44' r='9'/%3E%3Cpath d='M126 212l11-19 11 19z'/%3E%3Cpath d='M34 158q8-10 16 0t16 0 16 0'/%3E%3Cpath d='M214 178l18-18m-12 0h12v12'/%3E%3Cpath d='M250 116l6 6m0-6l-6 6'/%3E%3Crect x='170' y='232' width='22' height='16' rx='2'/%3E%3Cpath d='M181 232v16'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.07' font-family='Georgia,serif' font-style='italic' font-size='22'%3E%3Ctext x='96' y='62'%3E%CF%80%3C/text%3E%3Ctext x='22' y='244'%3Ex%C2%B2%3C/text%3E%3Ctext x='236' y='252'%3E%E2%88%9A%3C/text%3E%3Ctext x='156' y='138'%3E%E2%88%91%3C/text%3E%3Ctext x='64' y='112'%3Ea%2Bb%3C/text%3E%3C/g%3E%3C/svg%3E") repeat 40px 20px/300px;pointer-events:none}
.testi > .wrap{position:relative;z-index:1}
.page-hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(560px,55%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23262262' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.08'%3E%3Cpath d='M24 34h16M32 26v16'/%3E%3Ccircle cx='214' cy='44' r='9'/%3E%3Cpath d='M126 212l11-19 11 19z'/%3E%3Cpath d='M34 158q8-10 16 0t16 0 16 0'/%3E%3Cpath d='M214 178l18-18m-12 0h12v12'/%3E%3Cpath d='M250 116l6 6m0-6l-6 6'/%3E%3Crect x='170' y='232' width='22' height='16' rx='2'/%3E%3Cpath d='M181 232v16'/%3E%3C/g%3E%3Cg fill='%23262262' opacity='0.08' font-family='Georgia,serif' font-style='italic' font-size='22'%3E%3Ctext x='96' y='62'%3E%CF%80%3C/text%3E%3Ctext x='22' y='244'%3Ex%C2%B2%3C/text%3E%3Ctext x='236' y='252'%3E%E2%88%9A%3C/text%3E%3Ctext x='156' y='138'%3E%E2%88%91%3C/text%3E%3Ctext x='64' y='112'%3Ea%2Bb%3C/text%3E%3C/g%3E%3C/svg%3E") repeat 0 0/260px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none}

/* Timeline cards: a strip of washi tape on each */
.tl{overflow:visible}
.tl::after{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-4deg);background:linear-gradient(90deg,rgba(246,85,30,.35),rgba(229,65,74,.3));border-radius:2px;box-shadow:0 2px 4px rgba(38,34,98,.08)}
.tl:nth-child(2)::after{transform:translateX(-50%) rotate(3deg);background:linear-gradient(90deg,rgba(38,34,98,.22),rgba(139,44,102,.22))}
.tl:nth-child(3)::after{transform:translateX(-50%) rotate(-2deg)}
.tl:nth-child(4)::after{transform:translateX(-50%) rotate(5deg);background:linear-gradient(90deg,rgba(38,34,98,.22),rgba(139,44,102,.22))}
.tl:hover{transform:translateY(-4px) rotate(-.6deg)}

/* Specialized cards: soft gradient bubble that grows on hover, slight playful tilt */
.card::before{content:"";position:absolute;right:-34px;top:-34px;width:104px;height:104px;border-radius:50%;background:var(--grad-soft);transition:transform .35s var(--ease)}
.card > *{position:relative;z-index:1}
.card:hover{transform:translateY(-6px) rotate(-.8deg)}
.card:nth-child(even):hover{transform:translateY(-6px) rotate(.8deg)}
.card:hover::before{transform:scale(1.8)}
.card-ico{border-radius:14px 14px 14px 4px}

/* Sticker-style tags */
.label{position:relative}
.cat{transform:rotate(-2deg)}
.post-card:nth-child(even) .cat{transform:rotate(2deg)}
.qual li:nth-child(1){transform:rotate(-1.5deg)}
.qual li:nth-child(2){transform:rotate(1.5deg)}

/* Chairman: squiggle under the signature */
.who b{padding-bottom:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5q5-5 10 0t10 0 10 0 10 0' fill='none' stroke='%23262262' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/30px 7px}

/* Testimonials: cards pinned at slight angles, straighten on hover */
.t-card:nth-child(1){rotate:-1.6deg}
.t-card:nth-child(2){rotate:1.2deg}
.t-card:nth-child(3){rotate:-.8deg}
.t-card:hover{rotate:0deg}
.t-card::before{content:"";position:absolute;top:-12px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--grad);box-shadow:0 4px 10px rgba(10,8,40,.35),inset 0 -3px 0 rgba(0,0,0,.18)}

/* Contact: paper plane doodle flying toward the form */
.plane{position:absolute;z-index:0;right:clamp(0px,4vw,60px);top:clamp(-30px,-1vw,0px);width:clamp(150px,15vw,220px);height:auto;animation:fly 5s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-8px)}}

/* Blog cards: playful lift */
.post-card:hover{transform:translateY(-6px) rotate(-.5deg)}
.post-card:nth-child(even):hover{transform:translateY(-6px) rotate(.5deg)}

@media (max-width:900px){
  .orb-wrap{right:-8%;top:-2%}
  .plane{display:none}
}
@media (max-width:600px){
  .hide-m,.deco{display:none}
  .spin-badge{left:-1%;top:2%;width:86px}
  .spin-badge text{font-size:9px}
  .ticker{margin-inline:-6%}
  .t-card:nth-child(n){rotate:0deg}
  .orb-ring-2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.orb,.orb-ring,.spin-badge svg,.deco,.plane{animation:none!important}
}

/* ================= Round 4: stats count-up, hero carousel, phone dial code, socials ================= */
.count{display:inline-block;font-variant-numeric:tabular-nums;text-align:left}

/* Hero carousel (inside the arched frame) */
.carousel{position:relative;width:100%;height:100%;touch-action:pan-y}
.car-track{display:flex;height:100%;transition:transform .6s var(--ease);will-change:transform}
.car-slide{flex:0 0 100%;height:100%;margin:0;overflow:hidden}
.car-slide img{width:100%;height:100%;object-fit:cover;object-position:40% 45%;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.car-track{cursor:grab}
.car-ui{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -12px rgba(38,34,98,.5);backdrop-filter:blur(6px)}
.car-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.car-btn svg{width:18px;height:18px}
.car-btn:hover,.car-btn:focus-visible{background:var(--grad);color:var(--white);box-shadow:none;transform:scale(1.06)}
.car-dots{display:flex;gap:6px;padding-inline:2px}
.car-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#CFCBE0;transition:width .3s var(--ease),background .3s}
.car-dot[aria-current="true"]{width:22px;background:var(--grad)}
.car-dot:focus-visible{outline-offset:2px}

/* Phone field with automatic country dialling code */
.phone-wrap{display:flex;align-items:stretch;min-width:0;border:1.5px solid var(--line);border-radius:12px;background:#FCFBFE;transition:border-color .2s,box-shadow .25s,background-color .2s}
.phone-wrap:hover{border-color:#D9CBE3}
.phone-wrap:focus-within{border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(246,85,30,.16)}
.phone-wrap.has-error,.phone-wrap:has(input[aria-invalid="true"]){border-color:#B42318}
.dial{display:flex;align-items:center;padding:0 12px 0 16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy);border-right:1.5px solid var(--line);white-space:nowrap;min-width:64px;justify-content:center}
.dial.is-empty{color:#A3A0BC;font-weight:400}
.phone-wrap input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0 12px 12px 0}

/* Footer social icons */
.socials{display:flex;gap:12px;list-style:none;margin:22px 0 0;padding:0}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--white);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.socials svg{width:20px;height:20px}
.socials a:hover,.socials a:focus-visible{background:var(--grad);box-shadow:none;transform:translateY(-3px)}

@media (max-width:600px){
  .car-ui{bottom:12px;gap:8px}
  .car-btn{width:40px;height:40px}
}

/* ================= Shared additions (nav, footer nav, utilities) ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(29,24,21,.3);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links li:last-child{border-bottom:0;padding-top:16px}
  .nav-links a:not(.btn){display:block;padding:16px 0;font-size:1.05rem}
  .nav-links a:not(.btn)::after{bottom:10px;width:24px;right:auto}
  .nav-links .btn{width:100%;min-height:52px}
}
.foot-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr)}
.foot-nav{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-nav a{color:#E9E2DE;text-decoration:none;font-weight:400;display:inline-flex;align-items:center;gap:0;transition:color .2s,transform .3s var(--ease)}
.foot-nav a::before{content:"";width:0;margin-right:0;height:3px;background:var(--orange);border-radius:2px;transition:width .3s var(--ease),margin .3s var(--ease)}
.foot-nav a:hover{color:var(--white)}
.foot-nav a:hover::before{width:14px;margin-right:10px}
.foot-h{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#9C918B;margin-bottom:14px;font-weight:500}
@media (max-width:900px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-grid > :first-child{grid-column:1/-1} }
@media (max-width:520px){ .foot-grid{grid-template-columns:minmax(0,1fr)} }

/* ================= Page heading (Blogs + article) ================= */
.page-hero{position:relative;overflow:hidden;padding-block:clamp(36px,5vw,64px) clamp(40px,5vw,64px);
  background:radial-gradient(60% 90% at 92% 0%,rgba(246,85,30,.13),rgba(246,85,30,0) 70%),linear-gradient(180deg,var(--white) 0%,var(--orange-wash) 100%)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(246,85,30,.28) 1.2px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 80%);mask-image:linear-gradient(100deg,transparent 35%,#000 80%);opacity:.55}
.page-hero > .wrap{position:relative}
.page-hero > .wrap > *{animation:rise .6s var(--ease) both}
.page-hero > .wrap > :nth-child(2){animation-delay:.07s}
.page-hero > .wrap > :nth-child(3){animation-delay:.14s}
.page-hero > .wrap > :nth-child(4){animation-delay:.21s}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0 0 20px;padding:0;font-size:.88rem;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.crumbs li + li::before{content:"/";color:#CBBDB5}
.crumbs a{text-decoration:none;color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--orange-ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch}
.page-title{font-family:var(--font-display);font-size:var(--step-4);font-weight:600;letter-spacing:-.02em;margin-top:14px}
.page-hero .lead{margin-top:12px}

/* ================= Blog listing ================= */
.blog-list{padding-block:clamp(48px,6vw,80px) clamp(64px,8vw,104px)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.post-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:20px;background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:#FBD0BF}
.post-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--orange-wash)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post-card:hover .post-media img{transform:scale(1.05)}
.post-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font-size:.84rem;color:var(--muted)}
.cat{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--orange-wash);border:1px solid var(--line-warm);color:var(--orange-ink);font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.cat::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--orange)}
.post-card h2{margin-top:16px;font-family:var(--font-body);font-size:1.18rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.post-card h2 a{text-decoration:none;background-image:linear-gradient(var(--orange),var(--orange));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.post-card h2 a:hover{background-size:100% 2px}
.post-card p{margin-top:10px;color:var(--muted);font-size:.95rem;line-height:1.6;flex:1}
.read-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 0;font-weight:600;font-size:.95rem;color:var(--orange-ink);text-decoration:none}
.read-more svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.post-card:hover .read-more svg,.read-more:hover svg{transform:translateX(5px)}
@media (max-width:1000px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .posts{grid-template-columns:minmax(0,1fr)} }

/* ================= Blog article ================= */
.post-hero{padding-bottom:clamp(120px,14vw,190px)}
.post-hero .wrap{max-width:900px}
.post-hero .page-title{font-size:var(--step-3);line-height:1.2}
.post-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px;color:var(--muted);font-size:.92rem}
.post-info span{display:inline-flex;align-items:center;gap:8px}
.post-info span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:#CBBDB5}
.featured{position:relative;z-index:2;max-width:980px;margin:clamp(-170px,-12vw,-100px) auto 0}
.featured-frame{aspect-ratio:16/9;max-width:100%;overflow:hidden;border:2px solid var(--ink);border-radius:120px 24px 24px 24px;box-shadow:12px 12px 0 var(--orange);background:var(--orange-wash)}
.featured-frame img{width:100%;height:100%;object-fit:cover;animation:unveil 1s .15s var(--ease) both}
.prose{max-width:720px;margin:clamp(40px,5vw,64px) auto 0;font-size:1.08rem;line-height:1.8;color:#3C3431}
.prose > * + *{margin-top:1.1em}
.prose .lead{font-size:var(--step-1);line-height:1.7;color:var(--ink);font-weight:400;max-width:none}
.prose h2{margin-top:2em;font-family:var(--font-display);font-size:var(--step-2);font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.3}
.prose h3{margin-top:1.6em;font-family:var(--font-body);font-size:1.16rem;font-weight:600;color:var(--ink)}
.prose h3 + p{margin-top:.5em}
.prose ul{list-style:none;padding:0;display:grid;gap:.6em}
.prose li{position:relative;padding-left:30px}
.prose li::before{content:"";position:absolute;left:2px;top:.72em;width:16px;height:5px;border-radius:1px;background:var(--orange)}
.prose .note{padding:20px 24px;border-radius:16px;background:var(--orange-wash);border:1px solid var(--line-warm);border-left:5px solid var(--orange);color:var(--ink);font-weight:400}
.prose .note strong{display:block;font-family:var(--font-display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:4px}
.post-end{max-width:720px;margin:clamp(40px,5vw,56px) auto 0;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.post-end .btn svg{width:18px;height:18px}
.post-end .btn-ghost:hover svg{transform:translateX(-4px)}
.post-next{display:flex;flex-direction:column;align-items:flex-end;text-align:right;text-decoration:none;max-width:34ch;min-width:0}
.post-next small{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.post-next span{font-weight:600;color:var(--ink);transition:color .2s}
.post-next:hover span{color:var(--orange-ink)}
.article-wrap{padding-bottom:clamp(64px,8vw,104px)}
@media (max-width:600px){
  .featured-frame{border-radius:64px 18px 18px 18px;box-shadow:8px 8px 0 var(--orange)}
  .post-next{align-items:flex-start;text-align:left}
  .post-end .btn{width:100%}
}
/* ================= Round 2: navy + orange gradient system ================= */
body{font-weight:300}
.lead{color:var(--muted)}
h1,h2,h3{color:var(--navy)}
.h2{letter-spacing:-.015em}
.label::before{background:var(--grad);box-shadow:none;height:6px;width:32px;border-radius:3px}

/* Buttons: gradient that slides on hover */
.btn-primary{background:var(--grad);background-size:180% 100%;background-position:0 0;color:var(--white);border:0;box-shadow:0 12px 26px -12px rgba(229,65,74,.7);transition:background-position .5s var(--ease),transform .25s var(--ease),box-shadow .25s}
.btn-primary:hover{background:var(--grad);background-size:180% 100%;background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(38,34,98,.55)}
.btn-ghost{border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--white)}

/* Navigation: full pill fills left-to-right on hover; active item keeps the gradient */
.nav-links{gap:4px}
.nav-links a:not(.btn){isolation:isolate;overflow:hidden;padding:9px 16px;border-radius:999px;color:var(--navy);transition:color .35s var(--ease)}
.nav-links a:not(.btn)::after{inset:0;height:auto;bottom:0;border-radius:inherit;z-index:-1;background:var(--grad);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn):focus-visible,.nav-links a.is-active{color:var(--white)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn):focus-visible::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links li:last-child{margin-left:12px}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--white)}
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:10px var(--gutter) 22px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(38,34,98,.35);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible}
  .nav-links li{border-bottom:0}
  .nav-links li:last-child{margin-left:0;padding-top:12px}
  .nav-links a:not(.btn){display:block;padding:13px 18px;font-size:1.05rem;border-radius:12px}
  .nav-links a:not(.btn)::after{inset:0;width:auto;right:0}
  .nav-links .btn{width:100%;min-height:52px}
}

/* Hero: organic gradient blob + gradient-backed frame, wave into About */
.hero{padding-bottom:clamp(88px,9vw,130px);background:radial-gradient(55% 70% at 95% 0%,rgba(246,85,30,.12),rgba(246,85,30,0) 70%),radial-gradient(40% 60% at 0% 100%,rgba(38,34,98,.07),rgba(38,34,98,0) 70%),var(--white)}
.hero::before{background-image:radial-gradient(rgba(38,34,98,.22) 1.2px,transparent 1.3px)}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero-visual{max-width:600px;padding:22px 26px 26px 0}
.hero-blob{position:absolute;z-index:0;width:96%;right:-14%;top:-12%;opacity:.2;pointer-events:none}
.frame{border:0;border-radius:170px 28px 28px 28px;box-shadow:0 30px 60px -30px rgba(38,34,98,.55)}
.frame-back{position:absolute;z-index:0;top:40px;left:16px;right:4px;bottom:6px;border-radius:170px 28px 28px 28px;background:var(--grad)}
.chip .ico{background:var(--grad-soft)}
.fact b em,.hl{color:var(--orange)}
.hl::after{background:var(--grad);opacity:.28}
.wave{position:absolute;left:0;right:0;width:100%;height:clamp(40px,6vw,80px);display:block;pointer-events:none}
.hero .wave-bottom{bottom:-1px;color:var(--peach)}

/* About */
.timeline::before{background:var(--grad)}
.tl:first-child .tl-dot,.tl:last-child .tl-dot{background:var(--grad);border-color:transparent}
.tl-dot{border-color:var(--navy);color:var(--navy)}
.point svg{stroke:var(--orange)}

/* Specialized In: icon tiles turn gradient on hover */
.card:hover .card-ico{background:var(--grad)}
.card::after{background:var(--grad)}
.faculty{background:linear-gradient(120deg,#FFF4EE,#F3F1FA)}
.faculty::before{background:var(--grad)}
.qual li::before{background:var(--grad)}

/* Chairman: gradient offset backing instead of a flat shadow */
.chair-wrap{position:relative;margin-top:clamp(28px,3.5vw,40px)}
.chair-wrap::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:28px;background:var(--grad)}
.chair-card{position:relative;margin-top:0;border-color:var(--navy);box-shadow:none}
.quote-mark{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.35}
.pull{border-left-color:transparent;border-image:var(--grad) 1}
.who::before{background:var(--grad);box-shadow:none;height:6px;border-radius:3px}

/* Testimonials: navy band with a warm glow, wave edges, white cards */
.testi{position:relative;overflow:hidden;color:var(--white);padding-block:clamp(110px,11vw,160px);
  background:radial-gradient(50% 70% at 100% 100%,rgba(246,85,30,.45),rgba(246,85,30,0) 70%),radial-gradient(40% 60% at 0% 0%,rgba(139,44,102,.45),rgba(139,44,102,0) 70%),linear-gradient(135deg,#262262 0%,#2E2468 55%,#3A2569 100%)}
.testi .wave-top{top:-1px;color:var(--white)}
.testi .wave-bottom{bottom:-1px;color:var(--orange-wash)}
.testi-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.testi .label{color:#FFB396}
.testi .h2{color:var(--white)}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(36px,4.5vw,56px);align-items:start}
.t-card{position:relative;margin:0;display:flex;flex-direction:column;min-width:0;padding:clamp(26px,2.6vw,36px);border-radius:22px;background:var(--white);color:var(--ink);box-shadow:0 30px 60px -30px rgba(10,8,40,.6);transition:transform .4s var(--ease),box-shadow .4s}
.t-card:nth-child(2){margin-top:clamp(0px,3vw,40px)}
.t-card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -30px rgba(10,8,40,.7)}
.t-q{font-family:Georgia,"Times New Roman",serif;font-size:4.6rem;line-height:.8;height:44px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-card blockquote{margin:6px 0 0;flex:1}
.t-card blockquote p{font-size:var(--step-1);line-height:1.55;color:var(--navy);font-weight:400}
.t-card figcaption{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.t-av{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);color:var(--white)}
.t-av svg{width:22px;height:22px}
.t-card b{display:block;font-weight:600;font-size:1rem;color:var(--navy);line-height:1.3}
.t-card em{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--orange-wash);color:var(--orange-ink);font-style:normal;font-size:.76rem;font-weight:600;letter-spacing:.04em}

/* Contact */
.info .ico{background:var(--grad-soft)}

/* Footer: deep navy */
.footer{background:linear-gradient(160deg,#262262 0%,#1C1A4C 100%);color:#D9D7EA}
.footer::before{background:var(--grad)}
.foot-tag{color:#ADAACB}
.foot-contact small,.foot-h{color:#8F8CB6}
.foot-nav a{color:#D9D7EA}
.foot-bottom{border-top-color:#3A3778;color:#8F8CB6}

/* Blog pages */
.page-hero{background:radial-gradient(55% 90% at 95% 0%,rgba(246,85,30,.12),rgba(246,85,30,0) 70%),radial-gradient(40% 80% at 0% 100%,rgba(38,34,98,.08),rgba(38,34,98,0) 70%),var(--white)}
.page-hero::before{background-image:radial-gradient(rgba(38,34,98,.22) 1.2px,transparent 1.3px)}
.cat::before{background:var(--grad)}
.featured-frame{border:0;box-shadow:0 30px 60px -30px rgba(38,34,98,.55),12px 12px 0 var(--orange)}
.prose{max-width:760px;color:#3F3C63}
.prose li::before{background:var(--grad)}
.prose .note{background:linear-gradient(120deg,#FFF4EE,#F3F1FA)}
.post-end{max-width:760px}

@media (max-width:1080px){
  .testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-card:nth-child(2){margin-top:0}
  .t-card:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:520px;padding:18px 18px 22px 0;justify-self:center}
  .hero-blob{right:-8%;top:-8%}
}
@media (max-width:600px){
  .frame,.frame-back{border-radius:100px 20px 20px 20px}
  .frame-back{top:30px;left:10px}
  .chair-wrap::before{inset:10px -8px -10px 8px;border-radius:22px}
  .testi-grid{grid-template-columns:minmax(0,1fr)}
  .t-card:last-child{grid-column:auto}
  .testi{padding-block:96px}
}

/* ================= Round 3: creative layer, cursor, faster motion ================= */
/* Pencil cursor on mouse devices only; touch and older browsers keep their default cursor */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='%23F6551E' stroke='%23262262' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5.2 21.4l5.4 5.4M19.6 7l5.4 5.4' stroke='%23262262' stroke-width='1.5'/%3E%3Cpath d='M3 29l1-3.6 2.6 2.6z' fill='%23262262'/%3E%3C/svg%3E") 3 29,auto}
  html body :is(a,button,select,summary,label[for],.btn,.nav-toggle,.wa,[role=button]){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M3 29l2.2-7.6L22.6 4a2.4 2.4 0 0 1 3.4 0l2 2a2.4 2.4 0 0 1 0 3.4L10.6 26.8z' fill='%23262262' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M5.2 21.4l5.4 5.4M19.6 7l5.4 5.4' stroke='%23F6551E' stroke-width='1.6'/%3E%3Cpath d='M3 29l1-3.6 2.6 2.6z' fill='%23F6551E'/%3E%3Cpath d='M1.5 20.5l-1-2.5M6.5 31l2.5 1M2 24.8l-1.8.4' stroke='%23F6551E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 29,pointer}
  html body :is(input:not([type=submit]):not([type=button]),textarea){cursor:text}
}

/* Faster, livelier motion */
.reveal{transition-duration:.55s,.55s,.75s}
.hero-copy > *,.hero h1{animation-duration:.48s}
.hero-copy > :nth-child(2){animation-delay:.05s}
.hero-copy > :nth-child(3){animation-delay:.1s}
.hero-copy > :nth-child(4){animation-delay:.15s}
.hero-visual{animation-duration:.6s;animation-delay:.08s}
.hero .frame img{animation-duration:.7s;animation-delay:.12s}
.hl::after{animation-duration:.6s;animation-delay:.35s}
.nav-links a:not(.btn)::after{transition-duration:.3s}
.nav-links a:not(.btn){transition-duration:.25s}
.btn,.btn svg{transition-duration:.2s}
.btn-primary{transition:background-position .35s var(--ease),transform .2s var(--ease),box-shadow .2s}
.card,.point svg,.tl,.info li,.post-card,.t-card{transition-duration:.28s}
.card::after{transition-duration:.3s}
.card-ico{transition-duration:.28s}
.post-media img{transition-duration:.5s}
.chip-a{animation-duration:4.4s}
.chip-b{animation-duration:5s}
.page-hero > .wrap > *{animation-duration:.48s}

/* Hand-drawn squiggle under the highlighted words */
.hl::after{height:.32em;bottom:-.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5q5-5 10 0t10 0 10 0 10 0' fill='none' stroke='%23F6551E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/auto 100%;opacity:1;border-radius:0}

/* Hero circle: gradient orb that breathes and morphs, with two orbit rings */
.hero-blob{display:none}
.orb-wrap{position:absolute;z-index:0;width:88%;aspect-ratio:1;right:-13%;top:-3%;pointer-events:none}
.hero h1,.hero-copy{position:relative;z-index:2}
.orb{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),var(--grad);opacity:.26;animation:morph 7s ease-in-out infinite,breathe 7s ease-in-out infinite}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(38,34,98,.28);animation:spin 16s linear infinite}
.orb-ring i{position:absolute;top:9%;left:13%;width:16px;height:16px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px rgba(246,85,30,.16)}
.orb-ring-2{inset:-9%;border:1.5px solid rgba(246,85,30,.18);animation-duration:24s;animation-direction:reverse}
.orb-ring-2 i{top:auto;left:auto;bottom:16%;right:4%;width:11px;height:11px;background:var(--navy);box-shadow:0 0 0 5px rgba(38,34,98,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes morph{0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%}33%{border-radius:56% 44% 52% 48%/46% 56% 44% 54%}66%{border-radius:45% 55% 47% 53%/55% 45% 55% 45%}}
@keyframes breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.05) rotate(8deg)}}

/* Rotating sticker badge on the hero photo */
.spin-badge{position:absolute;z-index:4;left:-2%;top:6%;width:clamp(96px,8vw,124px);aspect-ratio:1;border-radius:50%;background:var(--white);box-shadow:0 14px 30px -14px rgba(38,34,98,.45);display:grid;place-items:center}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.spin-badge text{font-family:var(--font-display);font-size:9.6px;font-weight:600;letter-spacing:1px;fill:var(--navy)}
.spin-badge span{display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:50%;background:var(--grad);color:var(--white)}
.spin-badge span svg{position:static;width:58%;height:58%;animation:none}

/* Floating doodle shapes */
.deco{position:absolute;z-index:0;width:28px;height:28px;background:center/contain no-repeat;pointer-events:none;animation:bob 5s ease-in-out infinite}
.deco-plus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23F6551E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");width:22px;height:22px}
.deco-ring{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23262262' stroke-width='2.4'/%3E%3C/svg%3E");width:30px;height:30px;animation-duration:6s}
.deco-squig{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M2 7q5-7 10 0t10 0 10 0 10 0' fill='none' stroke='%23F6551E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");width:56px;height:18px;animation-duration:5.5s}
.deco-tri{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l9 15H3z' fill='none' stroke='%23262262' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");width:26px;height:26px;animation-name:bobspin;animation-duration:9s}
.deco-dots{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='%23F6551E'%3E%3Ccircle cx='5' cy='5' r='2.2'/%3E%3Ccircle cx='15' cy='5' r='2.2'/%3E%3Ccircle cx='25' cy='5' r='2.2'/%3E%3Ccircle cx='5' cy='15' r='2.2'/%3E%3Ccircle cx='15' cy='15' r='2.2'/%3E%3Ccircle cx='25' cy='15' r='2.2'/%3E%3Ccircle cx='5' cy='25' r='2.2'/%3E%3Ccircle cx='15' cy='25' r='2.2'/%3E%3Ccircle cx='25' cy='25' r='2.2'/%3E%3C/g%3E%3C/svg%3E");width:46px;height:46px;opacity:.55;animation-duration:7s}
.deco-star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F6551E'/%3E%3Cstop offset='1' stop-color='%23262262'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='url(%23g)'/%3E%3C/svg%3E");width:26px;height:26px;animation-name:twinkle;animation-duration:3.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bobspin{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.7) rotate(45deg);opacity:.6}}
.spec,.chair,.contact{position:relative;overflow:hidden}
.spec > .wrap,.chair > .wrap,.contact > .wrap{position:relative;z-index:1}

/* Subject ticker: a tilted gradient tape across the top of About */
.ticker{position:relative;z-index:2;margin:-6px -2% clamp(40px,5vw,64px);transform:rotate(-1.6deg);background:var(--grad);box-shadow:0 18px 40px -22px rgba(38,34,98,.6);overflow:hidden;padding-block:14px}
.ticker-track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker-track > div{display:flex;align-items:center;gap:26px;padding-right:26px}
.ticker span{font-family:var(--font-display);font-size:clamp(.9rem,.8rem + .4vw,1.1rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap}
.ticker i{font-style:normal;color:#FFC2A8;font-size:1.1rem}
@keyframes ticker{to{transform:translateX(-50%)}}
.about{padding-top:clamp(28px,3vw,44px)}

/* Faint maths/education doodles as background texture */
.about::before{inset:0;width:auto;height:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23262262' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cpath d='M24 34h16M32 26v16'/%3E%3Ccircle cx='214' cy='44' r='9'/%3E%3Cpath d='M126 212l11-19 11 19z'/%3E%3Cpath d='M34 158q8-10 16 0t16 0 16 0'/%3E%3Cpath d='M214 178l18-18m-12 0h12v12'/%3E%3Cpath d='M250 116l6 6m0-6l-6 6'/%3E%3Crect x='170' y='232' width='22' height='16' rx='2'/%3E%3Cpath d='M181 232v16'/%3E%3C/g%3E%3Cg fill='%23262262' opacity='0.07' font-family='Georgia,serif' font-style='italic' font-size='22'%3E%3Ctext x='96' y='62'%3E%CF%80%3C/text%3E%3Ctext x='22' y='244'%3Ex%C2%B2%3C/text%3E%3Ctext x='236' y='252'%3E%E2%88%9A%3C/text%3E%3Ctext x='156' y='138'%3E%E2%88%91%3C/text%3E%3Ctext x='64' y='112'%3Ea%2Bb%3C/text%3E%3C/g%3E%3C/svg%3E") repeat 0 0/280px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent)}
.testi::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cpath d='M24 34h16M32 26v16'/%3E%3Ccircle cx='214' cy='44' r='9'/%3E%3Cpath d='M126 212l11-19 11 19z'/%3E%3Cpath d='M34 158q8-10 16 0t16 0 16 0'/%3E%3Cpath d='M214 178l18-18m-12 0h12v12'/%3E%3Cpath d='M250 116l6 6m0-6l-6 6'/%3E%3Crect x='170' y='232' width='22' height='16' rx='2'/%3E%3Cpath d='M181 232v16'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.07' font-family='Georgia,serif' font-style='italic' font-size='22'%3E%3Ctext x='96' y='62'%3E%CF%80%3C/text%3E%3Ctext x='22' y='244'%3Ex%C2%B2%3C/text%3E%3Ctext x='236' y='252'%3E%E2%88%9A%3C/text%3E%3Ctext x='156' y='138'%3E%E2%88%91%3C/text%3E%3Ctext x='64' y='112'%3Ea%2Bb%3C/text%3E%3C/g%3E%3C/svg%3E") repeat 40px 20px/300px;pointer-events:none}
.testi > .wrap{position:relative;z-index:1}
.page-hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(560px,55%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23262262' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.08'%3E%3Cpath d='M24 34h16M32 26v16'/%3E%3Ccircle cx='214' cy='44' r='9'/%3E%3Cpath d='M126 212l11-19 11 19z'/%3E%3Cpath d='M34 158q8-10 16 0t16 0 16 0'/%3E%3Cpath d='M214 178l18-18m-12 0h12v12'/%3E%3Cpath d='M250 116l6 6m0-6l-6 6'/%3E%3Crect x='170' y='232' width='22' height='16' rx='2'/%3E%3Cpath d='M181 232v16'/%3E%3C/g%3E%3Cg fill='%23262262' opacity='0.08' font-family='Georgia,serif' font-style='italic' font-size='22'%3E%3Ctext x='96' y='62'%3E%CF%80%3C/text%3E%3Ctext x='22' y='244'%3Ex%C2%B2%3C/text%3E%3Ctext x='236' y='252'%3E%E2%88%9A%3C/text%3E%3Ctext x='156' y='138'%3E%E2%88%91%3C/text%3E%3Ctext x='64' y='112'%3Ea%2Bb%3C/text%3E%3C/g%3E%3C/svg%3E") repeat 0 0/260px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none}

/* Timeline cards: a strip of washi tape on each */
.tl{overflow:visible}
.tl::after{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-4deg);background:linear-gradient(90deg,rgba(246,85,30,.35),rgba(229,65,74,.3));border-radius:2px;box-shadow:0 2px 4px rgba(38,34,98,.08)}
.tl:nth-child(2)::after{transform:translateX(-50%) rotate(3deg);background:linear-gradient(90deg,rgba(38,34,98,.22),rgba(139,44,102,.22))}
.tl:nth-child(3)::after{transform:translateX(-50%) rotate(-2deg)}
.tl:nth-child(4)::after{transform:translateX(-50%) rotate(5deg);background:linear-gradient(90deg,rgba(38,34,98,.22),rgba(139,44,102,.22))}
.tl:hover{transform:translateY(-4px) rotate(-.6deg)}

/* Specialized cards: soft gradient bubble that grows on hover, slight playful tilt */
.card::before{content:"";position:absolute;right:-34px;top:-34px;width:104px;height:104px;border-radius:50%;background:var(--grad-soft);transition:transform .35s var(--ease)}
.card > *{position:relative;z-index:1}
.card:hover{transform:translateY(-6px) rotate(-.8deg)}
.card:nth-child(even):hover{transform:translateY(-6px) rotate(.8deg)}
.card:hover::before{transform:scale(1.8)}
.card-ico{border-radius:14px 14px 14px 4px}

/* Sticker-style tags */
.label{position:relative}
.cat{transform:rotate(-2deg)}
.post-card:nth-child(even) .cat{transform:rotate(2deg)}
.qual li:nth-child(1){transform:rotate(-1.5deg)}
.qual li:nth-child(2){transform:rotate(1.5deg)}

/* Chairman: squiggle under the signature */
.who b{padding-bottom:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5q5-5 10 0t10 0 10 0 10 0' fill='none' stroke='%23262262' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/30px 7px}

/* Testimonials: cards pinned at slight angles, straighten on hover */
.t-card:nth-child(1){rotate:-1.6deg}
.t-card:nth-child(2){rotate:1.2deg}
.t-card:nth-child(3){rotate:-.8deg}
.t-card:hover{rotate:0deg}
.t-card::before{content:"";position:absolute;top:-12px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--grad);box-shadow:0 4px 10px rgba(10,8,40,.35),inset 0 -3px 0 rgba(0,0,0,.18)}

/* Contact: paper plane doodle flying toward the form */
.plane{position:absolute;z-index:0;right:clamp(0px,4vw,60px);top:clamp(-30px,-1vw,0px);width:clamp(150px,15vw,220px);height:auto;animation:fly 5s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-8px)}}

/* Blog cards: playful lift */
.post-card:hover{transform:translateY(-6px) rotate(-.5deg)}
.post-card:nth-child(even):hover{transform:translateY(-6px) rotate(.5deg)}

@media (max-width:900px){
  .orb-wrap{right:-8%;top:-2%}
  .plane{display:none}
}
@media (max-width:600px){
  .hide-m,.deco{display:none}
  .spin-badge{left:-1%;top:2%;width:86px}
  .spin-badge text{font-size:9px}
  .ticker{margin-inline:-6%}
  .t-card:nth-child(n){rotate:0deg}
  .orb-ring-2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.orb,.orb-ring,.spin-badge svg,.deco,.plane{animation:none!important}
}

/* ================= Round 4: stats count-up, hero carousel, phone dial code, socials ================= */
.count{display:inline-block;font-variant-numeric:tabular-nums;text-align:left}

/* Hero carousel (inside the arched frame) */
.carousel{position:relative;width:100%;height:100%;touch-action:pan-y}
.car-track{display:flex;height:100%;transition:transform .6s var(--ease);will-change:transform}
.car-slide{flex:0 0 100%;height:100%;margin:0;overflow:hidden}
.car-slide img{width:100%;height:100%;object-fit:cover;object-position:40% 45%;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.car-track{cursor:grab}
.car-ui{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -12px rgba(38,34,98,.5);backdrop-filter:blur(6px)}
.car-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.car-btn svg{width:18px;height:18px}
.car-btn:hover,.car-btn:focus-visible{background:var(--grad);color:var(--white);box-shadow:none;transform:scale(1.06)}
.car-dots{display:flex;gap:6px;padding-inline:2px}
.car-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#CFCBE0;transition:width .3s var(--ease),background .3s}
.car-dot[aria-current="true"]{width:22px;background:var(--grad)}
.car-dot:focus-visible{outline-offset:2px}

/* Phone field with automatic country dialling code */
.phone-wrap{display:flex;align-items:stretch;min-width:0;border:1.5px solid var(--line);border-radius:12px;background:#FCFBFE;transition:border-color .2s,box-shadow .25s,background-color .2s}
.phone-wrap:hover{border-color:#D9CBE3}
.phone-wrap:focus-within{border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(246,85,30,.16)}
.phone-wrap.has-error,.phone-wrap:has(input[aria-invalid="true"]){border-color:#B42318}
.dial{display:flex;align-items:center;padding:0 12px 0 16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy);border-right:1.5px solid var(--line);white-space:nowrap;min-width:64px;justify-content:center}
.dial.is-empty{color:#A3A0BC;font-weight:400}
.phone-wrap input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0 12px 12px 0}

/* Footer social icons */
.socials{display:flex;gap:12px;list-style:none;margin:22px 0 0;padding:0}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--white);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.socials svg{width:20px;height:20px}
.socials a:hover,.socials a:focus-visible{background:var(--grad);box-shadow:none;transform:translateY(-3px)}

@media (max-width:600px){
  .car-ui{bottom:12px;gap:8px}
  .car-btn{width:40px;height:40px}
}

/* --- WP overrides --- */
/* Append only, below this marker (CLAUDE.md §1, D-06). One line of reason per
   rule, naming the prototype file the rule is reconciling with. Nothing above
   this marker may be edited. */

/* Step 03. design/prototype/index.html lines 89 and 93 inline stroke="#F6551E"
   on the two hero chip icons, because .chip .ico svg is the one icon context
   with no stroke rule of its own (style.css line 157) — the other three set it
   in CSS. The chips now draw from the one shared icon library (§6), where any
   of the sixteen keys can be chosen, so the colour has to come from here or a
   key without an inline stroke would render invisible. --orange IS #F6551E and
   a CSS rule beats a presentation attribute, so the prototype's own two chips
   are unchanged. */
.chip .ico svg{stroke:var(--orange)}

/* Step 07. design/prototype/css/style.css line 445 paints .testi .wave-bottom
   var(--orange-wash), because that is .contact's background and .contact is
   always the next section in the prototype (D-08). The editor can hide
   Contact, and then the wave meets the footer — measured on the prototype's
   own DOM in step 07: a pale wave on the footer's navy gradient, which is the
   wrong-coloured seam D-08 exists to prevent. sections/testimonials.php adds
   .testi-to-footer when Contact will not render, and --navy IS the footer
   gradient's 0% stop (line 466), so the wave then meets the footer in the
   footer's own colour. The prototype's own state is untouched: with Contact
   shown the class is never printed. */
.testi-to-footer .wave-bottom{color:var(--navy)}

/* Step 08. The inquiry form's spam honeypot. The prototype has no such field
   — its own form never submits (design/prototype/js/script.js line 215) — so
   there is no prototype rule to reconcile with and D-05's "honeypot + a
   time-trap instead of reCAPTCHA" has to hide it from here. It is moved
   off-screen rather than given display:none or hidden, because bots skip
   fields they can tell are hidden and the whole point is that one fills it in.
   A real visitor cannot reach it: tabindex="-1" takes it out of the tab order
   and aria-hidden="true" takes it out of the accessibility tree. */
.ml-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Step 09. The pager. design/prototype/ ships six articles on one page, so it
   has no pager at all and css/style.css has not one rule for one — grep for
   pager|pagination|page-numbers returns 0. §9 still asks for 9 per page plus a
   pager, so this is an addition rather than a port (rule 1), and it reuses the
   prototype's own parts: the links are .btn .btn-ghost (line 761) carrying the
   prototype's own two arrow SVGs, and the wrapper copies the shape .post-end
   already uses to close a column of content (line 761) — a border-top above a
   flex row. Unlike .post-end it is .wrap-wide rather than 720px, because the
   .posts grid above it is. margin-inline-start:auto on the next link keeps it
   right-aligned on page 1, where there is no "Newer posts" link beside it and
   justify-content alone would pull it left. parts/pagination.php prints
   nothing at all while there is only one page, which is the prototype's own
   state, so on a six-article site this rule matches no element. The element
   carries .wrap too, so the width and gutter come from line 58. */
.pager{margin-top:clamp(32px,4vw,48px);padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pager .pager-next{margin-inline-start:auto}

/* Step 10b. The two wave seams step 10a measured as wrong and D-29 records.
   Both follow D-20's precedent exactly — the partner rule .testi-to-footer is
   above — because the fault is the same one: design/prototype/css/style.css
   paints each .wave with the NEIGHBOURING section's background, so hiding the
   neighbour leaves a pale wave on the wrong ground. The prototype's own DOM
   fails identically, so these are not porting faults; they are D-08's
   inherent consequence when a section is hidden, which §4 makes the partial's
   job to paint. Each class is printed by its owning partial from the other
   sections' own render state, so with nothing hidden none of them prints at
   all and the prototype's three colours are untouched. Every rule here has
   the same (0,2,0) specificity as the prototype's own and wins only by being
   later in the file — nothing above the marker is edited.

   (A) .hero .wave-bottom is var(--peach) = .about's background (line 418,
   164). With About hidden it lands on .spec, .chair or .testi — all white,
   because .spec paints nothing of its own and sits on the body's white (51),
   .chair's own background is var(--white) (218), and .testi's top edge is
   covered by its own var(--white) .wave-top (444) — or on .contact's
   orange-wash (234), or on the footer's navy gradient with everything below
   hidden (466). Measured at delta 25, 25, 25, and 219 against the footer. */
.hero-to-white .wave-bottom{color:var(--white)}
.hero-to-contact .wave-bottom{color:var(--orange-wash)}
.hero-to-footer .wave-bottom{color:var(--navy)}

/* (B) .testi .wave-top is var(--white) = .chair's background (line 444, 218).
   Chairman hidden ALONE is still correct at delta 0, because .spec paints
   nothing and sits on the white body — which is what D-20 measured and why
   this case was missed: it needs two sections hidden before it appears. With
   Chairman and Specialized both hidden the wave meets .about's peach (164) at
   delta 25. Nothing else above needs a rule: .hero (407) and the sticky nav
   over the body's white (77, 51) are white already. */
.testi-from-about .wave-top{color:var(--peach)}

/* Step 11. The testimonials slider (D-35) — the first deliberate feature
   design/prototype/ does not have, so there is no rule here to reconcile with
   and every rule below is an addition (rule 1). It is allowed on one
   condition, and the condition is what keeps steps 02-10b intact: the slider
   exists only above THREE testimonials. sections/testimonials.php decides that
   in PHP, so with the prototype's own three not one selector below matches
   anything and .testi still measures 0 at all nine §11 widths.

   Per-view counts and their breakpoints are the prototype's own .testi-grid:
   three columns (line 449), two at 1080 (484) and one at 600 (497). They live
   in CSS rather than JS on purpose — the browser owns the breakpoints, there
   is one copy of each number, and JS only ever reads --t-view back. --t-gap is
   line 449's own gap expression; the track needs it in the step arithmetic as
   a value, which is the one number repeated here. */
.testi-slider{--t-gap:clamp(18px,2.4vw,32px);--t-view:3;--t-at:0}
@media (max-width:1080px){.testi-slider{--t-view:2}}
@media (max-width:600px){.testi-slider{--t-view:1}}

/* The clip box is the prototype's OWN .testi-grid element, so its margin-top
   (line 449) still comes from the prototype's rule. display:block turns off
   the grid it no longer is; the padding is what a .t-card needs outside its
   layout box and every number is measured, not guessed — 22px of gradient dot
   at top:-12px (line 614) plus a 6px hover lift, a shadow reaching 30px below
   (450), and ~5px of ±1.6deg rotation overhang each way (610-612). The
   negative margin-inline puts the clip edge back outside the cards so the
   content box, and therefore every card's width, is exactly what the grid
   gave it; 12px is inside --gutter's own 16px floor (42) at every width, so
   .wrap still cannot overflow.

   Every number here was MEASURED and two of them were wrong first time. 24px
   of padding-top left card 1 at -0.62px of clearance at 1080 and -0.12px at
   1000, and 40px of padding-bottom left 2.85px in the worst case: the
   rotation turns a ~510px card's corner about 7px past its own layout box,
   and the shadow a :hover grows to 0 36px 70px -30px (452) reaches 41px below
   it, less the 6px the lift takes back. 32 and 48 clear both with room at
   every one of the nine §11 widths. */
.testi-view{display:block;overflow:hidden;padding:32px 12px 48px;margin-inline:-12px}

/* No JS: a wrapping grid, so every testimonial is still on the page and
   readable — which is what this section does today. JS adds .is-slider and
   that single class is the whole switch. */
.testi-track{display:grid;grid-template-columns:repeat(var(--t-view),minmax(0,1fr));gap:var(--t-gap);align-items:start}

/* One card per step, not one page. Card width c = (W - (v-1)g)/v, so the step
   distance is c + g = (W + g)/v — which is the translate below. The hero's
   carousel cannot be reused for this: it moves translateX(-100 * i)% for one
   full-width slide per step (js/script.js 118), which is different
   arithmetic. align-items:start is .testi-grid's own value (449) carried over,
   so the cards keep their natural heights rather than stretching. */
.is-slider .testi-track{display:flex;transform:translateX(calc(var(--t-at) * -1 * (100% + var(--t-gap)) / var(--t-view)));transition:transform .6s var(--ease);will-change:transform}
.is-slider .testi-track > .t-card{flex:0 0 calc((100% - (var(--t-view) - 1) * var(--t-gap)) / var(--t-view))}

/* The tilt and the offset cycle every three, so the fourth card onward is
   drawn like the first three. This REMOVES a known limit rather than
   documenting one: lines 610-612 and 451 are written per position, so card 4
   used to sit straight and level. Every value is the prototype's own, and
   .is-slider .t-card:nth-child() is (0,3,0) against the prototype's (0,2,0),
   so these win on specificity without one byte above the marker being
   edited. */
.is-slider .t-card:nth-child(3n+1){rotate:-1.6deg}
.is-slider .t-card:nth-child(3n+2){rotate:1.2deg;margin-top:clamp(0px,3vw,40px)}
.is-slider .t-card:nth-child(3n+3){rotate:-.8deg}

/* Both resets below exist BECAUSE of that specificity win — without them the
   cycling would reach past the prototype's own two resets and undo them.
   Line 485 clears :nth-child(2)'s offset at 1080 for the two-column grid, and
   line 633 flattens every rotation at 600; the prototype's selectors are
   (0,2,0) and cannot reach card 5's 3n+2 or card 4's 3n+1, so the same two
   resets are restated here at (0,3,0). The cycling therefore only ever shows
   above 600px, exactly as it does in the prototype. */
@media (max-width:1080px){.is-slider .t-card:nth-child(3n+2){margin-top:0}}
@media (max-width:600px){.is-slider .t-card:nth-child(n){rotate:0deg}}

/* The arrows and dots. .car-btn, .car-dots and .car-dot are the prototype's
   own (650-656) and are reused unchanged — only the bar holding them is new,
   because .car-ui (649) is a white pill absolutely positioned over a
   photograph and this one sits under the cards on the navy band. */
.testi-ui{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:clamp(20px,2.4vw,32px)}

/* The bar ships with `hidden` and JS removes it, so arrows that cannot work
   are never shown. This rule is what makes that true, and it is the one
   prototype trap the slider deliberately does not reproduce: the hero's
   carousel sets ui.hidden = true for a single photo (js/script.js 107) and the
   bar still appears, because .car-ui's own display:flex is author CSS and
   beats the UA stylesheet's [hidden]{display:none}. That is why "a single hero
   photo still shows arrows and dots" is on the known-limits list. (0,2,0)
   beats .testi-ui's (0,1,0), so the attribute wins here. */
.testi-ui[hidden]{display:none}

/* Reduced motion: the band is text, and the prototype's own reduce block
   (636-638) switches off every decorative animation. The slide is not
   decorative — it is the only way to reach cards 4 onward — so the movement
   stays and only its transition goes, which makes each step instant instead
   of removing it. */
@media (prefers-reduced-motion:reduce){.is-slider .testi-track{transition:none}}

/* Restored 2026-10-21. Commit d13aeeb hand-edited the SEEDED block instead —
   it appended "; border: none" to design/prototype/css/style.css line 422's
   rule inside this file, which broke §1's verbatim guard (the prototype's
   1076 lines must still appear here byte for byte). The intent was right: the
   first and last .tl-dot carry the gradient (line 422) while .tl-dot keeps a
   2px navy ring (line 423), so the ring reads as an outline around the
   gradient. border-style, not the border shorthand: the seeded rule already
   sets border-color:transparent, and dropping only the style leaves the
   computed border identical to what d13aeeb produced — 0px / none /
   rgba(0,0,0,0) — rather than resetting the colour to currentcolor. */
.tl:first-child .tl-dot,.tl:last-child .tl-dot{border-style:none}

/* Step 12, item 1. The change document asks for a slogan above the brand
   line, which the prototype's <h1> has no equivalent of (index.html 35-38),
   so sections/hero.php adds one span and this is its rule. Every value is
   taken from the two lines it sits with rather than chosen: the display font,
   var(--step--1) and uppercase are .hero-brand's (style.css 118); the 500
   weight, var(--muted) and .14em tracking are .hero-brand small's (120); and
   14px is the gap .tagline already puts between two lines of this heading
   (121). It is quieter than the brand line and carries no ::before bar, so
   the orange marker still belongs to one line only. */
.hero-slogan{display:block;margin-bottom:14px;font-family:var(--font-display);font-size:var(--step--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Step 12, item 3. The slogan under the footer logo, which the prototype's
   footer has no equivalent of (index.html 633-642). Derived the same way:
   the 20px gap and .96rem are .foot-tag's (style.css 274), the display font
   and 500 weight are the brand line's idiom, and var(--white) separates it
   from the tagline underneath, which is deliberately muted. */
.foot-slogan{margin-top:20px;font-family:var(--font-display);font-size:.96rem;font-weight:500;color:var(--white)}

/* Step 12, item 9. The document marks the second hero chip "Should be center
   aligned". .chip is a flex row of icon + text (style.css 155) and the text
   is an anonymous flex item, so centring is text-align on the chip itself —
   which is what centres "Coaching" under "Online & In-Person". Only chip 2:
   the first chip's two lines are close in width and the document does not
   ask for it. */
.chip-b{text-align:center}

/* Step 12, item 10. "Make the word TESTIMONIALS a bit more larger." One step
   up the prototype's own type scale — var(--step--1) to var(--step-0)
   (style.css 35-36) — rather than a number of my own, which is the smallest
   change the scale can express and is what "a bit" buys. Scoped to .testi so
   every other section's label is untouched. */
.testi .label{font-size:var(--step-0)}

/* The footer logo loses its white panel, and its ink turns white instead
   (owner, 2026-10-23). The prototype sits logo.png on a white box
   (design/prototype/css/style.css 272) because the file is a BLACK outline on
   transparency: measured on the PNG itself, 73.6% of its pixels are
   transparent, 21.8% are the black outline and 4.4% the orange T and A —
   there is no white fill anywhere, so what reads as white inside the letters
   is whatever is behind them. Drop that onto .footer's dark ground (269, 466)
   with the panel removed and the outline disappears; the hollow interiors
   would show navy and the wordmark would be two orange letters floating.
   brightness(0) flattens every ink to black and invert(1) lifts it to white,
   so the outline reads white on navy and the letters stay hollow — which is
   the prototype's own drawing, in the one colour that survives the ground.
   It whitens the orange T and A as well: a filter cannot flip black to white
   and leave a single hue untouched — which is why it is now scoped to
   .foot-logo-inked, the class footer.php prints ONLY when no white logo has
   been set. The client supplied one on 2026-10-23 (assets/img/logo-white.png,
   measured 27.8% white ink, 4.3% orange, 0% black), so on this install the
   filter does not apply and the orange T and A survive. */
.foot-logo{padding:0;border-radius:0;background:none}
.foot-logo-inked img{filter:brightness(0) invert(1)}

/* A second caption pill, and the gap between the two (owner, 2026-10-23).
   design/prototype/css/style.css 458 styles .t-card em and the prototype's
   captions carry exactly one, so two sit flush against each other. The
   client's captions carry two — a job title and the course studied — which
   do not fit one pill: measured at 1440px, the two joined into one line
   wrapped it to 270px over two lines. Split across two pills each fits on
   one. margin-top is already on em, so only the horizontal gap is new, and
   it is set on the second pill alone so a single-pill caption is untouched.
   An empty second field prints no <em> at all, which is why the prototype's
   own three-card state is byte-identical still (D-35, D-36). */
.t-card em + em{margin-left:6px}

/* The chairman portrait's crop, moved here from the prototype body
   (reconciling commit f154403, "adjust image positioning in chair media for
   better layout", 2026-10-23). The intent is kept exactly — only its place
   changes. design/prototype/css/style.css 221 crops the portrait at
   50% 22%, which frames the head for the photograph the prototype ships;
   f154403 changed that line in place to 0%, which is left edge, vertically
   centred, and suits the photograph actually in use. Editing the body breaks
   §1 and D-13's guarantee that the prototype's CSS is a verbatim substring —
   the guarantee every step's measurement is checked against — so the rule
   belongs here instead, where it wins by being later in the file. If the
   portrait is replaced, this is the one line to revisit. */
.chair-media img{object-position:0%}

/* The footer credit becomes a link (owner, 2026-10-27). design/prototype/ has
   no anchor anywhere in .foot-bottom (css/style.css 315) and so no rule for
   one, and a{color:inherit} (line 89) only settles the colour -- the UA
   stylesheet still underlines it, which would make this the one underlined
   link in a footer where .foot-nav a sets text-decoration:none (728). Both
   values below are that rule's and its hover's (730): no underline at rest,
   and lifting to var(--white) on hover is how every other footer link already
   answers the pointer. The underline is added back on hover alone, because
   this link sits inside a sentence rather than in a list of links and needs
   something to say it is one. :focus-visible is included so the keyboard sees
   what the mouse does. */
.foot-bottom a{text-decoration:none;transition:color .2s}
.foot-bottom a:hover,.foot-bottom a:focus-visible{color:var(--white);text-decoration:underline}