/* AQ Career Consulting — site styles
   Palette and type lifted from the original Wix site.
   Avenir LT (Wix-licensed) is substituted with Mulish. */

:root{
  --green-deep:#014235;
  --green-mid:#4a9183;
  --green-dark:#35685e;
  --ink:#000;
  --sans:"Mulish","Avenir Next","Avenir",system-ui,sans-serif;
  --script:"Mr De Haviland",cursive;
  --maxw:1180px;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}

/* Fresh-take experiment: hold paint until Statsig assigns a group, then
   show only the matching layout. Fallback is the current (control) site.

   The homepage ships all layouts whole, one wrapper each. The blog index and
   a post page instead ship one copy of the content with a set of chrome per
   design around it, because duplicating the article to give each design its
   own copy would put every post's text in the page three times. So the
   switch has two halves: whole layouts, and chrome. Pages that carry neither
   (privacy, 404) are unaffected by any of this and stay on the control
   design. */
html.home-exp.exp-pending body{visibility:hidden}
#layout-fresh,#layout-raices,.ft-chrome,.rz-chrome{display:none}
html[data-home-design="fresh_take"] #layout-control{display:none}
html[data-home-design="fresh_take"] #layout-fresh{display:block}
html[data-home-design="fresh_take"] .site-chrome{display:none}
html[data-home-design="raices"] #layout-control{display:none}
html[data-home-design="raices"] #layout-raices{display:block}
html[data-home-design="raices"] .site-chrome{display:none}
/* display:contents, not block: the fresh-take header is sticky, and a sticky
   element travels only within its own parent's box. Inside a wrapper div that
   is exactly header-height it would have nowhere to go and would scroll away,
   where the control header and the variant homepage's both stay put. With no
   box of its own the wrapper leaves the header parented to <body>, and the
   .ft class on it still passes the variant's type and colour down. */
html[data-home-design="fresh_take"] .ft-chrome{display:contents}
html[data-home-design="raices"] .rz-chrome{display:contents}
/* Editorial-only furniture inside the shared article — the like bar. Both
   non-control arms show it, so it keeps the .ft- prefix it was built with. */
.ft-only{display:none}
html:is([data-home-design="fresh_take"],[data-home-design="raices"]) .ft-only{display:block}
/* Same trap as .aq-consent below: the rule above is an author rule and would
   otherwise outrank the browser's [hidden]{display:none}, showing the like
   bar before likes.js has decided it can work at all. */
html:is([data-home-design="fresh_take"],[data-home-design="raices"]) .ft-only[hidden]{display:none}
/* height:auto matters now that the build stamps intrinsic width and height
   on the post images: those attributes are presentational hints, so without
   it an image narrowed by max-width keeps its full pixel height and comes
   out stretched. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;color:var(--green-deep);padding:10px 14px;border:2px solid var(--green-deep)}
/* The header is sticky (~76px), so an anchor jump would otherwise land the
   target's heading underneath it. */
[id]{scroll-margin-top:92px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;padding:14px 0}
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.mark{line-height:1;text-decoration:none}
.mark .name{font-family:var(--script);font-size:34px;color:var(--green-deep);display:block;margin-bottom:-2px}
.mark .sub{font-size:9.5px;letter-spacing:.24em;color:var(--green-deep);text-transform:uppercase}
.social{justify-self:center;display:flex;gap:16px;align-items:center;background:var(--green-mid);padding:10px 20px;border-radius:2px}
.social a{display:grid;place-items:center;color:#fff}
.social svg{width:22px;height:22px;fill:currentColor}
nav.main{justify-self:end;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--green-deep)}
nav.main a{text-decoration:none;padding:6px 12px;border-radius:2px}
nav.main a[aria-current]{background:#dfeae6}
nav.main a:hover{background:#eef4f2}
.burger{display:none;background:none;border:0;font-size:22px;color:var(--green-deep);padding:6px;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding-block:52px 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-eyebrow,.signup-kicker{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-mid);margin:0 0 14px}
.hero h1{font-size:clamp(34px,4.2vw,54px);font-weight:500;line-height:1.12;margin:0 0 20px;color:var(--green-deep)}
.hero-lede{max-width:54ch;font-size:17px;line-height:1.7;color:#3a4a46;margin:0}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.btn-link{color:var(--green-deep);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(1,66,53,.35);padding-bottom:2px}
.btn-link:hover{border-color:var(--green-deep)}
.field-label{font-size:11px;color:#3b3b3b;margin-bottom:2px}
.field-label span{color:var(--green-mid)}
.subrow{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:end}
.line-input{width:100%;border:0;border-bottom:1px solid #000;background:transparent;font:inherit;font-size:14px;padding:6px 2px}
.line-input:focus{outline:2px solid var(--green-mid);outline-offset:3px}
.btn-ghost{border:1px solid #000;background:#fff;font-family:var(--sans);font-size:13px;padding:10px 6px;cursor:pointer}
.btn-ghost:hover{background:#f4f4f4}
.consent{display:flex;gap:9px;align-items:center;margin:18px 0 30px;font-size:12px;color:#222}
.consent input{width:14px;height:14px;accent-color:var(--green-mid)}
.btn-solid{display:inline-block;background:var(--green-mid);color:#fff;text-decoration:none;font-size:13px;letter-spacing:.02em;padding:14px 30px;border:0;cursor:pointer}
.btn-solid:hover{background:var(--green-dark)}
.portrait{justify-self:center;width:min(360px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.form-note{font-size:12.5px;margin:10px 0 0}

/* ---------- quote ---------- */
.quote{text-align:center;padding-block:46px 56px}
.quote p{font-family:"Lato",var(--sans);font-weight:300;font-size:23px;line-height:1.5;margin:0 auto;max-width:760px}
.quote .sig{font-family:var(--script);font-size:40px;color:var(--green-mid);margin-top:10px}

/* ---------- what I do ---------- */
.whatido{padding-block:10px 70px}
.whatido-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.photo-frame img{width:100%;aspect-ratio:4/3.3;object-fit:cover;border:6px solid #fff;outline:1px solid #e6e6e6}
.green-card{background:var(--green-mid);color:#fff;padding:44px 46px}
.script-h{font-family:var(--script);line-height:1;margin:0}
.green-card .script-h{font-size:56px;text-align:center;margin-bottom:22px}
.green-card p{font-size:15px;line-height:1.75;margin:0 0 16px}
.green-card p:last-child{margin-bottom:0}
.green-card strong{font-weight:700}

/* ---------- partners ---------- */
.partners{padding-block:0 64px}
.partners .script-h{font-size:56px;color:var(--green-mid);margin-bottom:34px}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 34px;align-items:center;justify-items:center}
.logos img{width:100%;max-width:180px;height:70px;object-fit:contain}

/* ---------- instagram ----------
   The grid and tiles are shared by all three homepage designs; each design
   only sets the section around them. */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#eee}
.ig-tile img,.ig-tile video{display:block;width:100%;height:100%;object-fit:cover}
.ig-tile img{transition:transform .3s,opacity .2s}
.ig-tile:hover img{transform:scale(1.04);opacity:.9}
.ig-tile video{background:#111}
.ig-tile.is-playing .ig-reel{opacity:0}
.ig-tile:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ig-reel{position:absolute;top:8px;right:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.45)}
.ig-reel svg{width:12px;height:12px;fill:#fff}
@media (max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.ig-tile img{transition:none}.ig-tile:hover img{transform:none}}

.ig{padding-block:0 64px;text-align:center}
.ig .script-h{font-size:56px;color:var(--green-mid);margin-bottom:34px}
.ig-follow{display:inline-block;margin-top:24px;color:var(--green-deep);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(1,66,53,.35);padding-bottom:2px}
.ig-follow:hover{border-color:var(--green-deep)}

/* ---------- testimonials ---------- */
.testi{position:relative;color:#fff;background:#0d0d0d;overflow:hidden}
.testi .bg{position:absolute;inset:0;background:url("../img/testimonial-bg.jpg") center/cover no-repeat;opacity:.34}
.testi .inner{position:relative;max-width:820px;margin:0 auto;padding:62px 70px 54px;text-align:center}
.testi .slide{display:none}
.testi .slide.on{display:block}
.testi .who{font-size:15px;letter-spacing:.06em}
.testi .meta{font-size:15px;font-weight:200}
.testi hr{width:34px;border:0;border-top:1px solid rgba(255,255,255,.75);margin:16px auto 20px}
.testi blockquote{margin:0;font-size:14.5px;line-height:1.8;font-weight:300}
.testi blockquote p{margin:0 0 14px}
.testi blockquote p:last-child{margin-bottom:0}
.dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;background:rgba(255,255,255,.45);border:0;cursor:pointer}
.dots button[aria-selected="true"]{background:#fff}
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:34px;font-weight:200;line-height:1;cursor:pointer;padding:10px}
.arrow:hover{opacity:.7}
.arrow.l{left:14px}
.arrow.r{right:14px}

/* ---------- services ---------- */
.services{padding-block:72px 30px}
.services .script-h{font-size:52px;color:var(--green-mid);text-align:center;margin-bottom:34px}
.srow{display:grid;grid-template-columns:34px 1fr 1.35fr;gap:26px;align-items:start;padding:34px 0;border-top:1px solid #d9d9d9}
.srow:last-child{border-bottom:1px solid #d9d9d9}
.srow .ico{color:var(--green-mid);opacity:.85}
.srow .ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.1}
.srow h3{font-size:24px;font-weight:300;line-height:1.3;margin:0;color:#1c1c1c}
.srow p{margin:0;font-size:14.5px;line-height:1.8;color:#3a3a3a}
.service-copy{margin:0}
.service-copy a{display:block;width:fit-content;margin-top:12px;color:var(--green-deep);font-size:13.5px;font-weight:700;text-decoration:none}
.service-copy a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- newsletter signup ---------- */
.signup-band{padding:64px 0}
.memo-signup{background:#eef4f2}
.signup-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.signup-grid h2{font-size:clamp(27px,3vw,38px);font-weight:500;line-height:1.2;color:var(--green-deep);margin:0 0 12px}
.signup-grid p{font-size:15.5px;line-height:1.7;color:#46534f;margin:0;max-width:52ch}
.signup-grid form{background:#fff;padding:28px}
.signup-grid .consent{margin:16px 0 20px}
.signup-input{width:100%;border:1px solid #aebdb8;background:#fff;color:#111;font:inherit;font-size:14px;padding:10px 11px}
.signup-input:focus{outline:2px solid var(--green-mid);outline-offset:2px}
.signup-submit{width:100%}

/* ---------- 2027 interest list dialog ----------
   Closed, the browser's own stylesheet makes a <dialog> display:none, so
   the panel costs the page nothing until it is asked for and never flashes
   inline first. base.html's <noscript> turns it back into a static block.
   Both homepage layouts ship one; the variant restyles it in
   fresh-take.css. */
.waitlist-dialog{
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  padding:0;border:0;background:transparent;overflow:auto;color:var(--ink)
}
.waitlist-dialog::backdrop{background:rgba(1,66,53,.55)}
.waitlist-panel{position:relative;background:#f3ece1;padding:40px 42px 36px}
.waitlist-panel h2{font-size:clamp(25px,3vw,33px);font-weight:500;line-height:1.2;color:var(--green-deep);margin:0 0 12px}
.waitlist-note{font-size:15px;line-height:1.7;color:#46534f;margin:0 0 26px}
.waitlist-close{
  position:absolute;top:8px;right:10px;background:none;border:0;line-height:1;
  font-family:var(--sans);font-size:26px;color:var(--green-deep);cursor:pointer;padding:6px 11px
}
.waitlist-close:hover{opacity:.6}
.waitlist-dialog :focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}

/* ---------- connect ---------- */
.connect{background:var(--green-mid);color:#fff;padding:64px 0 76px;margin-top:56px}
.connect .script-h{font-size:66px;margin-bottom:14px}
.connect .kicker{font-size:14px;letter-spacing:.17em;text-transform:uppercase;line-height:1.9;margin:0 0 44px}
form.contact{max-width:420px;margin:0 auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fl{font-size:11px;display:block;margin:0 0 4px}
.fl span{opacity:.8}
.box{width:100%;border:0;background:#fff;color:#111;font:inherit;font-size:14px;padding:9px 10px}
.box:focus{outline:2px solid var(--green-deep);outline-offset:2px}
textarea.box{height:86px;resize:vertical}
select.box{appearance:auto}
.fgrp{margin-bottom:16px}
.submit{width:100%;background:var(--green-dark);color:#fff;border:0;font-family:var(--sans);font-size:13px;padding:12px;cursor:pointer;margin-top:6px}
.submit:hover{background:var(--green-deep)}

/* ---------- form status + spam honeypot ---------- */
/* Honeypot: off-screen rather than display:none, so bots that check for
   hidden fields still fill it in. Kept out of the tab order too. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.js-turnstile{margin:14px 0 4px}
.form-status{margin:14px 0 0;font-size:13px;line-height:1.6}
.form-status a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-status.is-ok{color:var(--green-deep);font-weight:600}
.form-status.is-error{color:#8a2b20}
/* On the green "let's connect" panel the text sits on a dark ground. */
.connect .form-status.is-ok{color:#fff}
.connect .form-status.is-error{color:#ffe0dc}
button[type="submit"][disabled]{opacity:.65;cursor:progress}

/* ---------- footer ---------- */
footer.site{background:var(--green-deep);color:#fff;padding:40px 0 26px;font-size:13px}
footer.site .fg{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer.site a{color:#cfe0db}
footer.site nav{display:flex;gap:20px;flex-wrap:wrap}
footer.site nav a{text-decoration:none}
footer.site nav a:hover{text-decoration:underline;text-underline-offset:3px}
footer.site .copy{color:#9dc2b8;font-size:12px}

/* ---------- blog index ---------- */
.blog-head{padding-block:48px 10px;text-align:center}
.blog-head .script-h{font-size:56px;color:var(--green-mid)}
.blog-head p{font-size:15px;color:#444;margin:14px auto 0;max-width:56ch}
/* Newest post leads, the rest follow as a list. Cover art here ranges from
   photographs to book jackets to logos, so every thumbnail is contained on a
   tint rather than cropped — cropping turned the logos into abstract slabs. */
/* scroll-margin-top for the same reason [id] has it: paging.js brings the
   list up to the top of the screen after it swaps a page in, and the sticky
   header would otherwise sit over the first post. */
.blog-feed{padding-block:30px 70px;scroll-margin-top:92px}
/* Set while the next page is in flight. On a slow connection the click
   would otherwise look like it did nothing at all. */
.blog-feed[aria-busy="true"]{opacity:.5;transition:opacity .15s}
/* paging.js hands focus to the list so the keyboard carries on from the
   first new post. It is tabindex="-1" and unreachable by Tab, so the ring
   would only ever mark a move the script made. */
.blog-feed:focus{outline:none}
.pcard{text-decoration:none;display:block;color:inherit}
.pcard .thumb{overflow:hidden;background:#eef2f1;border-radius:4px}
.pcard .thumb img{width:100%;height:100%;object-fit:contain;transition:transform .35s}
.pcard:hover .thumb img{transform:scale(1.03)}
.pcard h2{font-weight:400;line-height:1.3;color:#141414;margin:0}
.pcard:hover h2{color:var(--green-deep)}
.pcard .excerpt{font-size:14.5px;line-height:1.7;color:#4a4a4a;margin:10px 0 0}
.pcard .pmeta{
  margin-top:14px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-mid);display:flex;align-items:center;gap:14px
}
.pcard .flag{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-mid);margin:0 0 10px
}

.pcard.lead{
  display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;
  padding-bottom:34px;border-bottom:1px solid #e3ebe8
}
.pcard.lead .thumb{aspect-ratio:4/3}
.pcard.lead h2{font-size:30px;line-height:1.2}
.pcard.lead .excerpt{font-size:16px}

.post-rows{display:grid;gap:2px;margin-top:6px}
.pcard.row{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:24px;
  align-items:center;padding:22px 0;border-bottom:1px solid #eef2f1
}
.pcard.row .thumb{aspect-ratio:1;background:#f4f7f6}
.pcard.row .pbody{max-width:84ch}
.pcard.row h2{font-size:18px}
.pcard.row .excerpt{
  margin-top:7px;font-size:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.pcard.row .pmeta{margin-top:10px}
.blog-page-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-mid);margin-top:10px
}
.blog-pagination{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  margin-top:42px;padding-top:24px;border-top:1px solid #e3ebe8;
  font-size:13px
}
.blog-page-direction{color:var(--green-deep);font-weight:600;text-decoration:none}
.blog-page-direction:last-child{text-align:right}
.blog-page-direction:hover{text-decoration:underline;text-underline-offset:3px}
.blog-page-direction.is-disabled{visibility:hidden}
.blog-page-numbers{display:flex;align-items:center;justify-content:center;gap:7px}
.blog-page-number{
  min-width:34px;height:34px;padding:0 8px;border:1px solid #d9e3e0;
  display:grid;place-items:center;color:var(--green-deep);text-decoration:none
}
a.blog-page-number:hover{background:#eef2f1}
.blog-page-number[aria-current="page"]{
  background:var(--green-deep);border-color:var(--green-deep);color:#fff;
  font-weight:700
}
.blog-page-gap{padding-inline:2px;color:#71807b}

/* ---------- single post ---------- */
.post{max-width:760px;margin:0 auto;padding:0 28px}
.post-head{padding-block:46px 0;text-align:center}
.post-head .pmeta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-mid)}
.post-head h1{font-size:clamp(28px,4vw,40px);font-weight:400;line-height:1.2;margin:16px 0 18px;color:#111}
.post-head .byline{font-size:13px;color:#555}
/* auto, not 0: .wrap centres itself and this rule was overriding that, so
   the cover sat against the left of the page while the article below it was
   centred. Invisible while the image was stretched the full width. */
.post-cover{margin:34px auto 8px}
/* The covers are a mixed bag — 1600px photographs, a 250px book jacket, a
   squat logo. width:100% with a 16:9 crop blew the small ones up across the
   column, blurry, with a face sliced in half. The frame instead carries the
   largest size the image can actually fill, written by the build as
   --cover-w, and the image fills the frame: nothing is ever enlarged and
   nothing is cropped. Absent the variable — an image the build couldn't
   read — it falls back to the column width, which is where it started. */
.post-cover .cover{margin-inline:auto;max-width:min(100%,var(--cover-w,100%))}
.post-cover img{width:100%}
.post-body{padding-block:26px 44px;font-size:16.5px;line-height:1.85;color:#232323}
.post-body p{margin:0 0 20px}
.post-body h2{font-size:24px;font-weight:400;line-height:1.3;margin:38px 0 14px;color:#111}
.post-body h3{font-size:20px;font-weight:500;margin:30px 0 12px;color:#111}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:24px}
.post-body li{margin-bottom:9px}
.post-body a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.post-body strong{font-weight:700}
.post-body figure{margin:28px 0}
/* Same as the cover: an image smaller than the column stays its own size
   and centres, rather than being stretched to fit. */
.post-body figure img{width:auto;max-width:100%;margin-inline:auto}
.post-body figcaption{font-size:13px;color:#666;margin-top:8px;text-align:center}
.post-body blockquote{margin:28px 0;padding-left:20px;border-left:3px solid var(--green-mid);color:#3a3a3a;font-style:italic}
/* A Subscribe button in the body of a post. On Wix these were button blocks
   linking to the old homepage; here each opens the memo dialog the build puts
   after every article (see memo_dialog in tools/build.py). The homepage's
   .btn-solid, restated under .post-body so it outranks the link rule above. */
.post-body .post-cta{display:inline-block;background:var(--green-mid);color:#fff;text-decoration:none;font-size:13px;letter-spacing:.02em;padding:14px 30px;margin:4px 0 6px}
.post-body .post-cta:hover{background:var(--green-dark)}
/* The memo dialog itself wears the interest list's classes and needs nothing
   more here; fresh-take.css and raices.css restyle it as .memo-dialog. */
.post-nav{border-top:1px solid #e2e2e2;padding-block:26px 64px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px}
.post-nav a{color:var(--green-deep);text-decoration:none;font-weight:600}
.post-nav a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- consent disclaimer ----------
   Fixed to the bottom and non-blocking: the site is readable while the
   choice is open, because nothing is being collected until it's made. */
.aq-consent{position:fixed;z-index:200;left:0;right:0;bottom:0;display:flex;justify-content:center;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
/* closeBanner() hides the dialog with el.hidden, and the display:flex above is
   an author rule, so it outranks the browser's own [hidden]{display:none} and
   the dialog stayed on screen after answering it. Restore it explicitly. */
.aq-consent[hidden]{display:none}
.aq-consent .panel{pointer-events:auto;width:100%;max-width:700px;background:#fff;
  border:1px solid #d9e0de;border-top:3px solid var(--green-mid);
  box-shadow:0 12px 44px rgba(1,66,53,.2);padding:22px 24px 20px}
.aq-consent .t{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--green-deep)}
.aq-consent .b{font-size:13.5px;line-height:1.65;color:#333;margin:0 0 12px}
.aq-consent .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.aq-consent .yes,.aq-consent .no{font-family:var(--sans);font-size:13px;padding:11px 22px;cursor:pointer}
.aq-consent .yes{background:var(--green-mid);color:#fff;border:0}
.aq-consent .yes:hover{background:var(--green-dark)}
.aq-consent .no{background:#fff;color:#222;border:1px solid #9aa5a2}
.aq-consent .no:hover{background:#f4f6f5}
/* .more styled the policy link when it sat in the button row; the notice now
   carries it inline in the body text instead, so both are covered here. */
.aq-consent .more,.aq-consent .b a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.aq-consent .more{font-size:12.5px}
.aq-consent :focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}

/* Standing opt-out: footer link on every page, panel on the privacy page. */
.consent-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.consent-panel{border:1px solid #e2e2e2;border-left:3px solid var(--green-mid);padding:20px 22px;margin:22px 0}
.consent-panel .state{font-size:14px;margin:0 0 14px}
.consent-panel .state b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-mid);font-weight:600;margin-bottom:6px}
.consent-panel .row{display:flex;flex-wrap:wrap;gap:12px}
.consent-panel button{font-family:var(--sans);font-size:13px;padding:10px 20px;cursor:pointer;
  background:#fff;color:#222;border:1px solid #9aa5a2}
.consent-panel button:hover:not(:disabled){background:#f4f6f5}
.consent-panel button:disabled{opacity:.45;cursor:default}

@media (max-width:560px){
  .aq-consent{padding:0 0 env(safe-area-inset-bottom,0px)}
  .aq-consent .panel{border-left:0;border-right:0;border-bottom:0}
  .aq-consent .row{gap:10px}
  .aq-consent .yes,.aq-consent .no{flex:1 1 100%}
}

/* ---------- 404 ---------- */
.nf{text-align:center;padding-block:90px 110px}
.nf .script-h{font-size:64px;color:var(--green-mid)}
.nf p{font-size:16px;color:#444;margin:18px 0 28px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pcard.lead{grid-template-columns:1fr;gap:22px}
  .pcard.lead .thumb{aspect-ratio:16/9}
}
@media (max-width:880px){
  .hdr{grid-template-columns:1fr auto}
  .social{order:3;grid-column:1/-1;justify-self:center}
  nav.main{display:none}
  nav.main.open{display:flex;order:4;grid-column:1/-1;justify-self:center;flex-wrap:wrap;justify-content:center}
  .burger{display:block;justify-self:end}
  .hero-grid,.whatido-grid{grid-template-columns:1fr;gap:34px}
  .signup-grid{grid-template-columns:1fr;gap:32px}
  .waitlist-panel{padding:34px 24px 30px}
  .portrait{order:-1}
  .logos{grid-template-columns:repeat(2,1fr)}
  .srow{grid-template-columns:26px 1fr;gap:16px}
  /* The copy sits under the title. Career Counseling wraps its paragraph
     and links in .service-copy; the other rows are a bare paragraph. */
  .srow p,.srow .service-copy{grid-column:2}
  .testi .inner{padding:52px 26px 44px}
  .arrow{font-size:26px}
  .arrow.l{left:2px}
  .arrow.r{right:2px}
  .connect .script-h{font-size:52px}
  .quote p{font-size:20px}
  .green-card{padding:34px 26px}
  .pcard.lead h2{font-size:25px}
  .pcard.row{grid-template-columns:76px minmax(0,1fr);gap:16px}
  .post-body{font-size:16px}
}
@media (max-width:560px){
  .blog-pagination{grid-template-columns:1fr 1fr;gap:18px 12px}
  .blog-page-numbers{grid-column:1/-1;grid-row:1}
  .blog-page-direction{grid-row:2}
}