:root{color-scheme:light;--ink:#111313;--muted:#555;--line:#d7d7d7}
*{box-sizing:border-box}html,body{margin:0}body{background:white;color:var(--ink);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid #222;outline-offset:4px}
.page{max-width:1660px;margin:auto;padding:0 clamp(30px,5.25vw,90px);min-height:100vh;display:flex;flex-direction:column}
.top{height:77px;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:27px}.top nav{display:flex;gap:43px}.top button{border:0;background:none;cursor:pointer;text-transform:uppercase;letter-spacing:0;font:400 11px/normal Georgia,"Times New Roman",serif;padding:2px}
.intro{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(250px,.72fr);gap:40px;align-items:end;padding:44px 0 49px}.eyebrow{font:12px/1.65 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.22em;color:#525252;margin:0}.hairline{width:57px;height:1px;background:#444;margin:20px 0 47px}.identity h1{margin:0;font:400 clamp(43px,5.25vw,82px)/1.10 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase}.identity h1 span{display:block;white-space:nowrap}.identity h1 span:last-child{margin-top:5px;letter-spacing:.24em}.tagline{font:normal clamp(25px,3vw,46px)/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.025em;margin:25px 0 0}.statement{border-left:1px solid #e3e3e3;padding:0 0 0 38px;margin-bottom:66px}.statement p{font:normal clamp(20px,1.65vw,26px)/1.28 Georgia,'Times New Roman',serif;margin:0;max-width:320px}
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.frames figure{margin:0;aspect-ratio:2.34;overflow:hidden;background:#ddd}.frames img{width:100%;height:100%;display:block;object-fit:cover}
.sections{border-top:1px solid var(--line);margin-top:70px;padding-top:39px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.section{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:0;text-align:left;border:0;background:transparent;cursor:pointer;min-height:165px;padding:0 35px 0 9%}.section+ .section{border-left:1px solid var(--line)}.section-title{font:normal 21px/1.2 Georgia,'Times New Roman',serif}.section-line{width:33px;height:1px;background:#777;margin:17px 0 17px}.section-summary{font:normal 17px/1.45 Georgia,'Times New Roman',serif;color:#656565}.section-arrow{font:25px/1 Arial,sans-serif;margin-top:13px}.section:hover .section-title{text-decoration:underline;text-underline-offset:5px}
.foot{display:flex;justify-content:space-between;margin-top:auto;padding:37px 0 19px;color:#999;font:9px Arial,sans-serif}
dialog{border:1px solid #d8d8d4;box-shadow:0 22px 90px #0002;width:min(540px,calc(100% - 32px));padding:0}dialog::backdrop{background:#15151566}.dialog-content{position:relative;padding:56px 45px 60px}.dialog-kicker{font:10px Arial,sans-serif;letter-spacing:.2em;color:#777}.dialog-content h2{font:normal 35px Georgia,serif}.dialog-content>p:last-child{font:17px/1.65 Georgia,serif}.close{position:absolute;right:20px;top:14px;border:0;background:none;font-size:32px;cursor:pointer}
@media(min-width:1700px){.intro{padding-bottom:65px}.sections{margin-top:80px}}
@media(max-width:1100px){.page{padding:0 45px}.intro{grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr)}.identity h1{font-size:clamp(40px,5vw,60px)}.statement{margin-bottom:45px;padding-left:25px}.sections{margin-top:50px}.section{padding-left:7%}}
@media(max-width:700px){.page{padding:0 22px}.top{height:66px;padding-top:23px}.top nav{gap:20px}.top button{font-size:10px}.intro{grid-template-columns:1fr;gap:25px;padding:30px 0 32px}.eyebrow{font-size:10px}.hairline{margin:15px 0 34px}.identity h1{font-size:clamp(27px,6.7vw,46px);letter-spacing:.13em}.identity h1 span:last-child{letter-spacing:.20em}.tagline{font-size:clamp(24px,5vw,35px);margin-top:20px}.statement{margin:5px 0 0;padding-left:19px}.statement p{font-size:19px;max-width:300px}.frames{gap:7px}.frames figure{aspect-ratio:1.1}.sections{margin-top:36px;padding-top:30px;gap:10px}.section{padding:0 6px 0 0;min-height:142px}.section+.section{border:0}.section-title{font-size:19px}.section-line{margin:13px 0}.section-summary{font-size:12px}.section-arrow{font-size:22px}.foot{padding-top:28px}}
@media(max-width:390px){.identity h1{font-size:26px}.section-title{font-size:17px}.section-summary{font-size:11px}}

/* Morning Road: panoramic artwork integrated into the ORIGINAL page. */
body,.page{background:#fff}
.intro{padding-top:23px;padding-bottom:22px}
/* The artwork is a deliberately shallow band: cropping occurs in CSS, not in the asset. */
.panorama{position:relative;height:clamp(290px,31vw,425px);margin:0 calc(-1 * clamp(30px,5.25vw,90px));overflow:hidden;pointer-events:none}
.panorama img{display:block;position:absolute;width:105.5%;height:auto;max-width:none;left:0;top:50%;transform:translateY(-52.5%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);
}
.sections{border-top:0;margin-top:52px;padding-top:14px}
@media(min-width:1700px){.intro{padding-top:23px;padding-bottom:22px}.sections{margin-top:45px}}
@media(max-width:1100px){.panorama{margin:0 -45px;height:clamp(280px,36vw,390px)}.panorama img{width:104.5%}.sections{margin-top:38px}}
@media(max-width:700px){.intro{padding-top:20px;padding-bottom:14px}.panorama{margin:0 -22px;height:220px}.panorama img{width:165%;left:-44%;top:50%;transform:translateY(-50.5%)}.sections{margin-top:26px;padding-top:8px}}

/* Compact single-screen desktop layout. Original white version retained. */
@media (min-width:701px) {
  .page { min-height:100vh; min-height:100dvh; }
  .top {height:53px; padding-top:19px; flex-shrink:0;}
  .intro {padding-top:8px; padding-bottom:12px;}
  .tagline {margin-top:16px;}
  .statement {margin-bottom:35px;}
  .panorama {height:clamp(195px, calc(100dvh - 500px), 355px);}
  .sections {margin-top:30px; padding-top:8px;}
  .section {min-height:113px;}
  .section-line {margin:12px 0 12px;}
  .foot {padding-top:10px; padding-bottom:13px;}
}
@media (min-width:701px) and (max-height:760px) {
  .top {height:44px; padding-top:13px;}
  .intro {padding-top:4px; padding-bottom:7px;}
  .identity h1 {font-size:clamp(40px,4.5vw,69px);}
  .tagline {font-size:clamp(25px,2.7vw,40px); margin-top:10px;}
  .statement {margin-bottom:25px;}
  .panorama {height:clamp(185px, calc(100dvh - 440px), 285px);}
  .sections {margin-top:22px; padding-top:4px;}
  .section {min-height:100px;}
  .foot {padding-top:7px; padding-bottom:10px;}
}
/* On mobile keep the original natural scroll rather than shrink readability. */

/* Optical spacing adjustment: move only text, never the panorama crop. */
@media (min-width:701px) {
  .intro > .identity, .intro > .statement { position:relative; top:-18px; }
  .sections { transform:translateY(-6px); }
}
@media (max-width:700px) {
  /* Maintain legible, natural mobile spacing. */
}

/* Approved logo 02.10: keep artwork and panorama unchanged. */
.identity .logo-heading{margin:0;line-height:0}
.identity .brand-logo{display:block;width:clamp(225px,22vw,310px);height:auto;max-width:100%}
.tagline{font-size:clamp(22px,2.15vw,33px);margin-top:21px}
@media(min-width:701px){.tagline{font-size:clamp(22px,2.15vw,33px);margin-top:20px}}
@media(max-width:700px){.identity .brand-logo{width:min(65vw,255px)}.tagline{font-size:clamp(22px,4.3vw,29px);margin-top:19px}}

/* Precise logo cleanup: same artwork, smaller size, no background plate. */
.identity .brand-logo{width:clamp(170px,16vw,215px);height:auto}
@media(max-width:700px){.identity .brand-logo{width:min(53vw,195px)}}

/* Restore the original approved composition after downsizing the logo.
   Keep the heading's PREVIOUS layout height; adjust only the graphic inside it. */
.identity .logo-heading{height:clamp(73.8px,7.22vw,101.65px);display:block;position:relative;overflow:visible}
.identity .brand-logo{position:absolute;top:0;left:0}
@media(max-width:700px){.identity .logo-heading{height:calc(min(65vw,255px) * 303 / 924)}}

/* Only change: tagline type size reduced by 12%; all other layout rules preserved. */
.tagline{font-size:clamp(19.36px,1.892vw,29.04px)}
@media(min-width:701px){.tagline{font-size:clamp(19.36px,1.892vw,29.04px)}}
@media(max-width:700px){.tagline{font-size:clamp(19.36px,3.784vw,25.52px)}}

/* Concept study: meaning below logo, poetic slogan on the right.
   No modifications to artwork, logo sizing, footer, or panorama positioning. */
.identity .company-meaning {
  font: normal clamp(19px,1.65vw,25px)/1.28 Georgia,'Times New Roman',serif;
  letter-spacing:0; max-width:490px; margin:20px 0 0;
}
.statement p.right-slogan {
  font: normal clamp(20px,1.9vw,29px)/1.23 Georgia,'Times New Roman',serif;
  max-width:350px; margin:0;
}
@media(max-width:700px){
  .identity .company-meaning{font-size:19px;margin-top:19px;max-width:350px}
  .statement p.right-slogan{font-size:22px;max-width:350px}
}

/* Typography-only revision: smaller company meaning (-15%) and right slogan (-8%). */
.identity .company-meaning{font-size:clamp(16.15px,1.4025vw,21.25px)}
.statement p.right-slogan{font-size:clamp(18.4px,1.748vw,26.68px)}
@media(max-width:700px){
  .identity .company-meaning{font-size:16.15px}
  .statement p.right-slogan{font-size:20.24px}
}

/* Approved bottom navigation typography: smaller, consistent across browsers and viewport widths. */
.section-title { font-family: Georgia, 'Times New Roman', serif; font-size:18px; font-weight:400; line-height:1.25; }
.section-summary { font-family:Georgia, 'Times New Roman', serif; font-size:13px; font-weight:400; line-height:1.45; }
@media(max-width:390px){.section-title{font-size:18px}.section-summary{font-size:13px}}

/* Equal-size typography: company meaning and the three section headings. */
.identity .company-meaning,
.section-title {font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:400;}
@media(max-width:700px){.identity .company-meaning,.section-title{font-size:20px}}

/* Only company meaning adjusted to 18px; bottom section headings remain 20px. */
.identity .company-meaning{font-size:18px;}
@media(max-width:700px){.identity .company-meaning{font-size:18px;}}

/* Final local adjustment: slightly larger descriptions; no hover underlines. */
.section-summary{font-size:14px;}
.section:hover .section-title,.section:focus-visible .section-title{text-decoration:none;}
@media(max-width:390px){.section-summary{font-size:14px;}}

/* Refined lower-section separators: 35% shorter, lighter, vertically centered. */
@media (min-width:701px) {
  .section + .section { border-left:0; }
  .section + .section::before {
    content:"";
    position:absolute;
    left:0;
    top:17.5%;
    height:65%;
    width:1px;
    background:#e3e3e3;
    pointer-events:none;
  }
}

/* Final typography: company meaning shares exactly the bottom section heading style.
   Optical shift affects ONLY this line; its layout space is preserved. */
.identity .company-meaning {
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px; font-weight:400; line-height:1.25;
  transform:translateY(-43px);
}
@media(max-width:700px){.identity .company-meaning{font-size:20px;transform:translateY(-43px)}}

/* Align the bottom edges of the left meaning and right slogan (desktop only).
   No changes to typography, box sizes, or other positions. */
@media (min-width:701px) {
  .identity .company-meaning { transform:translateY(-35px); }
}
@media (min-width:701px) and (max-height:760px) {
  .identity .company-meaning { transform:translateY(-25px); }
}

/* Shift BOTH hero copy lines down exactly 20px, keeping their mutual baseline.
   No changes to other layout/typography or reserved image space. */
@media (min-width:701px) {
  .intro > .statement { transform:translateY(20px); }
  .identity .company-meaning { transform:translateY(-15px); }
}
@media (min-width:701px) and (max-height:760px) {
  .identity .company-meaning { transform:translateY(-5px); }
}
@media (max-width:700px) {
  .intro > .statement { transform:translateY(20px); }
  .identity .company-meaning { transform:translateY(-23px); }
}