/* ==========================================================================
   EricLander.com - /topsail-area/ page styles
   --------------------------------------------------------------------------
   Page-local only. Tokens and shared components (.wrap, .mid, .phead,
   .sec-head, .label, .btn, .svc/.stile, .quote, .faq, .closing, .signal)
   come from design-system.css. Form field classes (.cform, .field, .flabel,
   .selfset, .selfopt, .hint, .ferror, .formerr, .formnote, .hp-field) come
   from contact.css, which functions.php enqueues for this page too.

   Built to docs/mockups/topsail-area-v5.html. Styles for the sections v5
   removed (.meet, .photoslot, .stats, .deepdata, .tblwrap, .chartslot) were
   deleted with them; do not reintroduce without a mockup that uses them.

   Note: services.css is NOT enqueued here, so .buyrow / .talk (rendered by
   ericlander_core_buy_row) need their own rules in this file.
   ========================================================================== */

.topsail-main section.block{padding:60px 0}
.topsail-main section.block.fill{background:var(--fill)}
.topsail-main .sec-head .label{display:block;margin-bottom:14px}
.topsail-main .subhead{font-size:clamp(22px,2.6vw,28px);margin:44px 0 18px}
.topsail-main .fine{font-size:13.5px;color:var(--muted)}
.topsail-main .fine.spaced{margin-top:18px}
.topsail-main .fine.herofine{margin-top:14px}
.topsail-main .afterlist{margin-top:22px;font-size:16px;color:var(--body);max-width:70ch}
.topsail-main .askback{margin-top:14px;font-size:17px;font-weight:700;color:var(--ink)}
.topsail-main p.wide{font-size:16.5px;color:var(--body);max-width:72ch;margin-top:16px}

/* Green accent phrase inside a section heading. The v6 mockup writes this as
   an inline style on each h2; one rule is the same result without repeating a
   color in the markup. design-system.css already defines .phead h1 .g and
   .signal h2 .g, neither of which covers a section h2 here. */
.topsail-main h2 .g{color:var(--green)}

/* Inline link inside body copy, matching the green used across the page. */
.topsail-main .ilink{color:var(--green);font-weight:600}
.topsail-main .ilink:hover,
.topsail-main .ilink:focus{color:var(--green2)}

/* Hero CTA row inherits .hero-cta spacing but needs a top margin here. */
.topsail-main .phead .hero-cta{margin-top:28px}

/* Quiet companion link beside a button, and on its own in the note card. */
.topsail-main .talklink{font-size:14px;color:var(--muted);font-weight:600}
.topsail-main .talklink:hover,
.topsail-main .talklink:focus{color:var(--ink)}

/* --------------------------------------------------------------------------
   Checklist, reused from the services pattern
   -------------------------------------------------------------------------- */
.topsail-main .chk{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.topsail-main .chk li{position:relative;padding-left:30px;font-size:15.5px;color:var(--ink);line-height:1.55;list-style:none}
.topsail-main .chk li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:4px;background:var(--green)}
.topsail-main .chk li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.topsail-main .chk li strong{font-weight:700;color:var(--ink);display:block;margin-bottom:3px}
.topsail-main .chk.two-up{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* --------------------------------------------------------------------------
   Conversation steps + supporting quote
   -------------------------------------------------------------------------- */
.topsail-main .convo{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
.topsail-main .steps-lg{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.topsail-main .steps-lg li{counter-increment:s;position:relative;padding-left:52px;font-size:15.5px;color:var(--body);line-height:1.55;list-style:none}
.topsail-main .steps-lg li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.topsail-main .steps-lg li strong{display:block;color:var(--ink);font-weight:700;margin-bottom:4px;font-size:16.5px}

/* Quote sits a little lower than the list it supports. */
.topsail-main .convo .quote{margin-top:6px}
.topsail-main .quote .who strong{display:block}

/* v5: the What-you-gain quote is sized to its own content, not stretched to
   match the checklist beside it. */
.topsail-main .quote.fitted{align-self:start}

/* --------------------------------------------------------------------------
   Services tiles: four across on desktop, not the shared three
   -------------------------------------------------------------------------- */
.topsail-main .svc{grid-template-columns:repeat(4,1fr)}

/* --------------------------------------------------------------------------
   What you gain: checklist beside a quote
   -------------------------------------------------------------------------- */
.topsail-main .expect{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}

/* --------------------------------------------------------------------------
   Did you know cards
   -------------------------------------------------------------------------- */
.topsail-main .dyk{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.topsail-main .dykcard{background:#fff;border:1px solid var(--line2);border-top:3px solid var(--green);border-radius:8px;padding:30px}
.topsail-main .dykcard .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.topsail-main .dykcard .n{font-size:clamp(34px,4.2vw,46px);font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1}
.topsail-main .dykcard .sl{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:12px 0}
.topsail-main .dykcard p{font-size:15px;color:var(--body);line-height:1.55}
.topsail-main .dykcard p strong,
.topsail-main .jancall p strong{color:var(--ink);font-weight:700}

/* --------------------------------------------------------------------------
   Local case cards: a stat beside a short written example
   -------------------------------------------------------------------------- */
.topsail-main .case{background:#fff;border:1px solid var(--line2);border-top:3px solid var(--blue);border-radius:8px;padding:32px;display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-top:18px}
.topsail-main .case .casestat{flex:none;text-align:center;min-width:160px}
.topsail-main .case .casestat .n{font-size:clamp(40px,5vw,56px);font-weight:800;color:var(--blue);letter-spacing:-0.04em;line-height:1}
.topsail-main .case .casestat .sl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.topsail-main .case .casetext{flex:1;min-width:300px}
.topsail-main .case .casetext .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.topsail-main .case .casetext h3{font-size:21px;margin-bottom:10px}
.topsail-main .case .casetext p{font-size:15px;color:var(--body);line-height:1.55}
.topsail-main .case .casetext p strong{color:var(--ink)}

/* The shared "neither restaurant is a client" disclosure under both cases. */
.topsail-main .fine.casenote{margin-top:12px}

/* --------------------------------------------------------------------------
   January seasonality band
   -------------------------------------------------------------------------- */
.topsail-main .jancall{background:var(--tint);border:1px solid #CFE3D8;border-radius:8px;padding:32px;display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-top:18px}
.topsail-main .jancall .big{font-size:clamp(48px,6.5vw,72px);font-weight:800;color:var(--green2);letter-spacing:-0.04em;line-height:1;flex:none}
.topsail-main .jancall .big small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.topsail-main .jancall .say{flex:1;min-width:280px}
.topsail-main .jancall .say h3{font-size:21px;margin-bottom:8px}
.topsail-main .jancall .say p{font-size:15.5px;color:var(--body);max-width:62ch}
.topsail-main .src{font-size:12px;color:var(--muted);margin-top:16px}

/* --------------------------------------------------------------------------
   Start small: starter card + session/note stack
   -------------------------------------------------------------------------- */
.topsail-main .offer{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:stretch}
.topsail-main .ocard{background:#fff;border:1px solid var(--line2);border-radius:8px;padding:32px;display:flex;flex-direction:column}
.topsail-main .ocard.main{border-top:4px solid var(--green)}
.topsail-main .ocard .step{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.topsail-main .ocard h3{font-size:24px;margin-bottom:6px}
.topsail-main .ocard .price{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-top:8px}
.topsail-main .ocard .pn{font-size:13px;color:var(--muted);margin-bottom:14px}
.topsail-main .ocard .who{font-size:15px;color:var(--body);margin-bottom:16px;max-width:52ch}
.topsail-main .ocard .chk{gap:11px;margin:6px 0 20px}
.topsail-main .ocard .chk li{font-size:14.5px}
.topsail-main .ocard.session{background:var(--fill)}
.topsail-main .ocard.session h3{font-size:20px}
.topsail-main .ocard.session p{font-size:14.5px;color:var(--body);margin-bottom:14px}
.topsail-main .ostack{display:flex;flex-direction:column;gap:18px}
.topsail-main .ostack .ocard{flex:1}
.topsail-main .ocard.note{background:var(--tint);border-color:#CFE3D8;padding:24px}
.topsail-main .ocard.note h3{font-size:17px;margin-bottom:6px}
.topsail-main .ocard.note p{font-size:14px;color:var(--body);margin-bottom:12px}
.topsail-main .ocard.note .talklink{color:var(--green2)}
.topsail-main .ocard.note .talklink:hover,
.topsail-main .ocard.note .talklink:focus{color:var(--ink)}
.topsail-main .offernote{font-size:14px;color:var(--muted);margin-top:16px}
.topsail-main .offernote a{color:var(--green);font-weight:600}
.topsail-main .offernote a:hover,
.topsail-main .offernote a:focus{color:var(--green2)}

/* Buy rows come from ericlander_core_buy_row(). services.css owns these on
   /services/, but it is not enqueued here, so they are restated for this page.
   The companion link is class `talk` (the helper's markup), styled to match
   the page's own .talklink. */
.topsail-main .buyrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto}
.topsail-main .buyrow .talk{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.topsail-main .buyrow .talk:hover,
.topsail-main .buyrow .talk:focus{color:var(--ink)}

/* --------------------------------------------------------------------------
   Slim bio band
   -------------------------------------------------------------------------- */
.topsail-main .bio{border-top:1px solid var(--line);padding:44px 0}
.topsail-main .bio .inner{display:flex;gap:24px;align-items:center;max-width:var(--mid);margin:0 auto;padding:0 28px}
.topsail-main .bio img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--tint)}
.topsail-main .bio p{font-size:15px;color:var(--body);max-width:72ch}
.topsail-main .bio a{color:var(--green);font-weight:600}
.topsail-main .bio a:hover,
.topsail-main .bio a:focus{color:var(--green2)}
.topsail-main .bio .bn{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}

/* --------------------------------------------------------------------------
   Form block
   -------------------------------------------------------------------------- */
.topsail-main .formblock .cform{max-width:640px}
.topsail-main .formblock .opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.topsail-main .formblock .sendbtn{padding:14px 26px}
.topsail-main .formblock select{width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:4px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.4;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7A86' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.topsail-main .formblock select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
	.topsail-main .svc{grid-template-columns:repeat(2,1fr)}
	.topsail-main .convo,
	.topsail-main .expect,
	.topsail-main .dyk,
	.topsail-main .offer{grid-template-columns:1fr;gap:28px}
	.topsail-main .chk.two-up{grid-template-columns:1fr;gap:16px}
}

@media (max-width:640px){
	.topsail-main section.block{padding:48px 0}
	.topsail-main .svc{grid-template-columns:1fr}
	.topsail-main .steps-lg li{padding-left:46px}
	.topsail-main .steps-lg li::before{width:30px;height:30px;font-size:14px}
	.topsail-main .phead .hero-cta{flex-direction:column;align-items:flex-start;gap:14px}
	.topsail-main .dykcard,
	.topsail-main .ocard{padding:24px}
	.topsail-main .jancall{padding:24px;gap:20px}
	.topsail-main .case{padding:24px;gap:20px}
	.topsail-main .case .casestat{min-width:0;text-align:left}
	.topsail-main .bio .inner{flex-direction:column;text-align:center}
}