:root{font-family:Arial,Helvetica,sans-serif;color:#253343;background:#e7ebef}*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.55}.site{max-width:1000px;margin:24px auto;background:white;border:1px solid #9caab7;box-shadow:0 2px 9px #0002}.masthead{background:linear-gradient(#245b8e,#103b68);color:white;padding:22px 26px;display:flex;justify-content:space-between;gap:15px;align-items:center}.brand{font-family:Georgia,serif;font-size:35px;font-weight:bold;letter-spacing:-1px;line-height:1.1}.tagline{font-size:13px;color:#e1edf8;margin-top:4px}.phone{text-align:right;font-size:21px;font-weight:bold}.phone a{color:white;text-decoration:none}.phone small{display:block;font-size:12px;font-weight:normal;color:#dbe8f6}.nav{display:flex;flex-wrap:wrap;background:linear-gradient(#f8fafc,#c7d5e3);border-bottom:1px solid #9baebf}.nav a{padding:11px 20px;color:#153e69;font-weight:bold;font-size:13px;text-decoration:none;border-right:1px solid #b8c6d4}.nav a:hover,.nav a.active{background:linear-gradient(#3478ae,#174c7c);color:white}.content{padding:24px 27px 30px}h1{font-family:Georgia,serif;font-size:27px;line-height:1.25;color:#173e67;margin:0 0 12px}h2{font-size:18px;color:#173e67;border-bottom:1px solid #cbd7e2;padding-bottom:5px;margin:26px 0 10px}h3{font-size:15px;color:#173e67;margin:16px 0 4px}p{margin:8px 0 13px}a{color:#07559c}a:hover{text-decoration:none}.intro{font-size:16px;max-width:780px}.callout{background:#eef4fa;border:1px solid #c6d7e6;padding:14px 17px;margin:18px 0}.callout strong{color:#163d68}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.service{padding:10px 0;border-bottom:1px solid #e3e8ed}.service h3{margin:0 0 4px}.service p{margin:0}.muted{color:#596775}.small{font-size:13px}.footer{background:#164675;color:#e7eff7;padding:13px 26px;display:flex;justify-content:space-between;gap:10px;font-size:12px}.footer a{color:white}.notice{border-left:4px solid #9ab4cb;padding:7px 12px;background:#f4f7fa}.contactline{font-size:20px;font-weight:bold}.contactline a{text-decoration:none}.buttonlink{display:inline-block;background:linear-gradient(#2779b7,#135186);color:white;text-decoration:none;font-weight:bold;padding:10px 16px;border:1px solid #0d416e;border-radius:3px}.buttonlink:hover{background:#164675}.price-table{width:100%;border-collapse:collapse}.price-table td,.price-table th{padding:11px;text-align:left;border:1px solid #d1dce6}.price-table th{background:#e9f0f6;color:#173e67}ul{padding-left:22px}li{margin:5px 0}:focus-visible{outline:3px solid #e2a52d;outline-offset:2px}@media(max-width:650px){.site{margin:0;border:0;box-shadow:none}.masthead{padding:17px;align-items:flex-start;flex-direction:column}.brand{font-size:30px}.phone{text-align:left;font-size:20px}.nav a{padding:10px 13px}.content{padding:20px 17px}.cols{grid-template-columns:1fr}.footer{padding:14px 17px;flex-direction:column}h1{font-size:24px}}@media print{body{background:white}.site{margin:0;box-shadow:none}.nav{display:none}}

/* About page: restrained long-form typography and paragraph rhythm */
.about-story {max-width:1000px;}
.about-story .story-section {max-width:780px; margin:0 0 27px;}
.about-story .story-section p {margin:0 0 15px; line-height:1.75;}
.about-story .story-section p:last-child {margin-bottom:0;}
.about-story h1 {margin-bottom:23px;}
@media(max-width:650px){.about-story .story-section{margin-bottom:23px}.about-story .story-section p{line-height:1.7}}
/* Traditional first-line paragraph indentation on the About page only */
.about-story .story-section p {text-indent:1.5em;}

/* Rates page readability */
.rates-content p { line-height: 1.65; max-width: 74ch; margin-bottom: 1.3em; }
.rates-content h2 { margin-top: 1.6em; }

/* Services page reading rhythm */
.services-content section{max-width:790px}.services-content p{max-width:790px;line-height:1.65}.services-content section h2{margin-top:29px}.services-content li{line-height:1.55}

/* Compact, understated service symbols; no image downloads or icon fonts needed. */
.service{display:flex;align-items:center;gap:11px;min-height:53px}
.service-icon{width:27px;height:27px;flex:0 0 27px;color:#38658d}
.service h3{line-height:1.35}

/* Larger, easier-to-read typography and touch targets */
body{font-size:18px;line-height:1.6}
.site{max-width:1080px}
.masthead{padding:25px 30px}
.brand{font-size:39px}
.tagline{font-size:16px}
.phone{font-size:28px}
.phone small{font-size:15px}
.nav a{font-size:19px;padding:15px 23px;min-height:52px}
.content{padding:30px 32px 36px}
h1{font-size:31px}
h2{font-size:24px}
h3{font-size:19px}
.intro{font-size:19px}
.small{font-size:16px}
.contactline{font-size:25px}
.buttonlink{font-size:18px;padding:13px 20px}
.service{gap:13px;min-height:66px}
.service-icon{width:29px;height:29px;flex-basis:29px}
.service h3{font-size:18px}
.footer{font-size:15px;padding:17px 30px}
@media(max-width:650px){.masthead{padding:20px}.brand{font-size:34px}.phone{font-size:26px}.nav a{font-size:18px;padding:13px 16px;min-height:50px}.content{padding:23px 19px}h1{font-size:28px}.cols{grid-template-columns:1fr}.footer{padding:18px 19px}.service{min-height:58px}}

/* Invitation below homepage service categories */
.more-services-note { text-align: center; margin: 16px auto 28px; max-width: 690px; }

/* Gallery and scheduling information */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:20px}
.gallery-grid figure{margin:0;border:1px solid #cbd7e2;background:#f5f8fb;padding:10px}
.gallery-grid img{width:100%;height:auto;display:block}
.gallery-grid figcaption{font-size:16px;padding:9px 2px 2px}
.gallery-empty{border:1px dashed #9eafbe;background:#f5f8fb;color:#3d5368;padding:42px 20px;text-align:center;grid-column:1/-1}
.availability-panel{background:#eef4fa;border:1px solid #c6d7e6;padding:17px 20px;margin:20px 0}
.availability-panel h2{margin-top:0}

/* Two related gallery images share one gallery card. */
.gallery-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gallery-photo-pair a { min-width: 0; display: block; }
.gallery-photo-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Four photos grouped into one gallery card. */
.gallery-photo-four {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.gallery-photo-four a {display:block;min-width:0;aspect-ratio:1/1;overflow:hidden;}
.gallery-photo-four img {width:100%;height:100%;object-fit:cover;display:block;}

.gallery-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gallery-pair img{width:100%;height:180px;object-fit:cover;display:block}@media(max-width:520px){.gallery-pair img{height:130px}}

/* Elegant script accent in the masthead brand. Uses local system fonts; no external dependencies. */
.brand-script{display:inline-block;margin-left:8px;font-family:"URW Chancery L","Apple Chancery","Brush Script MT","Segoe Script","Lucida Handwriting",cursive;font-size:.76em;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;color:#f2f6ff;white-space:nowrap;vertical-align:baseline;}
@media(max-width:420px){.brand-script{margin-left:4px;font-size:.7em;}}

/* Raise Solutions slightly relative to Headrick PC */
.brand-script{position:relative;top:-5px;}

/* Site-wide availability banner above the footer */
.global-availability{padding:11px 20px;text-align:center;background:#edf3f8;color:#254768;border-top:1px solid #cad7e3;border-bottom:1px solid #cad7e3;font-size:16px;font-weight:700;letter-spacing:.02em}

/* Three featured homepage photographs */
.home-work { margin-top: 2rem; }
.home-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.home-work-grid figure { margin: 0; min-width: 0; }
.home-work-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border: 1px solid #c5ced7; background: #f4f6f8; }
.home-work-grid figcaption { text-align: center; padding: 9px 4px; font-weight: 600; }
.home-work-link { margin-top: 12px; }
@media(max-width: 600px) { .home-work-grid { grid-template-columns: 1fr; max-width: 440px; margin: auto; } }

/* Prominent And More invitation */
.more-services-note {font-size:1.5rem;font-weight:700;line-height:1.35;}

/* Spacing and consistent brand color for the closing services note */
.more-services-note { margin-top: 34px; color: #244e73; }

/* Give the homepage contact button breathing room below the heading. */
.callout .buttonlink { margin-top: 14px; }

/* Actual separation between callout heading and contact button. */
.callout strong { display: block; margin-bottom: 18px; }
.callout .buttonlink { margin-top: 0; }

/* Mobile-only refinements: one swipeable navigation row and stronger script lettering. */
@media (max-width:650px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .brand-script {
    -webkit-text-stroke: 0.55px currentColor;
    text-shadow: 0 0 0.35px currentColor;
  }
}

/* Mobile: all six links visible without scrolling; preserve flowing script. */
@media (max-width:650px) {
  .nav { flex-wrap: nowrap; overflow-x: visible; }
  .nav a { flex: 1 1 0; min-width: 0; padding: 12px 2px; font-size: clamp(10px, 2.85vw, 15px); text-align: center; white-space: nowrap; }
  .brand-script { -webkit-text-stroke: 0; text-shadow: none; font-size: .78em; letter-spacing: .025em; margin-left: 6px; }
}
@media (max-width:380px) {
  .nav a { font-size: clamp(9px, 2.75vw, 12px); padding-left: 1px; padding-right: 1px; }
  .brand-script { font-size: .73em; margin-left: 3px; }
}

/* Mobile navigation: equal vertical spacing, shorter buttons, all six visible. */
@media (max-width:650px) {
  .nav { align-items: stretch; }
  .nav a { display:flex; align-items:center; justify-content:center; height:42px; min-height:0; padding:0 2px; line-height:1.15; }
  /* Vector lettering uses fixed outlines instead of iOS font substitution. */
  .brand-script { display:none; }
  .brand-script-svg { display:inline-block; width:5.1em; height:1.03em; vertical-align:baseline; margin-left:5px; position:relative; top:-3px; }
}
@media (min-width:651px) { .brand-script-svg {display:none;} }
@media (max-width:380px) { .nav a { height:40px; padding:0 1px; } .brand-script-svg { width:4.9em; margin-left:2px; } }

/* Mobile only: center the phone directly beneath the complete wordmark. */
@media (max-width:650px) {
  .masthead { align-items: center; }
  .masthead > div:first-child { width: 100%; text-align: center; }
  .phone { width: 100%; text-align: center; }
}

/* Mobile only: slightly larger navigation labels, unchanged button dimensions. */
@media (max-width:650px) {
  .nav a { font-size: clamp(10px, 3.1vw, 16px); }
}
@media (max-width:380px) {
  .nav a { font-size: clamp(9px, 2.95vw, 13px); }
}

/* Compact contact details; preserve all other pages and desktop styles. */
.contact-details .contactline { margin: 7px 0; }
@media (max-width:650px) {
  .contact-content { padding-top: 14px; padding-bottom: 18px; }
  .contact-content h1 { margin-top: 0; margin-bottom: 10px; }
  .contact-content > p { margin-top: 0; margin-bottom: 12px; line-height: 1.4; }
  .contact-details .contactline { margin: 4px 0; line-height: 1.25; }
}

/* Desktop header logo: keep the existing mobile header completely unchanged. */
.masthead-brand-group { display:flex; align-items:center; gap:18px; min-width:0; }
.desktop-header-logo { display:block; width:125px; height:auto; max-height:116px; object-fit:contain; flex:0 0 125px; }
@media (max-width:650px) {
  .desktop-header-logo { display:none; }
  .masthead-brand-group { display:block; width:100%; text-align:center; }
}

/* Enlarge desktop logo without increasing masthead layout height. */
@media (min-width:651px) {
  .desktop-header-logo { width:170px; height:auto; max-height:none; flex:0 0 170px; margin-top:-12px; margin-bottom:-12px; }
}

/* Desktop: visually enlarge logo without allowing its size to determine header height. */
@media (min-width:651px) {
  .masthead { overflow: visible; }
  .desktop-header-logo {
    width:125px; flex:0 0 125px; height:auto; max-height:116px;
    margin:0; transform:scale(1.36); transform-origin:center center;
    position:relative; z-index:1;
  }
  .masthead-brand-group { gap:31px; }
}

/* Desktop only: modestly enlarge the wordmark and telephone number.
   Preserve the compact logo-hugging header and all mobile styles. */
@media (min-width:651px) {
  .masthead .brand { font-size:42px; }
  .masthead .phone { font-size:31px; }
}

/* Gentle clouded sky in the outer desktop margins only.
   Main content remains opaque white; mobile keeps its existing appearance. */
@media screen and (min-width:651px) {
  :root { background:linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30)), url("images/photographic-sky.jpg") center center / cover fixed no-repeat; }
  body { background:transparent; }
}

/* Desktop header arrangement: logo at left, brand and phone centered as a stack.
   All other site styling, content and mobile layout are preserved. */
@media screen and (min-width:651px) {
  .masthead { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
  .masthead-brand-group { display:contents; }
  .masthead-brand-group > div { width:100%; text-align:center; padding-left:165px; }
  .masthead .desktop-header-logo { position:absolute; left:30px; top:50%; margin:0; transform:translateY(-50%) scale(1.36); transform-origin:center; }
  .masthead .phone { width:100%; text-align:center; padding-left:165px; }
}

/* Desktop: three-line centered identity in the space beside the CRT logo.
   The mobile header and all other site sections are unaffected. */
@media screen and (min-width:651px) {
  .masthead {
    padding-left:205px;
    padding-right:30px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .masthead-brand-group { display:contents; }
  .masthead-brand-group > div {
    width:100%;
    padding-left:0;
    text-align:center;
  }
  .masthead .brand { font-size:42px; line-height:1.05; }
  .masthead .brand-script {
    display:block;
    position:static;
    top:auto;
    margin:2px auto 0;
    line-height:1.1;
  }
  .masthead .phone {
    width:100%;
    padding-left:0;
    text-align:center;
    font-size:31px;
    line-height:1.2;
  }
}

/* Desktop header correction: fixed compact height, true center across the entire
   masthead (not just the space to the right of the logo). Mobile is untouched. */
@media screen and (min-width:651px) {
  .masthead {
    height:170px;
    min-height:0;
    padding:10px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:0;
    position:relative;
  }
  .masthead-brand-group { display:block; width:auto; min-width:0; margin:0; }
  .masthead-brand-group > div { width:auto; padding:0; text-align:center; }
  .masthead .desktop-header-logo {
    position:absolute;
    left:32px;
    top:50%;
    width:125px;
    height:auto;
    max-height:116px;
    margin:0;
    transform:translateY(-50%) scale(1.36);
    transform-origin:center;
  }
  .masthead .brand { font-size:42px; line-height:1; white-space:nowrap; }
  .masthead .brand-script {
    display:block;
    position:static;
    margin:0 auto;
    line-height:1.05;
    top:auto;
  }
  .masthead .phone {
    width:auto;
    padding:0;
    margin:2px 0 0;
    font-size:31px;
    line-height:1.15;
    text-align:center;
  }
}


/* Desktop: fill the EXISTING 170px masthead with the logo and three-line identity.
   All dimensions and positioning here are desktop-only; mobile is untouched. */
@media screen and (min-width:651px) {
  .masthead { height:170px; min-height:0; padding:5px 22px; gap:0; overflow:hidden; }
  .masthead .desktop-header-logo {
    left:42px; top:50%; width:125px; max-height:116px;
    transform:translateY(-50%) scale(1.60);
  }
  .masthead .brand { font-size:49px; line-height:1.02; }
  .masthead .brand-script {
    display:block; margin:1px auto 1px; font-size:.79em;
    line-height:1.05; position:static; top:auto;
  }
  .masthead .phone { font-size:37px; line-height:1.08; margin:3px 0 0; }
}

/* Mobile masthead: show CRT logo at left, keep name and phone centered
   in remaining space without increasing the header height. */
@media screen and (max-width:650px) {
  .masthead {
    position:relative;
    min-height:112px;
    padding:14px 10px 14px 94px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
  }
  .masthead-brand-group { display:block; width:100%; text-align:center; }
  .masthead-brand-group > div { width:100%; text-align:center; }
  .masthead .desktop-header-logo {
    display:block;
    position:absolute;
    left:10px;
    top:50%;
    width:78px;
    height:auto;
    max-height:100px;
    object-fit:contain;
    transform:translateY(-50%);
    margin:0;
  }
  .masthead .brand { font-size:clamp(19px,5.7vw,27px); line-height:1.15; white-space:nowrap; }
  .masthead .brand-script-svg { width:4.2em; height:1.03em; margin-left:2px; top:-2px; }
  .masthead .phone { width:100%; font-size:clamp(19px,5.5vw,25px); line-height:1.15; margin:0; text-align:center; }
}
@media screen and (max-width:360px) {
  .masthead { padding-left:85px; }
  .masthead .desktop-header-logo { left:7px; width:72px; }
  .masthead .brand { font-size:19px; }
  .masthead .brand-script-svg { width:4em; }
}

/* Mobile: fill the existing masthead vertically with the full CRT illustration.
   Height-based sizing preserves the image aspect ratio and prevents clipping. */
@media screen and (max-width:650px) {
  .masthead { padding-left:112px; overflow:visible; }
  .masthead .desktop-header-logo {
    left:6px; top:50%; width:auto; height:calc(100% - 12px);
    max-width:none; max-height:none; object-fit:contain;
    transform:translateY(-50%);
  }
}
@media screen and (max-width:360px) {
  .masthead { padding-left:106px; }
  .masthead .desktop-header-logo { left:4px; }
}

/* Mobile refinement: use the existing masthead height efficiently.
   Stack the name, script wordmark and phone; maximize the complete CRT art. */
@media screen and (max-width:650px) {
  .masthead {
    height:112px; min-height:112px; padding:3px 8px 3px 112px;
    gap:0; justify-content:center; overflow:visible;
  }
  .masthead .desktop-header-logo {
    left:3px; top:50%; width:auto; height:calc(100% - 4px);
    max-width:none; max-height:none; object-fit:contain;
    transform:translateY(-50%);
  }
  .masthead-brand-group { width:100%; }
  .masthead .brand {
    font-size:clamp(20px, 5.9vw, 29px);
    line-height:1.03; white-space:nowrap;
  }
  .masthead .brand-script-svg {
    display:block; width:5.1em; height:1.12em;
    margin:1px auto 2px; position:static; top:auto;
  }
  .masthead .phone {
    font-size:clamp(19px, 5.7vw, 27px);
    line-height:1.12; margin:0; width:100%; text-align:center;
    white-space:nowrap;
  }
}
@media screen and (max-width:360px) {
  .masthead { padding-left:104px; padding-right:5px; }
  .masthead .brand { font-size:clamp(18px, 5.8vw, 21px); }
  .masthead .phone { font-size:clamp(17px, 5.5vw, 20px); }
}

/* Center the mobile three-line identity on the FULL header width,
   independently of the absolutely positioned CRT logo. */
@media screen and (max-width:650px) {
  .masthead { padding-left:8px; padding-right:8px; }
  .masthead-brand-group { width:100%; text-align:center; }
  .masthead-brand-group > div { width:100%; text-align:center; }
  .masthead .phone { width:100%; text-align:center; }
}
@media screen and (max-width:360px) {
  .masthead { padding-left:5px; padding-right:5px; }
}

/* Move mobile CRT 3px left for phone-number clearance, without resizing or clipping. */
@media screen and (max-width:650px) {
  .masthead .desktop-header-logo { left:0; }
}

/* Shift mobile CRT another 3px left, preserving its size and masthead height. */
@media screen and (max-width:650px) {
  .masthead .desktop-header-logo { left:-3px; }
}

/* Slightly enlarge only the mobile Solutions wordmark. */
@media screen and (max-width:650px) {
  .masthead .brand-script-svg { width:5.45em; height:1.12em; }
}

/* Nudge the mobile phone-number line 3px right without affecting other header elements. */
@media screen and (max-width:650px) {
  .masthead .phone { transform:translateX(3px); }
}

/* Desktop: use more of the existing 170px masthead for the three-line word stack.
   Do not alter masthead height, CRT logo, or mobile layout. */
@media screen and (min-width:651px) {
  .masthead .brand { font-size:54px; line-height:1.02; }
  .masthead .brand-script { font-size:.85em; line-height:1.02; margin:1px auto 2px; }
  .masthead .phone { font-size:41px; line-height:1.08; margin:2px 0 0; }
}

/* Homepage introduction with contact action beside it, without the callout. */
.home-intro-row{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.home-intro-row .intro{flex:1 1 auto;min-width:0;margin:0}
.home-intro-contact{flex:0 0 auto;white-space:nowrap;text-align:center}
@media(max-width:650px){.home-intro-row{gap:14px;flex-wrap:wrap}.home-intro-contact{margin-left:auto}}

/* Mobile: center the CRT and three-line word stack together as one group. */
@media screen and (max-width:650px) {
  .masthead {
    display:grid;
    grid-template-columns:132px minmax(0, 1fr);
    grid-template-rows:auto auto;
    align-content:center;
    align-items:center;
    column-gap:3px; row-gap:0;
    width:100%; height:112px; min-height:112px;
    padding:2px max(3px, calc((100% - 390px)/2));
    box-sizing:border-box;
  }
  .masthead-brand-group { display:contents; }
  .masthead .desktop-header-logo {
    display:block; position:static; grid-column:1; grid-row:1 / 3;
    height:108px; width:auto; max-width:100%; max-height:108px;
    object-fit:contain; transform:none; margin:0; justify-self:center;
  }
  .masthead-brand-group > div { grid-column:2; grid-row:1; width:100%; text-align:center; align-self:end; }
  .masthead .phone { grid-column:2; grid-row:2; width:100%; transform:none; text-align:center; align-self:start; }
}
@media screen and (max-width:360px) {
  .masthead { grid-template-columns:130px minmax(0,1fr); padding-left:2px; padding-right:2px; }
}

/* Center the homepage Contact Me button on narrow screens only. */
@media screen and (max-width:650px) {
  .home-intro-row .home-intro-contact { margin-left:auto; margin-right:auto; }
}