/* ══════════════════════════════════════════════════════════
   Tachles·AI — Powder Monochrome landing.
   Structure = Calanit's reference: dark nav / hero scene card /
   split cards ×2 / wide scene band / white footer.
   The page is a collage of rounded cards floating on powder blue.
   ══════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-he); background-color:#659BA8;
  /* exact brand gradient (25% / 45% / 30%) + silk texture blended on top for depth only */
  background-image:url("../img/bg-texture.webp?v=2"),
    linear-gradient(90deg,#4E8897 0%,#4E8897 12%,#659BA8 48%,#AFCED4 85%,#AFCED4 100%);
  background-size:cover,100% 100%; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed; background-blend-mode:soft-light,normal;
  color:var(--ink); overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.en-run { font-family:'Heebo',sans-serif; }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(14px,3vw,28px); }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

.serif { font-family:var(--font-display); font-weight:500; }

/* ── buttons ── */
.pill { display:inline-block; background:var(--ink); color:var(--on-ink);
  border-radius:var(--r-pill); padding:13px 28px; font-weight:500; font-size:15px;
  border:none; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); }
.pill:hover { background:var(--ink-hover); transform:translateY(-1px); }
.pill:active { transform:translateY(0); }
.pill.light { background:#fff; color:var(--ink); }
.pill.light:hover { background:#F0F4F7; }
.tlink { font-weight:600; font-size:14.5px; color:var(--ink); border-bottom:1.5px solid var(--accent);
  padding-bottom:2px; transition:color .25s, border-color .25s; }
.tlink:hover { border-color:var(--accent-deep); color:var(--accent-deep); }

/* ── nav (light slim bar) ── */
nav { position:sticky; top:0; z-index:10; background:var(--nav); border-bottom:1px solid var(--line); }
nav .bar { max-width:var(--maxw); margin-inline:auto;
  padding:13px clamp(14px,3vw,28px); display:flex; align-items:center; gap:26px; }
.logo { font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--ink); letter-spacing:.01em; }
.nav-links { display:flex; gap:24px; }
.nav-links a { font-size:14.5px; font-weight:400; color:rgba(21,49,63,.72); transition:color .3s; }
.nav-links a:hover { color:var(--ink); }
.nav-end { margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.lang { font-weight:600; font-size:12.5px; background:none; border:1px solid rgba(21,49,63,.3);
  color:rgba(21,49,63,.8); border-radius:var(--r-pill); padding:6px 12px; cursor:pointer; transition:all .3s; }
.lang:hover { border-color:var(--ink); color:var(--ink); }
nav .pill { padding:9px 20px; font-size:14px; background:var(--ink); color:var(--on-ink); }
nav .pill:hover { background:var(--ink-hover); }

/* ── the collage ── */
main { padding-block:var(--gap) 0; }
.card-row { max-width:var(--maxw); margin:0 auto var(--gap); padding-inline:clamp(14px,3vw,28px);
  display:grid; gap:var(--gap); }

/* hero scene card */
#hero { position:relative; border-radius:var(--r); overflow:hidden; min-height:min(78svh,700px);
  display:flex; align-items:flex-start; }
#hero > img, #hero > picture { position:absolute; inset:0; width:100%; height:100%; }
#hero > picture img { width:100%; height:100%; object-fit:cover; }
#hero > img { object-fit:cover; }
#hero .content { position:relative; z-index:2; padding:clamp(32px,5vw,60px) clamp(24px,4vw,56px);
  margin-inline-start:auto; max-width:430px; }
.eyebrow { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px; }
#hero .eyebrow { color:var(--accent); font-size:16.5px; font-weight:700; }
#hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,3.6vw,44px);
  line-height:1.24; color:#fff; }
#hero .sub { margin-top:14px; font-size:15.5px; line-height:1.75; color:#fff; max-width:38ch; }
#hero .row { margin-top:26px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* split cards */
.split { grid-template-columns:1fr; }
.tcard { background:var(--card); border-radius:var(--r); padding:clamp(28px,4.5vw,60px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.tcard h2 { font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px,3.2vw,38px); line-height:1.25; }
.tcard p { margin-top:14px; font-size:15.5px; line-height:1.8; color:var(--body); max-width:52ch; }
.tcard .row { margin-top:24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.pcard { border-radius:var(--r); overflow:hidden; min-height:340px; position:relative; }
.pcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* wide band */
#band { position:relative; border-radius:var(--r); overflow:hidden;
  min-height:min(74svh,640px); display:flex; align-items:center; justify-content:flex-start; text-align:start; }
#band > img, #band > picture { position:absolute; inset:0; width:100%; height:100%; }
#band > picture img { width:100%; height:100%; object-fit:cover; }
#band > img { object-fit:cover; }
#band .content { position:relative; z-index:2; padding:clamp(44px,7vw,84px) clamp(24px,5vw,64px); max-width:520px; }
#band h2 { font-family:var(--font-display); font-weight:600;
  font-size:clamp(36px,4.8vw,54px); line-height:1.22; color:#fff; }
#band p { margin-top:14px; font-size:23.5px; line-height:1.6; color:#fff; }
#band .pill { margin-top:24px; }

/* ── footer (white card → full white base) ── */
footer { background:#fff; margin-top:calc(var(--gap) * 2); }
footer .top { max-width:var(--maxw); margin-inline:auto; padding:clamp(44px,6vw,72px) clamp(14px,3vw,28px) 28px;
  display:grid; grid-template-columns:1fr; gap:36px; }
footer .state { max-width:34ch; }
footer .state .serif { font-size:clamp(24px,3vw,34px); line-height:1.3; font-weight:600; }
footer .state p { margin-top:10px; color:var(--body); font-size:14.5px; line-height:1.7; }
.fcols { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.fcol h5 { font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px; }
.fcol a, .fcol span { display:block; font-size:14.5px; color:var(--body); padding-block:4px; }
.fcol a:hover { color:var(--ink); }
footer .bottom { border-top:1px solid var(--line); }
footer .bottom .in { max-width:var(--maxw); margin-inline:auto;
  padding:18px clamp(14px,3vw,28px); display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; font-size:13px; color:var(--muted); }

/* ── motion ── */
.reveal { opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .pill { transition:none; }
}

/* ── desktop ── */
@media (min-width: 860px) {
  .split { grid-template-columns:1fr 1fr; }
  .split.rev .tcard { order:2; }
  .split.rev .pcard { order:1; }
  footer .top { grid-template-columns:5fr 7fr; }
  .fcols { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px) {
  .nav-links { display:none; }
  #hero { min-height:82svh; align-items:center; }
  #hero h1 { color:#fff; }
  /* band (office portrait, clear top) → text at top, centered */
  #band { align-items:flex-start; justify-content:center; text-align:center; }
  #band .content { padding-top:40px; margin-inline:auto; }
}

/* ══════ round 2: contrast bands, hero right+large, services, rows, about ══════ */

/* hero: headline RIGHT (RTL start) and larger */
#hero .content { margin-inline-start:0; margin-inline-end:auto; max-width:540px; }
#hero h1 { font-size:clamp(38px,5.2vw,62px); line-height:1.2; }
#hero .sub { max-width:42ch; font-size:16px; }

/* full-bleed white/gray bands */
.band { background:var(--band); padding-block:clamp(56px,8vw,96px); margin-block:calc(var(--gap)*2); }
.band.pure { background:#fff; }
.band .card-row { margin-bottom:0; }
.band .tcard { background:transparent; padding:0; }
.band-head { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(14px,3vw,28px);
  margin-bottom:clamp(28px,4vw,44px); }
.band-head h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.6vw,42px); }
.band-head p { margin-top:10px; color:var(--body); font-size:15.5px; line-height:1.75; max-width:60ch; }

/* services grid */
.svcs { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(14px,3vw,28px);
  display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.svc2 { display:flex; gap:18px; align-items:flex-start; padding:22px 4px; border-bottom:1px solid var(--line); }
.svc2 svg { width:34px; height:34px; stroke:var(--ink); flex-shrink:0; margin-top:3px; }
.svc2 h3 { font-weight:700; font-size:17px; }
.svc2 p { margin-top:4px; font-size:14.5px; color:var(--body); line-height:1.65; }

/* workshop rows (inside band) */
.rows { max-width:var(--maxw); margin:clamp(24px,3vw,36px) auto 0; padding-inline:clamp(14px,3vw,28px); }
.rowi { display:flex; align-items:center; gap:16px; padding:17px 4px;
  border-bottom:1px solid var(--line); transition:background .25s; }
.rows .rowi:first-child { border-top:1px solid var(--line); }
.rowi .txt { flex:1; }
.rowi h4 { font-weight:700; font-size:16px; }
.rowi p { margin-top:2px; font-size:14px; color:var(--body); line-height:1.6; }
.rowi .go { flex-shrink:0; width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); font-size:15px; transition:all .25s var(--ease); }
.rowi:hover .go { background:var(--ink); color:#fff; border-color:transparent; }

/* who we are */
.about { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(14px,3vw,28px);
  display:grid; grid-template-columns:1fr; gap:28px; }
.person { display:flex; gap:18px; align-items:flex-start; }
.person img { width:104px; height:104px; object-fit:cover; border-radius:14px; flex-shrink:0; }
.person h3 { font-weight:700; font-size:18px; }
.person .role { font-size:13px; color:var(--muted); font-weight:600; margin:2px 0 8px; }
.person p { font-size:14.5px; color:var(--body); line-height:1.7; }
.numbers-line { max-width:var(--maxw); margin:clamp(28px,4vw,40px) auto 0;
  padding:20px clamp(14px,3vw,28px) 0; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--body); line-height:2; }
.numbers-line b { color:var(--ink); }

@media (min-width: 860px) {
  .svcs { grid-template-columns:1fr 1fr; column-gap:48px; }
  .about { grid-template-columns:1fr 1fr; gap:40px; }
}

/* ══════ round 3: white bento SHEETS with 4/6 flush tiles (per Calanit's reference) ══════
   A white card floats on the powder canvas. Inside, tiles are pure white and the
   sheet's own background is the hairline colour, so every 1px gap reads as a crisp seam.
   Rows split 6/4 (text/photo) and alternate. Lists become hairline tile grids. */
.sheetrow { max-width:var(--maxw); margin:calc(var(--gap)*2) auto; padding-inline:clamp(14px,3vw,28px); }
/* clean borderless card — one white sheet, NO hairline seams between tiles */
.sheet { background:#fff; border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; gap:0; }

.tiles { display:grid; grid-template-columns:1fr; gap:0; }
.tilegrid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); }
.tile, .cell { background:#fff; }
.tile { padding:clamp(28px,4.2vw,56px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.tile .eyebrow { margin-bottom:10px; }
.tile h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.9vw,34px); line-height:1.28; }
.tile h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(21px,2.3vw,28px); line-height:1.3; }
.tile .num { font-family:var(--font-he); font-size:13px; font-weight:600; letter-spacing:.12em;
  color:var(--muted); margin-bottom:10px; }
.tile > p { margin-top:12px; font-size:15px; line-height:1.8; color:var(--body); max-width:48ch; }
.tile .row { margin-top:22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }

/* photo tile */
.tile.photo { padding:0; position:relative; min-height:300px; }
.tile.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* full-width header tile */
.tile.head { padding-bottom:clamp(16px,2.4vw,28px); }
.tile.head h2 { font-size:clamp(28px,3.4vw,40px); }
.tile.head > p { max-width:64ch; }

/* founders duo inside one photo tile */
.tile.photo .duo { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.tile.photo .duo img { position:static; width:100%; height:100%; object-fit:cover; }

/* numbers foot tile */
.tile.foot { padding-block:clamp(20px,2.6vw,28px); }
.tile.foot .numbers-line { border:0; margin:0; padding:0; max-width:none; }

/* hairline item grid — services, workshops, bios */
.tilegrid .cell { padding:clamp(22px,3vw,32px); display:flex; gap:16px; align-items:flex-start; }
.tilegrid .cell svg { width:32px; height:32px; stroke:var(--ink); flex-shrink:0; margin-top:3px; }
.tilegrid .cell h3 { font-weight:700; font-size:16.5px; font-family:var(--font-he); }
.tilegrid .cell p { margin-top:4px; font-size:14px; color:var(--body); line-height:1.65; }
.tilegrid .cell .body { flex:1; }
.tilegrid a.cell .go { margin-inline-start:auto; align-self:center; flex-shrink:0;
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); font-size:15px; transition:all .25s var(--ease); }
.tilegrid a.cell { transition:background .25s; }
.tilegrid a.cell:hover { background:#F7F9FA; }
.tilegrid a.cell:hover .go { background:var(--ink); color:#fff; border-color:transparent; }
.cell.bio { flex-direction:column; }
.cell.bio h3 { font-size:18px; }
.cell.bio .role { font-size:13px; color:var(--muted); font-weight:600; margin:2px 0 0; }
.cell.bio p { font-size:14.5px; line-height:1.7; }
/* bio header: circular photo + name/role + small linkedin icon */
.bio-head { display:flex; align-items:center; gap:14px; width:100%; }
.bio-photo { width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bio-id { flex:1; min-width:0; }
.bio-li { flex-shrink:0; width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; color:var(--ink); border:1px solid var(--line); transition:all .25s var(--ease); }
.bio-li svg { width:17px; height:17px; }
.bio-li:hover { background:#0A66C2; color:#fff; border-color:transparent; }
.cell.cta { align-items:center; justify-content:space-between; }
.cell.cta .body h3 { font-family:var(--font-display); }

@media (min-width: 860px) {
  .tiles.two    { grid-template-columns:1fr 1fr; }
  .tiles.sixfour{ grid-template-columns:6fr 4fr; }
  .tiles.foursix{ grid-template-columns:4fr 6fr; }
  .tiles .span  { grid-column:1 / -1; }
  .tilegrid.two   { grid-template-columns:1fr 1fr; }
  .tilegrid.three { grid-template-columns:repeat(3,1fr); }
}

/* ══════ מה אנחנו עושים — gray contrast section; each row = white text box + equal framed image ══════ */
.svcsec { background:var(--band); }                    /* warm-gray section (#EBE9E8) for contrast with white boxes */
.svcsec-in { max-width:var(--maxw); margin-inline:auto;
  padding:clamp(40px,6vw,84px) clamp(16px,3vw,32px); } /* margin from section on all sides */
.svc-head { margin-bottom:clamp(22px,3vw,40px); }
.svc-head .eyebrow { margin-bottom:12px; }
.svc-head h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.6vw,42px); line-height:1.2; }
.svc-head > p { margin-top:10px; color:var(--body); font-size:15.5px; line-height:1.75; max-width:60ch; }

/* each row is its own separate unit; text and image touch (no gap), straight corners */
.svc-row { display:grid; grid-template-columns:1fr; gap:0;
  margin-bottom:clamp(16px,2vw,28px);
  box-shadow:0 10px 24px -8px rgba(21,49,63,.22), 0 28px 56px -20px rgba(21,49,63,.28); }
.svc-row:last-child { margin-bottom:0; }

/* section 2: rows fly in from alternating sides — right, left, right, … */
.svc-row.reveal { transform:translateX(90px); }        /* non-rev rows enter from the RIGHT */
.svc-row.rev.reveal { transform:translateX(-90px); }   /* rev rows enter from the LEFT */
.svc-row.reveal.in { transform:none; }
/* mobile: rows stack full-width, so a horizontal slide looks off — use a gentle fade-up instead */
@media (max-width:640px) {
  .svc-row.reveal, .svc-row.rev.reveal { transform:translateY(22px); }
  .svc-row.reveal.in { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row.reveal, .svc-row.rev.reveal { transform:none; }
}

.svc-text { background:#fff; border-radius:0; padding:clamp(28px,3.6vw,56px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  min-height:clamp(280px,28vw,380px); }
.svc-text h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.5vw,30px); line-height:1.28; }
.svc-text p { margin-top:12px; font-size:15px; line-height:1.8; color:var(--body); max-width:46ch; }
.svc-uses { list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.svc-uses li { position:relative; padding-inline-start:20px; font-size:14.5px; line-height:1.55;
  color:var(--body); max-width:46ch; }
.svc-uses li::before { content:""; position:absolute; inset-inline-start:0; top:8px;
  width:7px; height:7px; border-radius:2px; background:var(--accent); }

.svc-img { background:#fff; border-radius:0; overflow:hidden; position:relative;
  min-height:clamp(280px,28vw,380px); }
.svc-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (min-width:860px){
  .svc-row { grid-template-columns:1fr 1fr; }   /* two EQUAL boxes */
  .svc-row.rev .svc-text { order:2; }
  .svc-row.rev .svc-img  { order:1; }
}

/* ══════ hero + CTA band full-bleed — the image is the entire section, no margin, straight edges ══════ */
main { padding-top:0; }
#hero, #band { border-radius:0; margin:0; width:100%; }

/* switch: hero now uses the FLOATING photo (clear center) — headline centered */
#hero { align-items:center; justify-content:center; }
#hero .content { margin-inline:auto; max-width:640px; text-align:center; }
#hero .sub { margin-inline:auto; }
#hero .row { justify-content:center; }

/* ══════ hero placement tweaks ══════ */
/* desktop: nudge the centered hero content 50px to the right */
@media (min-width:641px){
  #hero .content { transform:translateX(50px); }
  /* match the photo's aspect ratio so the full image shows (no top crop) */
  #hero { min-height:0; aspect-ratio:2000/1121; }
  /* last section (CTA band): nudge the text 200px to the left */
  #band .content { transform:translateX(-200px); }
}
/* mobile: header lowered from the top, sub hidden, buttons pinned to the floor */
@media (max-width:640px){
  #hero { align-items:stretch; }
  #hero .content { transform:none; width:100%; max-width:none; padding-top:190px; }
  #hero .sub { display:none; }
  #hero .row { position:absolute; bottom:30px; inset-inline:0; justify-content:center; margin-top:0; }
}

/* ══════ workshops: numbered course-catalog cards ══════ */
.wgrid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(24px,3vw,36px); }
.wcard { position:relative; display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:26px 24px 60px; min-height:196px; overflow:hidden; text-align:start;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.wc-top { display:flex; flex-direction:column; align-items:flex-start; }
.wc-num { font-family:var(--font-display); font-weight:600; font-size:42px; line-height:1;
  color:rgba(78,136,151,.30); transition:color .3s var(--ease); }
.wc-icon { width:26px; height:26px; color:var(--accent); margin-top:16px; transition:color .3s var(--ease); }
.wcard h3 { margin-top:14px; font-family:var(--font-he); font-weight:700; font-size:17px; line-height:1.3; }
.wcard p { margin-top:6px; font-size:14px; line-height:1.6; color:var(--body); transition:color .3s var(--ease); }
.wcard .go { position:absolute; inset-inline-end:24px; bottom:22px; width:34px; height:34px;
  border-radius:9px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--ink); font-size:15px; transition:all .3s var(--ease); }
/* filled card: painted teal permanently (the Agents workshop) */
.wcard.filled { border-color:transparent;
  background:linear-gradient(120deg,var(--teal-deep),var(--teal)); }
.wcard.filled .wc-num { color:rgba(255,255,255,.55); }
.wcard.filled .wc-icon, .wcard.filled h3, .wcard.filled p { color:#fff; }
.wcard.filled .go { background:#fff; color:var(--teal-deep); border-color:transparent; }
/* hover: no color change — the card lifts and the frame strengthens so it pops */
.wcard:hover { transform:translateY(-4px); border-color:var(--teal);
  box-shadow:0 16px 34px rgba(21,49,63,.20), 0 0 0 1px var(--teal); }
.wcard.filled:hover { border-color:transparent;
  box-shadow:0 18px 38px rgba(21,49,63,.28), 0 0 0 1.5px rgba(255,255,255,.65); }
/* CTA card: filled deep-navy by default */
.wcard.cta { background:var(--ink); border-color:transparent; justify-content:center; }
.wcard.cta .wc-icon { color:#fff; margin-top:0; }
.wcard.cta h3, .wcard.cta p { color:var(--on-ink); }
.wcard.cta .go { color:#fff; border-color:rgba(255,255,255,.35); }
.wcard.cta:hover { box-shadow:0 18px 38px rgba(21,49,63,.28), 0 0 0 1.5px rgba(255,255,255,.45); }
@media (min-width:860px){ .wgrid { grid-template-columns:repeat(3,1fr); } }
@media (prefers-reduced-motion: reduce){ .wcard:hover { transform:none; } }
/* mobile: narrower centered cards, number+icon on one row, arrow flowing after the text */
@media (max-width:640px){
  .wgrid { gap:12px; }
  .wcard { max-width:330px; width:100%; margin-inline:auto; min-height:0; padding:22px 22px 24px; }
  .wc-top { flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .wc-top .wc-icon { margin-top:0; }
  .wcard .go { position:static; margin-top:16px; }
  .wcard.cta { justify-content:flex-start; }
}

/* ══════ nav dropdown — Courses & Materials ══════ */
.nav-links .drop{position:relative;display:flex;align-items:center}
.nav-links .drop>a::after{content:"▾";font-size:9px;margin-inline-start:6px;opacity:.6}
.drop-menu{position:absolute;top:100%;inset-inline-start:-10px;display:none;min-width:180px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 14px 32px rgba(21,49,63,.16);z-index:30}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{display:block}
.drop-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:rgba(21,49,63,.8)}
.drop-menu a:hover{background:#F0F5F6;color:var(--ink)}