/* ============================================================
   FLOR HADAR — hand-drawn touch (mockup)
   Minimalism kept intact. The only additions are ink marks that
   look drawn by hand: title highlights, a few background strokes,
   arrows and ticks. No gradients. No handwritten font. No change
   to type, logo, titles or copy.
   ============================================================ */

:root{
  --ink:#4ac5ca;            /* the existing teal, used as ink */
  --ink-bright:#5ce1e6;
  --hand-strength:1;
  --hand-weight:1;          /* how heavy the pen is */
}
html[data-hand="off"]{--hand-strength:0;--hand-weight:0}
html[data-hand="light"]{--hand-strength:.62;--hand-weight:.8}
html[data-hand="medium"]{--hand-strength:1;--hand-weight:1}
html[data-hand="strong"]{--hand-strength:1.35;--hand-weight:1.9}

/* the drawing surface of each section */
.hand-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  opacity:var(--hand-strength);transition:opacity .4s ease}
section,footer{position:relative}
.hero-container,.manifesto-container,.expertise-container,.testimonials-container,
.results-container,.method-container,.strategy-notes-container,.connect-container,
.footer-container{position:relative;z-index:1}

/* every drawn stroke: two passes, round caps, drawn on arrival */
.hand-ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.hand-ink.p1{stroke-width:calc(1.7px * var(--hand-weight));opacity:.92}
.hand-ink.p2{stroke-width:calc(1.05px * var(--hand-weight));opacity:.5}
.hand-draw{stroke-dasharray:var(--len,1200px);stroke-dashoffset:var(--len,1200px);
  transition:stroke-dashoffset .85s cubic-bezier(0.16,1.02,0.3,1)}
.hand-in .hand-draw{stroke-dashoffset:0}
.hand-in .hand-draw.d2{transition-delay:.13s}
.hand-in .hand-draw.d3{transition-delay:.26s}

/* ---- title highlights ---- */
.hand-underline{position:absolute;overflow:visible;pointer-events:none;z-index:2}
.hand-underline .hand-ink{stroke:var(--ink);stroke-width:calc(2.3px * var(--hand-weight))}
.hand-underline .hand-ink.p2{stroke-width:calc(1.3px * var(--hand-weight));opacity:.45}
.results-section .hand-underline .hand-ink,
.connect-section .hand-underline .hand-ink,
.testimonials-section .hand-underline .hand-ink{stroke:var(--ink-bright)}

/* highlighter swipe behind a word */
.hand-word{position:relative;display:inline-block}
.hero-headline .hand-word,.manifesto-headline .hand-word,.connect-headline .hand-word{display:inline-block}
.hand-swipe{position:absolute;left:-.22em;right:-.22em;top:0;bottom:0;width:auto;height:100%;z-index:-1;overflow:visible}
.hand-swipe path{fill:none;stroke:var(--ink-bright);stroke-linecap:butt;opacity:calc(.3 + .22 * var(--hand-weight));
  stroke-dasharray:var(--len,600px);stroke-dashoffset:var(--len,600px);
  transition:stroke-dashoffset 1s cubic-bezier(0.19,1,0.22,1) .2s}
.hand-in .hand-swipe path{stroke-dashoffset:0}

/* drawn ticks in front of the hero questions — they replace the plain bullet */
.reasons-list li{position:relative}
html:not([data-hand="off"]) .reasons-list li::before{opacity:0}
.hand-tick{position:absolute;left:-1.5rem;top:.18em;width:17px;height:17px;overflow:visible}
.hand-tick .hand-ink{stroke-width:1.8;opacity:.95;stroke:var(--ink-bright)}

/* drawn arrows replacing the plain arrows in before → after */
.hand-arrow{display:inline-block;width:52px;height:16px;overflow:visible;vertical-align:middle}
.hand-arrow .hand-ink{stroke:var(--ink-bright);stroke-width:1.6}

/* a drawn corner on the service cards */
.hand-corner{position:absolute;width:24px;height:24px;overflow:visible;z-index:3;
  transition:all .45s cubic-bezier(0.19,1,0.22,1)}
.hand-corner--tl{top:14px;left:14px}
.hand-corner--br{bottom:14px;right:14px;transform:rotate(180deg)}
.expertise-card:hover .hand-corner--tl{top:9px;left:9px}
.expertise-card:hover .hand-corner--br{bottom:9px;right:9px}
.expertise-card:hover .hand-corner .hand-ink{stroke:var(--ink-bright)}

/* control panel (mockup only) */
.fx-panel{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;align-items:center;gap:.45rem;
  background:rgba(61,57,59,.95);color:#f8f7f0;padding:.5rem .6rem;border-radius:10px;
  font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 26px rgba(0,0,0,.28);flex-wrap:wrap;max-width:min(94vw,860px)}
.fx-panel b{font-weight:600;opacity:.6}
.fx-panel button{border:1px solid rgba(248,247,240,.3);background:transparent;color:inherit;font:inherit;
  padding:.3rem .5rem;border-radius:6px;cursor:pointer;transition:all .2s ease}
.fx-panel button:hover{border-color:var(--ink-bright)}
.fx-panel button.on{background:var(--ink-bright);color:#3d393b;border-color:var(--ink-bright)}
.fx-panel a{color:var(--ink-bright);text-decoration:none;border-bottom:1px solid rgba(92,225,230,.5)}
.fx-sep{display:inline-block;width:1px;height:15px;background:rgba(248,247,240,.25);margin:0 .2rem}
.fx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9500;transform-origin:0 50%;
  transform:scaleX(0);background:var(--ink-bright);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .hand-draw,.hand-swipe path{stroke-dashoffset:0!important;transition:none}
}
@media (max-width:760px){
  .hand-bg{display:none}
  .fx-panel{font-size:.55rem;right:6px;bottom:6px}
}


/* ============================================================
   the bold layer — the gestures that carry the page
   ============================================================ */

/* the big circled word in the hero */
.hand-circle{position:absolute;pointer-events:none;overflow:visible;z-index:2}
.hand-circle .hand-ink{stroke:var(--ink-bright);stroke-width:calc(2.4px * var(--hand-weight));opacity:.95}
.hand-circle .hand-ink.p2{stroke-width:calc(1.4px * var(--hand-weight));opacity:.5}
.hand-circle .hand-draw{transition-duration:1.05s}

/* the pen trail that follows the cursor */
#handTrail{position:fixed;inset:0;z-index:9200;pointer-events:none;opacity:calc(.9 * var(--hand-strength))}
@media (hover:none){#handTrail{display:none}}

/* oversized marks */
.hand-mark--xl .hand-ink{stroke-width:calc(2.4px * var(--hand-weight));opacity:.8}

/* the statistics get room for a bigger gesture */



/* ============================================================
   handwritten accents — five candidates, switchable live.
   Applied ONLY to small secondary text: the eyebrow labels, the
   "Sound familiar?" intro, the footer line and drawn annotations.
   Never to titles, never to the logo, never to body copy.
   ============================================================ */
:root{--font-hand:inherit;--hand-font-scale:1;--hand-font-track:.04em}
html[data-font="architects"]{--font-hand:'Architects Daughter',cursive;--hand-font-scale:1.16;--hand-font-track:.045em}
html[data-font="kalam"]{--font-hand:'Kalam',cursive;--hand-font-scale:1.14;--hand-font-track:.04em}
html[data-font="shadows"]{--font-hand:'Shadows Into Light Two',cursive;--hand-font-scale:1.3;--hand-font-track:.075em}
html[data-font="amatic"]{--font-hand:'Amatic SC',cursive;--hand-font-scale:1.7;--hand-font-track:.08em}
html[data-font="marker"]{--font-hand:'Permanent Marker',cursive;--hand-font-scale:1.05;--hand-font-track:.02em}

html:not([data-font="off"]) .section-label,
html:not([data-font="off"]) .hero-tagline,
html:not([data-font="off"]) .footer-tagline,
html:not([data-font="off"]) .hand-note{
  font-family:var(--font-hand);
  font-size:calc(1em * var(--hand-font-scale));
  letter-spacing:var(--hand-font-track);
  text-transform:none;
}
/* the eyebrow keeps its teal block, just in a written hand */
html:not([data-font="off"]) .section-label{font-weight:400}



/* the statistics, written by hand inside their drawn circle */
html:not([data-font="off"]) .stat-number{
  font-family:var(--font-hand);
  font-size:calc(4.6rem * var(--hand-font-scale) * .82);
  line-height:1.05;
  letter-spacing:calc(var(--hand-font-track) * .5);
}
html:not([data-font="off"]) .manifesto-stats .stat-number::after{font-size:.46em}
html:not([data-font="off"]) .stat-label{
  font-family:var(--font-hand);
  font-size:calc(1.02rem * var(--hand-font-scale));
  letter-spacing:var(--hand-font-track);text-transform:none;line-height:1.4;
}
html[data-font="amatic"] .stat-number{font-weight:700}

/* the service and testimonial cards, guaranteed to line up:
   equal heights, tops and bottoms flush, whatever the text length */
.expertise-grid,.testimonials-grid{align-items:stretch}
.expertise-card,.testimonial-card{height:100%;display:flex;flex-direction:column}
.expertise-card .card-visual{margin-top:auto}
/* the letter button always sits at the foot of its card, with room above it
   whatever the length of the quote */
.testimonial-card .testimonial-letter-btn{margin-top:auto;align-self:flex-start}
.testimonial-card .testimonial-meta{margin-bottom:2.4rem}
.testimonial-card .testimonial-quote{margin-bottom:2rem}

/* ============================================================
   scrapbook touches — used sparingly, so the page stays minimal
   ============================================================ */

/* the note attached to the call to action, on the button's own centre line */
.hand-cta-note{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.5rem;
  pointer-events:none;white-space:nowrap;opacity:calc(1 * var(--hand-strength))}
.hand-cta-arrow{flex:0 0 auto;overflow:visible}
.hand-cta-arrow .hand-ink{stroke:var(--ink-bright);stroke-width:calc(1.8px * var(--hand-weight))}
.hand-cta-arrow .hand-ink.p2{stroke-width:calc(1.1px * var(--hand-weight));opacity:.45}
.hand-note-text{font-family:var(--font-hand);color:var(--ink-bright);
  font-size:calc(1.02rem * var(--hand-font-scale));letter-spacing:var(--hand-font-track);line-height:1}
html[data-font="off"] .hand-note-text{display:none}
@media (max-width:1200px){.hand-cta-note{display:none}}

/* the portrait, built like the reference: a solid teal block set behind it,
   and a real strip of tape holding it down */
.portrait-wrapper{transform:rotate(-.8deg);transition:transform .6s cubic-bezier(0.19,1,0.22,1)}
.portrait-wrapper:hover{transform:rotate(0deg)}
/* the photo in its own proportion (768 x 1024), not cropped to a square */
.portrait-frame{aspect-ratio:3/4;max-width:450px;position:relative;z-index:1}
.portrait-frame img{object-position:center center}
.portrait-wrapper::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  top:26px;left:-26px;width:min(100%,450px);height:100%;
  background:var(--accent);opacity:calc(.9 * var(--hand-strength));
}
/* the floating words stay on top of the enlarged photo */
.floating-element{z-index:4}


/* ============================================================
   squared-paper ground + scattered ornaments
   Colours untouched: the grid is her graphite at very low alpha,
   the ornaments are her teal.
   ============================================================ */

/* the notebook grid, only on the light sections */
html:not([data-paper="off"]) .manifesto-section,
html:not([data-paper="off"]) .expertise-section,
html:not([data-paper="off"]) .testimonials-section,
html:not([data-paper="off"]) .method-section,
html:not([data-paper="off"]) .strategy-notes-section,
html:not([data-paper="off"]) .connect-section{
  background-image:
    /* the heavier line every fifth square */
    linear-gradient(rgba(61,57,59,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,57,59,.055) 1px,transparent 1px),
    /* the fine squares */
    linear-gradient(rgba(61,57,59,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,57,59,.035) 1px,transparent 1px);
  background-size:170px 170px,170px 170px,34px 34px,34px 34px;
  background-position:0 0,0 0,0 0,0 0;
}
/* the paper's own grain — greyscale only, so no colour shifts */
html:not([data-paper="off"]) .manifesto-section::before,
html:not([data-paper="off"]) .expertise-section::before,
html:not([data-paper="off"]) .testimonials-section::before,
html:not([data-paper="off"]) .method-section::before,
html:not([data-paper="off"]) .strategy-notes-section::before,
html:not([data-paper="off"]) .connect-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* the ornaments */
.hand-scatter-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  opacity:var(--hand-strength);transition:opacity .4s ease}
.hand-scatter{position:absolute;display:block;color:var(--ink-bright);will-change:transform}
.hand-scatter svg{display:block;width:100%;height:auto;overflow:visible}
.hand-scatter .hand-ink{stroke:var(--ink-bright);stroke-width:calc(1.7px * var(--hand-weight));opacity:.9}
.hand-scatter .hand-ink.p2{stroke-width:calc(1px * var(--hand-weight));opacity:.45}
.results-section .hand-scatter .hand-ink{stroke:var(--ink-bright)}
@media (max-width:820px){.hand-scatter-layer{display:none}}


/* ============================================================
   masking tape — the same strip on the portrait and the cards
   ============================================================ */
.hand-tape{position:absolute;z-index:5;pointer-events:none;display:block;
  opacity:var(--hand-strength);filter:drop-shadow(0 2px 3px rgba(61,57,59,.22))}
.hand-tape svg{display:block;overflow:visible}
.hand-tape-body{fill:rgba(248,247,240,.82);stroke:rgba(61,57,59,.14);stroke-width:1}
.hand-tape-crease{stroke:rgba(61,57,59,.10);stroke-width:1;fill:none}
/* on the dark hero the tape reads as light paper, on light cards as a matte strip */
.hero-section .hand-tape-body{fill:rgba(248,247,240,.7);stroke:rgba(248,247,240,.35)}
.hero-section .hand-tape-crease{stroke:rgba(61,57,59,.16)}

/* on the portrait: across the top-right corner */
.hand-tape--photo{top:-17px;left:calc(min(100%,450px) - 150px);transform:rotate(-5deg)}

/* on the service cards: a strip laid diagonally across the top-left corner,
   the way you'd tape a photograph onto a page */
.hand-tape--card{transform:rotate(var(--tape-rot,-42deg));
  transform-origin:center;transition:transform .45s cubic-bezier(0.19,1,0.22,1)}
.hand-tape--card .hand-tape-body{fill:rgba(248,247,240,.9)}

/* the cards sit flat and aligned; when you reach for one it lifts and
   pivots a little around the corner where the tape holds it — the way a
   taped sheet actually behaves */
html:not([data-hand="off"]) .expertise-card{
  box-shadow:0 6px 18px rgba(61,57,59,.07);
  transform-origin:top left;
  transition:transform .55s cubic-bezier(0.19,1,0.22,1),box-shadow .55s ease;
}
/* no lift, no tilt: the card stays exactly where it is */
html:not([data-hand="off"]) .expertise-card:hover{transform:none}


/* "Read bio": teal type, an arrow, and a line drawn underneath */
.bio-cta-holder{width:min(100%,450px);display:flex;justify-content:center;margin-top:2.4rem;position:relative;z-index:6}
.bio-cta{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  background:none;border:none;padding:.2rem 0;
  font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-bright);
  transition:color .3s ease;
}
.bio-cta-label{position:relative;display:inline-block}
.bio-cta-arrow{font-size:1rem;letter-spacing:0;transition:transform .3s cubic-bezier(0.19,1,0.22,1)}
.bio-cta:hover{color:#8ff0f3}
.bio-cta:hover .bio-cta-arrow{transform:translateX(6px)}
.bio-cta .hand-underline{top:calc(100% + 3px)}
.bio-cta .hand-underline .hand-ink{stroke:var(--ink-bright)}

/* the floating words in the handwritten face — and a touch more presence,
   so they read against the photograph instead of dissolving into it */
html:not([data-font="off"]) .floating-element{
  font-family:var(--font-hand);
  font-size:calc(1.12rem * var(--hand-font-scale));
  letter-spacing:calc(var(--hand-font-track) + .02em);text-transform:none;font-weight:400;
}
.floating-element{
  background:rgba(92,225,230,.13);
  border:1px solid rgba(92,225,230,.5);
  color:var(--accent);
  padding:.45rem 1.2rem;
  backdrop-filter:blur(3px);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}


/* ============================================================
   the stage toggle: transparent, teal outline, and a glow around it
   ============================================================ */
.hero-toggle-btn{
  border-radius:0;position:relative;overflow:visible;
  text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
  padding:.9rem 1.8rem;
  background:transparent;
  border:1px solid rgba(92,225,230,.45);
  color:rgba(248,247,240,.82);
  box-shadow:0 0 0 rgba(92,225,230,0);
  transition:color .3s ease,border-color .3s ease,background .3s ease,
             box-shadow .35s ease,transform .3s cubic-bezier(0.19,1,0.22,1);
}
.hero-toggle-btn::before{content:none}
.hero-toggle-btn span{position:relative}
.hero-toggle-btn:hover{
  border-color:var(--ink-bright);
  color:var(--ink-bright);
  background:rgba(92,225,230,.07);
  box-shadow:0 0 22px rgba(92,225,230,.5),inset 0 0 14px rgba(92,225,230,.14);
  transform:translateY(-2px);
}
/* the selected one carries the glow permanently, so it reads as chosen
   without ever filling in solid */
.hero-toggle-btn.active{
  background:rgba(92,225,230,.1);
  border-color:var(--ink-bright);
  color:var(--ink-bright);
  box-shadow:0 0 18px rgba(92,225,230,.38),inset 0 0 12px rgba(92,225,230,.12);
}
.hero-toggle-btn.active:hover{
  box-shadow:0 0 26px rgba(92,225,230,.6),inset 0 0 16px rgba(92,225,230,.18);
}

/* the pull quote in the Results section is Flor speaking, so it is written
   in her hand — the client testimonials stay in Montserrat */
/* "Most consultants fix symptoms..." closes the section on a teal band,
   her words in graphite, running the full width of the page */
.showcase-closing{
  background:var(--accent);
  color:var(--gray-900);
  width:100vw;margin-left:calc(50% - 50vw);
  padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1.5rem,5vw,3rem);
  margin-top:clamp(3rem,6vw,5rem);margin-bottom:0;
  text-align:center;
}
html:not([data-font="off"]) .showcase-closing{
  font-family:var(--font-hand);
  font-size:calc(1.35rem * var(--hand-font-scale));
  letter-spacing:var(--hand-font-track);line-height:1.45;
  color:var(--gray-900);
}
html:not([data-font="off"]) .testimonial-section .testimonial{
  font-family:var(--font-hand);
  font-size:calc(1.35rem * var(--hand-font-scale));
  line-height:1.55;letter-spacing:var(--hand-font-track);font-style:normal;
}


/* in the hero the roles are swapped: the two framing lines stay in
   Montserrat, and the checklist itself is written by hand */
html:not([data-font="off"]) .reasons-list li{
  font-family:var(--font-hand);
  font-size:calc(1.06rem * var(--hand-font-scale));
  line-height:1.5;letter-spacing:var(--hand-font-track);
}


/* the line under a section title matches the title's measure on desktop */
@media (min-width:1100px){
  .section-header .section-description,
  .section-header .section-subtitle{max-width:var(--title-w,700px)}
}


/* the hero, tightened: the "Sound familiar?" line is gone, and the line that
   introduces the test sits on the same left edge as the checklist text */
.reasons-intro{display:none}
.cta-description{
  padding-left:1.5rem;              /* the checklist's own text indent */
  font-size:1.08rem;
  line-height:1.65;
  max-width:34rem;
}

/* "Read bio" in the handwritten face */
.bio-cta{
  font-family:var(--font-hand);
  font-size:calc(1.12rem * var(--hand-font-scale));
  font-weight:400;
  letter-spacing:var(--hand-font-track);
  text-transform:none;
}
html[data-font="off"] .bio-cta{
  font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}


/* the four steps of the method, written by hand */
html:not([data-font="off"]) .method-step h3{
  font-family:var(--font-hand);
  font-size:calc(1.5rem * var(--hand-font-scale));
  font-weight:400;
  letter-spacing:calc(var(--hand-font-track) + .02em);
  text-transform:none;
}


/* no arrows inside buttons — the label carries the action on its own */
.primary-cta .cta-arrow,
.submit-btn .btn-arrow{display:none}
.primary-cta{gap:0}


/* the teal line on each service card, in the handwritten face and lifted
   off the background with a soft glow so it stops disappearing */
html:not([data-font="off"]) .card-subtitle{
  font-family:var(--font-hand);
  font-size:calc(1.12rem * var(--hand-font-scale));
  font-style:normal;font-weight:400;
  letter-spacing:var(--hand-font-track);
  line-height:1.4;
  color:var(--ink-bright);
  text-shadow:0 0 14px rgba(92,225,230,.45),0 0 3px rgba(92,225,230,.35);
}
/* on the dark featured card the glow can breathe a little more */
.expertise-card--featured .card-subtitle{
  text-shadow:0 0 18px rgba(92,225,230,.55),0 0 4px rgba(92,225,230,.4);
}
/* and when the card fills dark on hover, the line keeps its glow */
.expertise-card:hover .card-subtitle{
  color:var(--ink-bright);
  text-shadow:0 0 18px rgba(92,225,230,.6),0 0 4px rgba(92,225,230,.45);
}


/* the way into the portfolio, centred under the pair of testimonials */
.portfolio-cta-holder{display:flex;flex-direction:column;align-items:center;gap:.9rem;
  margin-top:clamp(2.5rem,5vw,3.5rem)}
.portfolio-cta{text-decoration:none;animation:none!important;opacity:1!important}
.portfolio-cta-note{font-family:var(--font-hand);font-size:calc(1.05rem * var(--hand-font-scale));
  letter-spacing:var(--hand-font-track);color:var(--gray-500);margin:0;text-align:center}
html[data-font="off"] .portfolio-cta-note{font-family:'Montserrat',sans-serif;font-size:.9rem}


/* all three service cards in graphite, the way the featured one already was —
   her own featured treatment, applied across the row */
.expertise-card{
  background:var(--gray-900);
  border-color:var(--gray-900);
  border-top:3px solid var(--accent);
  box-shadow:0 18px 44px rgba(61,57,59,.22);
}
.expertise-card .card-number{color:var(--accent)}
.expertise-card .card-title{color:var(--white)}
.expertise-card .card-description{color:rgba(255,255,255,.85)}
/* the dark fill that used to slide up has nothing to cover now */
.expertise-card::before{display:none}
/* no inversion: the card stays graphite and the ink does the talking —
   the teal edge lights up, a teal wash breathes in from the bottom, and a
   line draws itself under the title */
.expertise-card{position:relative;overflow:hidden}
.expertise-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to top,rgba(92,225,230,.16),rgba(92,225,230,0) 55%);
  opacity:0;transition:opacity .5s ease;
}
.expertise-card:hover::after{opacity:1}
.expertise-card:hover{
  border-top-width:5px;
  box-shadow:0 26px 50px rgba(61,57,59,.24),0 0 26px rgba(92,225,230,.28);
}
.expertise-card:hover .card-diamond{transform:rotate(45deg) scale(1.3);box-shadow:0 0 18px rgba(92,225,230,.7)}
.expertise-card > *{position:relative;z-index:1}
/* the drawn corner and the tape keep their contrast on graphite */
.expertise-card .hand-corner .hand-ink{stroke:var(--ink-bright)}

/* ============================================================
   the portfolio gate: name and email before the work opens
   ============================================================ */
.pf-gate{position:fixed;inset:0;z-index:9800;display:none}
.pf-gate.open{display:block}
.pf-gate-overlay{position:absolute;inset:0;background:rgba(61,57,59,.78);backdrop-filter:blur(5px)}
.pf-gate-panel{
  position:relative;width:min(520px,92vw);margin:14vh auto 0;
  background:var(--white);border-top:3px solid var(--accent);
  padding:clamp(2rem,4vw,2.8rem);
  box-shadow:0 40px 90px rgba(61,57,59,.35);
  animation:pfIn .5s cubic-bezier(0.19,1,0.22,1);
}
@keyframes pfIn{from{opacity:0;transform:translateY(24px)}}
.pf-gate-close{
  position:absolute;top:.8rem;right:1rem;border:none;background:none;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--gray-400);transition:color .25s ease;
}
.pf-gate-close:hover{color:var(--gray-900)}
.pf-gate-title{
  font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:1.5rem;letter-spacing:-.01em;color:var(--gray-900);margin:0 0 .8rem;
}
.pf-gate-text{font-size:.95rem;line-height:1.6;color:var(--gray-500);margin:0 0 1.6rem}
.pf-gate-form{display:grid;gap:1rem}
.pf-gate-form input{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(61,57,59,.3);
  padding:.8rem .2rem;font-family:'Montserrat',sans-serif;font-size:.9rem;color:var(--gray-900);
  outline:none;transition:border-color .3s ease;
}
.pf-gate-form input::placeholder{color:var(--gray-400);letter-spacing:.12em;font-size:.72rem}
.pf-gate-form input:focus{border-bottom-color:var(--accent)}
.pf-gate-submit{justify-content:center;margin-top:.6rem;animation:none!important;opacity:1!important;cursor:pointer;border:none}
.pf-gate-small{
  font-family:var(--font-hand);font-size:calc(1rem * var(--hand-font-scale));
  letter-spacing:var(--hand-font-track);color:var(--gray-400);margin:.2rem 0 0;text-align:center;
}
html[data-font="off"] .pf-gate-small{font-family:'Montserrat',sans-serif;font-size:.8rem}


/* the line under a card title stays undrawn until the cursor arrives */
.hand-underline--hover .hand-draw{
  stroke-dashoffset:var(--len,300px)!important;
  transition:stroke-dashoffset .6s cubic-bezier(0.19,1,0.22,1)!important;
}
.expertise-card:hover .hand-underline--hover .hand-draw{stroke-dashoffset:0!important}
.hand-underline--hover .hand-ink{stroke:var(--ink-bright)}
.card-title{position:relative}


/* the sliding panel was sitting at z-index:-1, behind the button's own teal,
   so the hover only turned the label white on teal — barely readable.
   Brought forward, it slides across and the label reads on graphite. */
.primary-cta::before{z-index:0}
.primary-cta > *{position:relative;z-index:1}
/* the decorations must stay absolutely placed: both her rule and mine set
   `.expertise-card > *` to position:relative, which knocked the corner
   bracket out of its corner and into the text flow */
.expertise-card > .hand-corner{position:absolute!important}
.portfolio-cta::before,.pf-gate-submit::before{background:var(--gray-900)}
.portfolio-cta:hover,.pf-gate-submit:hover{color:var(--white)}
.portfolio-cta:hover{transform:none}


/* the card never changes colour on hover, and never moves — her own
   featured-card inversion is neutralised here as well */
.expertise-card:hover,
.expertise-card--featured:hover{
  background:var(--gray-900)!important;
  border-color:var(--gray-900)!important;
  border-top-color:var(--accent)!important;
  transform:none!important;
}
.expertise-card:hover .card-number,
.expertise-card--featured:hover .card-number{color:var(--accent)!important}
.expertise-card:hover .card-title,
.expertise-card--featured:hover .card-title{color:var(--white)!important}
.expertise-card:hover .card-description,
.expertise-card--featured:hover .card-description{color:rgba(255,255,255,.85)!important}
.expertise-card:hover .card-subtitle,
.expertise-card--featured:hover .card-subtitle{color:var(--ink-bright)!important}

/* ============================================================
   mobile: the ornaments step back and the props stay in frame
   ============================================================ */
@media (max-width:820px){
  /* the teal block behind the photo must not push the page sideways */
  .portrait-wrapper::before{top:16px;left:-12px;width:min(100%,450px)}
  .portrait-wrapper::after{left:auto;right:10px;width:82px;height:22px}
  .hand-tape--photo{left:auto;right:14px;top:-13px}
  .bio-cta-holder{width:100%;justify-content:center}
  .portrait-frame{margin-left:auto;margin-right:auto}
  .portrait-wrapper::before{left:50%;transform:translateX(calc(-50% - 12px))}
  .hand-tape--photo{left:auto;right:8%}
  /* the drawn corner on a stacked card would sit under the tape */
  .hand-corner--br{bottom:10px;right:10px}
  /* room for the tape that straddles each card's top edge */
  .expertise-grid{row-gap:2.6rem}
  /* the closing band keeps its full-bleed trick inside a narrow screen */
  .showcase-closing{padding-left:1.4rem;padding-right:1.4rem}
  /* the gate panel scrolls rather than running off the screen */
  .pf-gate-panel{margin-top:8vh;max-height:84vh;overflow-y:auto}
}
@media (max-width:560px){
  .cta-description{padding-left:1.2rem}
  .hand-tick{left:-1.25rem;width:14px;height:14px}
  html:not([data-font="off"]) .stat-number{font-size:calc(3.4rem * var(--hand-font-scale) * .82)}
}


/* on a narrow screen the circled word would run into the paragraph below */
@media (max-width:640px){
  .hand-circle{opacity:.85}
}


/* below 1024px her hero-visual becomes a flex row, so the "Read bio" holder
   lined up beside the photograph and squashed it — stack them instead */
@media (max-width:1024px){
  .hero-visual{flex-direction:column;align-items:center}
  .portrait-wrapper{width:min(100%,450px)}
  .bio-cta-holder{width:min(100%,450px);justify-content:center;margin-top:2rem}
}


/* the letter button had the proportions of a tag, not of a button: more body,
   wider tracking, and the same glow the stage toggles use.
   Scoped to the card so it outranks the card-level rules above. */
.testimonial-card .testimonial-letter-btn{
  padding:1rem 2.2rem;
  font-size:.76rem;
  letter-spacing:.16em;
  border:1px solid rgba(92,225,230,.5);
  color:var(--ink-bright);
  background:transparent;
  box-shadow:0 0 0 rgba(92,225,230,0);
  transition:color .3s ease,border-color .3s ease,background .3s ease,
             box-shadow .35s ease,transform .3s cubic-bezier(0.19,1,0.22,1);
}
.testimonial-card .testimonial-letter-btn:hover{
  background:rgba(92,225,230,.08);
  color:var(--ink-bright);
  border-color:var(--ink-bright);
  box-shadow:0 0 22px rgba(92,225,230,.45),inset 0 0 14px rgba(92,225,230,.12);
  transform:translateY(-2px);
}


/* the halftone cut-out, pasted into the empty half of the manifesto —
   the one place on the page with room for it that carries no text */
.manifesto-section .manifesto-container{position:relative}
.cutout-halftone{
  position:absolute;right:3%;top:22%;width:min(430px,31vw);margin:0;
  transform:rotate(-4deg);pointer-events:none;z-index:1;
  filter:drop-shadow(0 12px 26px rgba(61,57,59,.18));
}
.cutout-halftone img{width:100%;height:auto;display:block}
@media (max-width:1100px){
  .cutout-halftone{
    position:static;width:min(76%,390px);margin:2.6rem auto .5rem;
    transform:rotate(-3deg);
  }
}