/*
Theme Name: North Shore Radiology
Theme URI: https://example.com
Author: North Shore Radiology Services
Description: Premium one-page landing theme promoting MRI services for North Shore Radiology Services.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nsrs
*/

:root{
  --ink:#10202F;
  --ink-deep:#0B1722;
  --porcelain:#F6F8F9;
  --mist:#C9D5DD;
  --slate:#5E7C92;
  --brass:#B79154;
  --brass-soft:#CBAF7E;
  --line:rgba(16,32,47,.12);
  --line-light:rgba(246,248,249,.16);
  --display:'Marcellus',serif;
  --body:'Figtree',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--porcelain);line-height:1.6;font-weight:300}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 0.6rem}

.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);font-weight:500}
.eyebrow .tick{color:var(--brass)}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,248,249,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{font-family:var(--display);font-size:1.02rem;letter-spacing:.04em;line-height:1.25; 0.1rem;}
.brand-name small{display:block;font-family:var(--body);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--slate)}
nav.links{display:flex;gap:34px;align-items:center}
nav.links a{text-decoration:none;font-size:.85rem;font-weight:400;color:var(--ink);opacity:.75;transition:opacity .2s}
nav.links a:hover{opacity:1}
.btn{display:inline-block;text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.04em;padding:0.5rem 1rem; text-align: center;border-radius:2px;transition:background .25s,color .25s,border-color .25s}
.btn-dark{background:var(--ink);color:var(--porcelain);border:1px solid var(--ink)}
nav.links .btn-dark {color: var(--porcelain);}
.btn-dark:hover{background:var(--ink-deep)}
.btn-ghost{background:transparent;color:var(--porcelain);border:1px solid var(--line-light)}
.btn-ghost:hover{border-color:var(--brass-soft);color:var(--brass-soft)}
.btn-brass{background:var(--brass);color:var(--ink-deep);border:1px solid var(--brass)}
.btn-brass:hover{background:var(--brass-soft);border-color:var(--brass-soft)}

/* ---------- hero ---------- */
.hero{color:var(--porcelain);position:relative;overflow:hidden; padding-inline: 2rem;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:110px 0 120px}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);margin:22px 0 24px;color:#fff}
.hero h1 em{font-style:normal;color:var(--brass-soft)}
.hero p.lede{font-size:1.08rem;color:var(--mist);max-width:46ch;margin-bottom:40px}
.hero .eyebrow{color:var(--mist)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-foot{display:flex;gap:40px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line-light);flex-wrap:wrap}
.hero-foot div{font-size:.8rem;color:var(--mist);letter-spacing:.02em}
.hero-foot strong{display:block;font-family:var(--display);font-size:1.25rem;font-weight:400;color:#fff;letter-spacing:.02em;margin-bottom:2px}

/*.hero::before { position: absolute; inset: 0; z-index: -2; background-image: url("/wp-content/uploads/2026/06/north-shore-mountains-scaled.jpg" ); filter: blur(3px); content: ""; }*/
.hero::after { position: absolute; inset: 0; z-index: -1; content: ""; background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.8), transparent), url("/wp-content/uploads/2026/06/north-shore-mountains-scaled.jpg" ), linear-gradient(100deg, rgb(150, 200, 255), rgba(250, 220, 200, .1)); background-blend-mode: soft-light, multiply, normal; filter: blur(5px); scale: 105%;}



/* signature: the bore */
.bore{position:relative;aspect-ratio:1/1;max-width:460px;margin-left:auto}
.bore svg{width:100%;height:100%;display:block}
.bore .sweep{transform-origin:50% 50%;animation:sweep 26s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.bore-caption{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .bore .sweep{animation:none}
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

@media (max-width: 1000px) {
	.bore { display: none; }
}

/* ---------- sections ---------- */
.page-section{padding:104px 0}
.sec-head{max-width:640px;margin-bottom:64px}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-top:18px}
.sec-head p{margin-top:16px;color:var(--slate);font-size:1.02rem}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:var(--porcelain);padding:38px 32px;transition:background .25s}
.svc:hover{background:#fff}
.svc h3{font-size:1.22rem;margin-bottom:10px}
.svc p{font-size:.9rem;color:var(--slate)}
.svc .glyph{width:30px;height:30px;margin-bottom:22px;color:var(--brass)}

/* process */
.process{background:var(--ink);color:var(--porcelain)}
.process .sec-head h2{color:#fff}
.process .sec-head p{color:var(--mist)}
.process .eyebrow{color:var(--mist)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line-light)}
.step::before{content:attr(data-n);position:absolute;top:-14px;left:0;font-family:var(--display);font-size:1.05rem;color:var(--brass-soft);background:var(--ink);padding-right:14px}
.step h3{font-size:1.2rem;color:#fff;margin-bottom:12px}
.step p{font-size:.92rem;color:var(--mist)}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 80px}
.why h3{font-size:1.25rem;margin-bottom:12px;display:flex;align-items:baseline;gap:14px}
.why h3::before{content:"";width:22px;height:1px;background:var(--brass);flex:none;transform:translateY(-4px)}
.why p{font-size:.95rem;color:var(--slate);padding-left:36px}

/* cta band */
.cta-band{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-deep) 100%);color:var(--porcelain);text-align:center}
.cta-band h2{font-size:clamp(2rem,4vw,2.9rem);color:#fff;max-width:18ch;margin:18px auto 20px}
.cta-band p{color:var(--mist);max-width:52ch;margin:0 auto 40px}
.cta-band .eyebrow{color:var(--mist)}

/* footer */
.site-footer{background:var(--ink-deep);color:var(--mist);padding:64px 0 40px;font-size:.85rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--line-light)}
.site-footer h4{font-family:var(--display);font-weight:400;color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:.04em}
.site-footer a{text-decoration:none;opacity:.8}
.site-footer a:hover{opacity:1;color:var(--brass-soft)}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.foot-base{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-size:.74rem;opacity:.6;flex-wrap:wrap}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* WordPress admin bar offset */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;padding:80px 0 90px}
  .bore{max-width:340px;margin:0 auto}
  .svc-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:48px}
  .why-grid{grid-template-columns:1fr;gap:48px}
  .foot-grid{grid-template-columns:1fr 1fr}
  nav.links a:not(.btn){display:none}
}
@media (max-width:600px){
  .page-section{padding:76px 0}
  .svc-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-foot{gap:24px}
}